浅浅的聊一下 WebSocket

一次看到 ws:// 和 wss:// 时候，感觉好高级啊，还有这种协议。

Websocket 历史

WebSocket是在2008年6月诞生的1。经由IEFT标准化后，2009年chrome 4第一个提供了该标准支持，并默认启用。于2011年由IEFT标准化为RFC 6455。

现在的浏览器均已支持该标准。

Websocket 出现的背景

思考一下我们经常遇到的一种需求场景，要求在某个网页下，网页的内容可以实时更新。

这种情况下，最大众化的方式就是轮询接口了，即通过定时器，定时请求接口，获取到最新的信息后，将内容更新到页面中，如下：

setInterval(()=> {
  queryAPI().then(()=> update());
}, 1000);

但是我们知道，这种定时器的延时并不是很精确，而且加上接口的请求时延，实际时间可能不止代码中所预先设定的时间长度，所以这种实时更新是伪实时更新。

除此之外，还有一点可能会经常遇到，即，我们更新信息并总是要更新整个页面上所有可以看到的信息，我们更关注一些经常变化的信息，比如状态，状态的信息可能大小只有几个字节，但是我们轮询接口拿到的信息却是这个页面的所有信息，大小自然不只几个字节，但是除状态以外的信息都可以视作是冗余的。

我们实际只需要一个字段，而且即使后端提供只返回状态的接口，但实际在一个请求中还要计算ip报文头的大小，依旧是很占用带宽的。

轮询这种解决方案目前依旧是非常流行，最新的轮询技术是Comet，这种技术虽然可以实现双向通信，但仍然需要反复发出请求。而且在Comet中普遍采用的HTTP长连接也会消耗服务器资源2。

Websocket通信模式

了解网络的都知道，数据传输分为单工、半双工、全双工三种工作模式。

Websocket是基于TCP的，使用全双工通信模式的协议，他使得客户端和服务端之间的数据交换变得更简单。而且，作为一个工作在全双工模式下的协议，服务端可以在建立连接后随时向客户端推送消息。

由于协议是基于TCP的，所以websocket也是需要建连和关闭连接的，但要注意的是，一般在websocket的握手通常指的是：客户端发送一个http请求到服务端，服务端响应后标志这个链接建立起来。而不是指tcp的三次握手。

另外在RFC 6455 1.1节「Background」中介绍：WebSocket通过HTTP端口的80和443进行工作，并支持HTTP代理和中介。

原文：it is designed to work over HTTP ports 80 and 443 as well as to support HTTP proxies and intermediaries

为了实现和HTTP的兼容性，WebSocket握手使用HTTP的Upgrade头将HTTP协议转换成Websocket协议。

作为一种协议，websocket自然也是有其用于协议控制的头部信息的，但是相对于HTTP请求每次都要带上完整的头部信息，传输数据时，websocket数据包的头部信息就相对较小，从而降低了控制开销。

相对于前文所提到的轮询接口，websocket可以做到服务端直接向客户端传输数据，省去了客户端发起请求的步骤，同时没有间隔时间，只要服务端内容变化，就可以告知客户端，实时性上有了很大的提高。

Websocket 使用

WebSocket使用十分简单，只需要关注以下API：

WebSocket(url[, protocol]) 构造函数

使用 new WebSocket(xxx) 创建对象时，会同时建立与服务器的连接

WebSocket.onopen , WebSocket.onclose

分别对应连接成功、失败时的回调，这里可以做一些初始化、销毁的工作

WebSocket.onmessage

实际处理数据是用的该函数

在数据处理完成后，需要移除回调函数，不然可能会影响到其他地方的处理

const ws=new WebSocket('ws://sdf.com');
function handleData(evt) {
  // handle server data.
}
ws.onmessage=handleData;
ws.addEventListener('message', handleData);

WebSocket.send

主动向服务端发送消息，可以通过send和onmessage进行数据互动，如：

ws.send('list');

ws.onmessage=evt=> {
  const data=evt.data;
  if (data==='hello') {
    console.log('world');
    return ;
  }
  try {
    const obj=JSON.parse(data);
    switch (obj.type) {
      case 'list':
        // do something.
    }
  } catch (ex) {}
}

WebSocket.close

关闭连接

Node服务端的实现，这个就参考相关的库吧，比较复杂。

衍生知识

http协议至今，主要经历了三个版本。

http1.0 短连接，单工通信

http/1.0默认的模型是短连接，每个HTTP请求都由他自己独立完成，下图左1，可以看到每一个http请求都对应了一个建立连接关闭连接的阶段，每一个请求都有TCP握手和挥手的阶段。
在这个模型下，想要做到实时更新页面数据，只能考虑轮询。

http1.1 支持长链接，半双工通信

1.0之后的版本，1.1会让某个连接保持一定的时间，在这段时间里重复发送一系列请求（下图左2），就是保活。

http2.0 支持多路复用，全双工通信

来源：https://www.cnblogs.com/keepsmart/p/16007094.html

ebSocket

WebSocket 是一种支持双向通讯网络通信协议。
意思就是服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息
属于服务器推送技术的一种.

特点：

（1）建立在 TCP 协议之上，服务器端的实现比较容易。

（2）与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。

（3）数据格式比较轻量，性能开销小，通信高效。

（4）可以发送文本，也可以发送二进制数据（blob对象或Arraybuffer对象）

（5）收到的数据类型可以使用binaryType 指定，显示指定收到的二进制数据类型

（6）没有同源限制，客户端可以与任意服务器通信。

（7）协议标识符是ws（握手http）（如果加密，则为wss（tcp +TLS)），服务器网址就是 URL。

WebSocket对象

WebSocket对象提供了用于创建和管理WebSocket 连接，以及可以通过该连接发送和接收数据的 API。

使用 WebSocket() 构造函数来构造一个 WebSocket 。

为什么需要websocket

Hypertext Transfer Protocol (HTTP) 协议

一种无状态的、应用层的、以请求/应答方式运行的协议，它使用可扩展的语义和自描述消息格式，与基于网络的超文本信息系统灵活的互动.

因为http 通信只能由客户端发起,服务器返回查询结果,HTTP 协议做不到服务器主动向客户端推送信息, 服务器有连续的状态变化，客户端要获知就非常麻烦。
我们只能使用轮询：每隔一段时候，就发出一个询问，了解服务器有没有新的信息。最典型的场景就是聊天室。
轮询的效率低，非常浪费资源（因为必须不停连接，或者 HTTP 连接始终打开）;

Chrome 请求列表：分析 WebSocket

过滤器(过滤资源xhr js ws css ws等)：

按照类型： ws
属性过滤： is：running

表格列 Frames

Data: 消息负载。如果消息为纯文本，直接显示。二进制操作吗显示操作码名称和代码（Continuation Frame、 Binanry Frame、 Connection Close Frame、 Ping Frame或者Pong Frame）
Length: 消息负载的长度以字节为单位
Time: 收到或者发送的时间。

消息颜色

发送到服务器的文本消息为浅绿色
接收到的文本消息为白色
WebSocket 操作码为浅黄色
错误为浅红色

WbeSocket 的成本对比http

1、实时性与可伸缩性。牺牲了简单性。

2、网络效率与无状态：请求1基于请求2 牺牲了简单性与可见性

websocket 的心跳保持对比http

（http 长连接只能基于简单的超时（常见为65s））
websocket 链接基于ping/pong 心跳机制维持

设计哲学：在web约束下暴露tcp 给上层

元数据

http 协议头部会存放元数据.
websocket 上传输的应用层存放元数据

基于帧：不是基于字节流（http, tcp）

每一帧要么存放字符数据，要么承载二进制数据

基于浏览器的同源策略模型个（非浏览器无效）

可以使用Access-Control-Allow-Origin 等头部

基于URI、子协议支持同主机``同端口上的多个服务

帧格式示意图

ABNF 描述的帧格式

ini

复制代码

ws-frame=frame-fin ; 1 bit in length frame-rsv1 ; 1 bit in length frame-rsv2 ; 1 bit in length frame-rsv3 ; 1 bit in length frame-opcode ; 4 bits in length frame-masked ; 1 bit in length frame-payload-length ; 3 种长度 [ frame-masking-key ] ; 32 bits in length frame-payload-data ; n*8 bits in ; length, where ; n >=0

红色: 2 字节必然存在的帧首部

数据帧格式： Rsv 保留值

RSV1/RSV2/RSV3：默认为 0，仅当使用 extension 扩展时，由扩展决定其值

数据帧格式：帧类型

持续帧
0: 继续前一帧
非控制帧
1：文本帧（utf-8）
2：二进制帧
3-7: 为非控制帧保留
控制帧 8: 关闭帧 9: 心跳帧ping A: 心跳帧pong B-F:控制帧保留

URI 格式

1、ws-uri: ws://[host][:port][path][?query]
端口port默认 80
2、wss-uri: wss://[host][:port][path][?query] 端口port 默认443

客户端提供信息

host、port 主机端口
schema: 是否基于SSL
访问的资源：uri
握手随机数：Sec-WebSocket-Key
选择的子协议：Sec-WebSocket-Protocol
扩展协议：Sec-WebSocket-Extensions
CORS：Origin

如何证明握手被服务器接受？预防意外

请求中的 Sec-WebSocket-Key 随机数
Sec-WebSocket-Key: A1EEou7Nnq6+BBZoAZqWlg==

响应中的 Sec-WebSocket-Accept 证明值
GUID（RFC4122）：258EAFA5-E914-47DA-95CA-C5AB0DC85B11

? 值构造规则：BASE64(SHA1(Sec-WebSocket-Key + GUID))

? 拼接值：A1EEou7Nnq6+BBZoAZqWlg==258EAFA5-E914-47DA-95CA-C5AB0DC85B11

? SHA1 值：713f15ece2218612fcadb1598281a35380d1790f

? BASE 64 值：cT8V7OIhhhL8rbFZgoGjU4DReQ8=

? 最终头部：Sec-WebSocket-Accept: cT8V7OIhhhL8rbFZgoGjU4DReQ8=

作者：LHDIYU
链接：https://juejin.cn/post/6989539483695710215
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

言

WebSocket 作为一种基于 TCP 协议的实时通信协议，为前端应用提供了强大的双向通信能力。本文将深入探讨前端 WebSocket 的相关问题，包括协议区别、用法、关键技术点等。

WebSocket 协议和 HTTP 协议的区别是什么？

WebSocket 是一种实时双向通信协议，与 HTTP 协议相比，有以下几个主要区别：

连接方式：WebSocket 提供持久的连接，通过握手过程建立连接后保持打开状态，而 HTTP 是无状态的，每次请求都需要重新建立连接。
数据格式：WebSocket 支持文本和二进制数据的传输，而 HTTP 主要是传输文本数据。
数据传输方式：WebSocket 实现了全双工通信，客户端和服务器可以同时发送和接收数据，而 HTTP 是单向的，客户端发起请求，服务器响应数据。
协议标识：WebSocket 使用 ws:// 或 wss:// 前缀标识，而 HTTP 使用 http:// 或 https://

WebSocket 的优势和适用场景是什么？

WebSocket 相对于传统的 HTTP 请求具有以下优势：

实时性：WebSocket 提供了低延迟的实时通信能力，能够在服务器端有新数据时立即推送给客户端。
双向通信：WebSocket 支持客户端和服务器之间的双向通信，可以实现实时聊天、实时数据更新等场景。
较低的网络开销：WebSocket 使用长连接，相对于频繁的短连接请求，减少了网络开销。
更高的性能：由于减少了 HTTP 请求的开销，WebSocket 在性能上更高效。
跨域支持：WebSocket 具备跨域通信的能力，可以跨域进行实时通信。

WebSocket 的适用场景包括实时聊天应用、股票行情推送、实时协作编辑、多人游戏、实时数据监控等需要实时双向通信的场景。

WebSocket 的连接建立过程是怎样的？

WebSocket 的连接建立过程包括以下步骤：

客户端发送 WebSocket 握手请求，请求头包含 Upgrade 和 Connection 字段，指定协议升级和建立连接。
服务器收到握手请求后，验证请求头的字段，并返回握手响应，响应头包含 Upgrade 和 Connection 字段，以及一个随机的 Sec-WebSocket-Key 字段。
客户端收到握手响应后，验证响应头的字段，并生成一个 Sec-WebSocket-Accept 值进行验证。
验证通过后，WebSocket 连接建立成功，客户端和服务器可以开始进行实时通信。

WebSocket 的事件有哪些？请分别描述它们的作用。

WebSocket 提供了以下几种事件：

open：当 WebSocket 连接成功建立时触发的事件。可以在此事件中执行初始化操作或向服务器发送初始数据。
message：当从服务器接收到新消息时触发的事件。可以在此事件中处理接收到的数据。
error：当出现连接错误时触发的事件。错误可能包括连接失败、数据传输错误等。可以在此事件中处理错误并采取适当的措施。
close：当 WebSocket 连接关闭时触发的事件。关闭可能是由服务器或客户端发起的，可以在此事件中执行清理操作或重新连接等操作。

这些事件可以通过设置对应的事件处理函数来处理不同的连接状态和数据传输。

在浏览器端如何创建和使用 WebSocket 对象？

在浏览器端，可以使用 JavaScript 中的 WebSocket 对象来创建和使用 WebSocket。示例代码如下：

const socket=new WebSocket('wss://example.com/socket');

其中，new WebSocket() 通过传入服务器的 WebSocket URL 来创建一个 WebSocket 对象。然后可以通过设置事件处理函数来处理 WebSocket 的事件，例如：

socket.onopen=function(event) {
  console.log('WebSocket 连接已打开');
};

socket.onmessage=function(event) {
  const message=event.data;
  console.log('接收到消息:', message);
};

socket.onerror=function(error) {
  console.error('WebSocket 错误:', error);
};

socket.onclose=function(event) {
  console.log('WebSocket 连接已关闭');
};

在连接建立成功后，可以使用 send() 方法发送消息到服务器，例如：

socket.send('Hello, server!');

如何发送和接收消息？有哪些方法可以发送二进制数据？

通过 WebSocket 的 send() 方法可以向服务器发送消息，例如：

socket.send('Hello, server!');

接收到的消息可以在 onmessage 事件处理函数中进行处理，例如：

socket.onmessage=function(event) {
  const message=event.data;
  console.log('接收到消息:', message);
};

WebSocket 除了发送和接收文本消息外，还支持发送和接收二进制数据。对于发送二进制数据，可以使用 send() 方法传递一个 ArrayBuffer 或 Blob 对象，例如：

const buffer=new ArrayBuffer(4);
const view=new DataView(buffer);
view.setUint32(0, 1234);
socket.send(buffer);

在接收二进制数据时，可以通过 event.data 获取到 ArrayBuffer 对象，然后进行处理。

如何处理错误和关闭连接？

WebSocket 在出现错误时会触发 error 事件，可以通过设置 onerror 事件处理函数来处理错误，例如：

socket.onerror=function(error) {
  console.error('WebSocket 错误:', error);
};

当 WebSocket 连接关闭时，会触发 close 事件，可以通过设置 onclose 事件处理函数来执行一些清理操作或重新连接等操作，例如：

socket.onclose=function(event) {
  console.log('WebSocket 连接已关闭');
};

可以通过调用 close() 方法来显式地关闭 WebSocket 连接，例如：

socket.close();

WebSocket 的安全性和跨域问题如何处理？

WebSocket 支持通过 wss:// 前缀建立加密的安全连接，使用 TLS/SSL 加密通信，确保数据的安全性。在使用加密连接时，服务器需要配置相应的证书。

对于跨域问题，WebSocket 遵循同源策略，只能与同源的服务器建立连接。如果需要与不同域的服务器通信，可以使用 CORS（跨域资源共享）来进行跨域访问控制。

在实际应用中，如何处理连接状态的变化和重连机制？

在实际应用中，可以通过监听 open、error 和 close 事件来处理连接状态的变化。当连接关闭时，可以根据需要执行重连机制，例如使用指数退避算法进行重连，以确保连接的稳定性和可靠性。

WebSocket 的性能如何优化？有哪些注意事项和最佳实践？

为了优化 WebSocket 的性能，可以考虑以下几个方面：

减少数据量：合理控制发送的数据量大小，避免不必要的数据传输。
心跳机制：通过定时发送心跳消息，保持连接的活跃状态，防止连接被关闭。
数据压缩：可以使用压缩算法对数据进行压缩，减少网络传输的数据量。
服务器端优化：合理配置服务器端的连接数和资源管理，以支持更多的并发连接。

WebSocket 和长轮询相比，各自有什么优缺点？

WebSocket 和长轮询都可以实现实时通信，但它们具有不同的特点和适用场景。

WebSocket 的优点：

实时性：WebSocket 建立一次连接后可以进行持久通信，实时性较高。
双向通信：WebSocket 支持客户端和服务器之间的双向通信。
较低的网络开销：WebSocket 使用长连接，减少了网络开销。

WebSocket 的缺点：

兼容性：部分老旧的浏览器可能不支持 WebSocket，需要进行兼容处理。
服务器支持：服务器需要支持 WebSocket 协议和相关处理逻辑。

长轮询的优点：

兼容性：长轮询可以在所有支持 HTTP 的浏览器中使用。
简单实现：相对于 WebSocket，长轮询的实现较为简单。

长轮询的缺点：

延迟较高：由于需要不断发起轮询请求，延迟相对较高。
频繁的请求：长轮询需要频繁地发送请求，增加了服务器的负载。

根据具体需求和场景，选择合适的方案来实现实时通信。如果需要更高的实时性和较低的网络开销，WebSocket 是更好的选择。如果兼容性要求较高或者对实时性要求不高，可以考虑使用长轮询。

作者：嚣张农民
链接：https://juejin.cn/post/7288963909591138344

在线咨询

上一篇：12款pc端聊天界面ui设计
下一篇：利用jQuery实现点击图片放大和缩小

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商