本文在Node.com.com.Landfall中讨论WebSocket在js.j.中的做法,来自网络协议、技术基础以及安全和生产应用程序的方向。 概览预览文件描述如下:IO?Express InformationWebSocket 新闻广播安全和认证 BFF 应用网络协议..

本文在Node.com.com.Landfall js中介绍WebSocket的做法,从网络协议、技术基础以及安全和生产应用方向开始。

大纲预览

本文件叙述如下:

• 网络协议进化
• Socket.IO？
• ws 模块实现
• 快速一体化
• Web 软件框示例
• 消息广播
• 安全与认证
• BFF 应用

网络协议进化

在前端, HTTP 协议是最可识别的网络通信协议。 我们典型的页面打开和请求界面是 HTTP 的所有请求 。

HTTP请求具有以下特点:请求-> 响应客户开始提出请求,服务在收到请求后作出反应,完成一项请求,换句话说,HTTP请求必须由客户启动,以便服务被动响应。

此外,在启动HTTP建立TCP连接的请求之前,必须进行三次握手。TCP 连接 -> HTTP 通信 -> 断开 TCP 连接。

每项请求都是不同的,要求完成连接将导致连接中断。

在建立TPCP连接后,我们可以多次与HTTP互动,直到没有HTTP请求在一段时期内启动TPCP,即HTTP/1.1。

然而,沟通机制仍然由客户发起和服务发起,这一基本逻辑没有改变。

当应用程序相互作用时,我们发现需要实时获取服务方信息的情况。

例如,即时信息并不自动启动查询,但当服务器收到新信息时,必须立即通知客户,并向用户提供反馈。

调查的目的是让客户开始按期向服务器提出请求,以检测服务是否得到更新,如果得到更新,则提供新数据。 HTTP无法让服务提供者主动采取行动,但这些情况迫切需要解决方案,而且进行了早期投票。

尽管这种调查形式是基本和初步的,但显然有两个缺点:

1. 客户继续索要和浪费交通和服务器资源,给服务器造成压力。
2. 没有及时性的保证,客户必须在及时性和业绩之间取得平衡,请求之间的空间不得太短,不能造成延误。

开始于 HTML5WebSocket即时通信场景最终预示着关键答案的到来。WebSocket这是一项全时双向通信协议,双方可在客户与服务提供者连接时相互交流数据,使客户不必通过四舍五入以低效率的方式获取数据,服务提供的新信息将立即送达客户。

常规 HTTP 连接看起来是这样的 :

另一项协议是WebSocket,其链接如下:

然而,WebSocket与HTTP并不完全不同,为了建立WebSocket连接,客户必须首先启动HTTP请求,以建立连接,允许客户与服务在连接建立后进行双向通信。

Socket.IO？

如果你用Node. Js来完成 WebSocket, 你会发现一个叫Socket. IO的图书馆。

确实,Socket.Node.js为WebSocket应用在生产环境中创造出最大的解决方案。它具有强大的、高性能的、低潜质的,并且可以一次合并。express框架中。

然而,如果你不知道的话, Socket.IO不仅仅是一个WebSocket框架。它还包括转介机制和其他实时通信方法,作为实现更有效的双向通信的通用界面。

从技术上讲,网球只是Socket.Io的一个子集。

Socket. IO做了这么多WebSocket优化 并且如此成熟, 为什么你需要一个原始的WebSocket服务?

首先,Socket.IO无法通过原件。ws当您尝试连接到协议时, 它与您试图使用浏览器连接到网站时相似 。ws://localhost:8080/test-socket自 Socket 。 IO 服务器必须通过 Socket 。 IO 客户端连接不允许默认 WebSocket 模式连接, Socket. IO 服务没有连接 。

第二,Socket.IO有高含量的封装,使用它可能会影响你对WebSocket连接的了解。

因此,我们使用了节点。Base in js.ws从地面上建起模块, 以提供原始 WebSocket 服务, 并在前端直接连接到双向通讯协议!

ws 模块实现

下一步是一个简单、快速和高度可配置的网页软件库,由服务和客户组成。

用ws内置服务器, 带有浏览器, 可以与原件通信 。WebSocket构建一个与轻松直接相连的函数。 ws 客户端是伪造的浏览器 WebSocket 构造器功能, 与其他 WebSocket 服务器连接, 用于通信 。

注意一点：ws唯一可用于 NODE.js 环境; 浏览器中无法使用。 浏览器直接使用原始 WebSocket 创建机制 。

第一步是下载和安装 ws:

安装好后我们再建一个Ws服务器

服务端

为构建 Websocket 服务器, WebSockServer 函数是必要的 。

把这段代码写进ws-server.js然后运行：

这样一个监听8080端口的 WebSocket 服务器已经启动并运行 。

客户端

WebSocket 服务器是在前一阶段建立的, 现在我们连接到它, 在前端收听信息 :

将代码写入wsc.html然后用浏览器打开

正如观察到的那样,当浏览器成功连接时,它会从服务器得到有利的响应,从而结束连接。

在Node.js环境中, 我们可以观察 ws 模块是如何开始连接的:

代码和浏览器的逻辑是相同的, 但它的写法有点不同, 也不同。

浏览器- 终端回声函数, 即收听信件事件时的回声功能有一个参数, 即“ 消息Event ” 示例对象, 而服务端的真实数据必须使用 mevt.Data gets 来提供 。

小额财产是服务端的真实数据,直接提供给客户。

快速一体化

模块很少单独使用,上级方案往往被纳入现有框架。

Ws单元在本部分并入Express框架。

融入快递框架的好处是,我们不必听一个港口的声音;相反,我们可以利用框架起点的港口,我们也可以提供进入开始 WebSocket连接的路线的通道。

幸好我们不用手动操作, 挤压-ws模块协助了我们大部分的整合工作。

首先安装它, 然后添加到条目文件 :

与快车路由器一样,快车道允许全球和当地路线登记。

先看全局路由，通过[host]/test-ws连接：

当地路线是分路由路线小组注册的分路由,请说明名称。websocket的路由组并指向websocket.js文件，代码如下：

连接[host]/websocket/test-ws这个子路径可供您使用 。

路由器组的任务是建立一个 websocket 连接器组,将该组内不同亚路径与不同需求联系起来。单聊和群聊为每个连接的通信逻辑 设定了两个子程序

完整代码如下：

收集实际开发中经常使用的信息的简单方法:

Web 软件框示例

Web 软件框示例是指客户端连接对象，以及服务端连接的第一个参数。

代码中的ws就是 Web 软件框示例，表示建立的连接。

浏览器

浏览器的 ws 对象包含以下信息:

第一个关键是用来创建函数的 4 个监听属性组 :

• onopen：连接建立后的函数
• onmessage: 从服务器接收信件的功能
• onclose：连接关闭的函数
• onerror：连接异常的函数

其中最常用的是onmessage属性, 作为函数, 为监听服务器信件指定值 :

还有一个关键属性是readyState,它反映了连接作为数字的状态。每个值都是可以获取的。常量说明下列信函和含义:

• 0: 常量WebSocket.CONNECTING，表示正在连接
• 1: 常量WebSocket.OPEN，表示已连接
• 2: 常量WebSocket.CLOSING，表示正在关闭
• 3: 常量WebSocket.CLOSED，表示已关闭

当然最重要的还有send要将信息和数据传输到服务器,请使用以下方法:

服务端

服务的 ws 对象是一个客户端, 该客户端目前正在启动连接, 与浏览器有许多相同的功能 。

例如,顶级客户的四个监听特征,readyState属性，以及send然而,执行这一方法的是Node.js,因此得到的支持要多得多。

例如,以下两类监听活动具有同等效果:

消息广播

WebSocket 服务器没有单一的客户连接,信息广播意味着向所有连接的客户广播信息,就像扩音器,让每个人都能听到,而典型的情景是热门推车。

因此,在广播之前,必须处理如何接触目前连接的(在线)客户的问题。

其实ws模块使我们容易获得:

方便吧。再看express-ws怎么获取：

拿到wss.clients后，我们看看它到底是什么样子。经过打印，发现它的数据结构比想象到还要简单，就是由所有在线客户端的 Web 软件框示例组成的一个Set集合。

找出目前有多少在线客户:

一个基本的初级广播:

这是一个非常简单的基本方法来完成它。 想象如果同时有100个在线客户, 而大部分的周期将会被卡住。 这就是为什么它像套接字。 iio 这样的图书馆, 优化和包扎基本的方法, 并改进他们的共同表现。

上面的广播属于全局广播将信息传递给每个人。然而,还有另一个场景,例如每5个小组的谈话,电台只是给5个人小组发短信,所以称之为:局部广播。

本地广播的现实情况更加困难,而且通常与独特的商业场景相对应。 这需要我们在与客户接触时保持客户数据处理。 例如,使用..Redis存储在线客户的状况和数据,以便更快和更有效地进行分类。

局部广播实现，那一对一私聊就更容易了。找到两个客户端对应的 Web 软件框示例互发消息就行。

安全与认证

WebSocket 服务器在前端部署, 任何客户端都可以默认连接, 这在生产环境中是无法想象的。 我们必须以两种方式保护 WebSocket 服务器 :

1. Tok 连接的验证
2. wss 支持

这是我心里想的

Tok 连接的验证

HTTP 请求接口, 我们通常使用 JWT 认证, 请求信头中有定义的页眉, 发送一个符号字符串, 使用此符号进行校验, 如果认证失败, 则返回 401 。

我们上面说过，WebSocket建立连接的第一阶段是客户启动 HTTP 连接请求, 这样我们就可以验证 HTTP 请求, 如果认证失败, 在 WebSocket 中建立的链接是否不够充分?

让我们以同样的方式更改服务终端代码。

用于核查,使用 HTTP 层。http创建服务器和关闭 WebSocket 服务端口的模块 。

当客户端通过ws://连接到服务端时, 协议将升级, 即 http 协议将升级到 Websocket 协议, 启动该协议 。upgrade事件：

因此,服务终端认证已经实施,精确的认证技术是与客户对客户的准入同时选择的。

WebSocket 客户端连接不接受自定义信头, JWT 程序无法使用, 只留下两个选项:

• Basic Auth
• Quary 传参

Basic Auth认证与账户+密码一样简单,在网站上提供账户代码。

如果我的帐号是真理,密码是123456, 客户连接如下:

然后服务器将获得以下请求 :

cnVpbXM6MTIZDU2是其中之一。ruims:123456此代码可由服务器为认证目的获取 。

Quary简单的交叉引用与普通的 URL 交叉引用相同,但使用服务器可以获得和认证的较短的加密字符串:

服务端获取参数：

wss 支持

使用 WebSocket 客户端ws://Wss在协议连接中代表什么?

这其实很直截了当, 和《https》的校长一模一样。

httpsHTTPS 是一个安全的 http 协议, 将 HTTP 和 SSL 结合起来 。

wss是一个安全 ws 协议,将 WS 和 SSL 结合起来。

我们为什么要使用Ws?除了安全外,还有一个不明智的原因:如果您的网站使用 https 协议,使用 WebSocket 的当前应用程序必须使用 Wss 协议,否则浏览器将拒绝连接。

设置 ws 以直接添加一个到 https 配置 。location,转到 gnex 配置:

客户接通情况如下:

BFF 应用

也许你听说过 朋友 都归根结底Backend For Frontend,它指的是前端的后端, 真正的应用程序架构的前端和后端的后端中间层。

诺德Js通常承认这种中观水平,但是它能做什么呢?

背面的主要结构是微服务,在微服务方面,API的分割非常细,商品服务是商品服务,通知服务是通知服务。当你想将产品放在货架上时向用户发送信息时,至少需要两个界面。

这实际上对前端是不舒服的, 然后显示 BFF 介质级别, 等于后端要求的中间站, 后端可以直接请求 BFF 接口, 然后BFF 请求后端接口, 后端需要将数据合并并同时传送到前端 。

那么,我们怎样才能使用我们在会议楼讨论的大量网页软件信息呢?

我至少想到了四种可能性:

1. 见最新的在线号码和在线用户信息。
2. 新设备登录新设备,旧设备注销旧设备
3. 检测网络连接/断开
4. 小小

过去,这些操作是在后端完成的,并且与其他业务功能相关联。有了BFF,WebSocket现在可以在这个级别上完全实施,让后端关注核心数据逻辑过程,这些操作是在后端完成的,并且与其他业务功能相关联。有了BFF,WebSocket现在可以在这个级别上完全实现,让后端关注核心数据逻辑。

因此,我们在节点获得了WebSocket。 以js作为前端的经验是不理想的, 我们可以打破内部的音量, 并继续在另一个部门发挥作用。

本文由 在线网速测试 整理编辑，转载请注明出处，原文链接：https://www.wangsu123.cn/news/14475.html。