WS协议—介绍及原理

朴灿烈づ我的快乐病毒、 2023-10-12 20:54 36阅读 0赞

举例来说，我们想了解今天的天气，只能是客户端向服务器发出请求，服务器返回查询结果。HTTP 协议做不到服务器主动向客户端推送信息。

WebSocket 协议在2008年诞生，2011年成为国际标准。所有浏览器都已经支持了。它的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。

## **一、传统的实现即时通信的方式** ##

### 1、ajax轮询 ###

ajax轮询的原理非常简单，让浏览器隔个几秒就发送一次请求，询问服务器是否有新信息。

场景再现：

客户端：啦啦啦，有没有新信息(Request)
    服务端：没有（Response）
    客户端：啦啦啦，有没有新信息(Request)
    服务端：没有。。（Response）
    客户端：啦啦啦，有没有新信息(Request)
    服务端：你好烦啊，没有啊。。（Response）
    客户端：啦啦啦，有没有新消息（Request）
    服务端：好啦好啦，有啦给你。（Response）
    客户端：啦啦啦，有没有新消息（Request）
    服务端：。。。。。没。。。。没。。。没有（Response） —- loop

### 2、long poll ###

`long poll` 其实原理跟 `ajax轮询` 差不多，都是采用轮询的方式，不过采取的是阻塞模型（一直打电话，没收到就不挂电话），也就是说，客户端发起连接后，如果没消息，就一直不返回Response给客户端。直到有消息才返回，返回完之后，客户端再次建立连接，周而复始。

场景再现：

客户端：啦啦啦，有没有新信息，没有的话就等有了才返回给我吧（Request）
    服务端：额。。 等待到有消息的时候。。来 给你（Response）
    客户端：啦啦啦，有没有新信息，没有的话就等有了才返回给我吧（Request） -loop

从上面可以看出其实这两种方式，都是在不断地建立HTTP连接，然后等待服务端处理，可以体现HTTP协议的另外一个特点，被动性。何为被动性呢，其实就是，服务端不能主动联系客户端，只能有客户端发起。

> 小结：ajax轮询 需要服务器有很快的处理速度和资源。（速度）  
> long poll 需要有很高的并发，也就是说同时接待客户的能力。（场地大小）

### **3、长连接** ###

在页面里嵌入一个隐蔵iframe，将这个隐蔵iframe的src属性设为对一个长连接的请求或是采用xhr请求，服务器端就能源源不断地往客户端输入数据。

优点：消息即时到达，不发无用请求；管理起来也相对方便。

缺点：服务器维护一个长连接会增加开销，当客户端越来越多的时候，server压力大！

实例：Gmail聊天

**(1)基于http协议的长连接**

在HTTP1.0和HTTP1.1协议中都有对长连接的支持。其中HTTP1.0需要在request中增加”Connection： keep-alive“ header才能够支持，而HTTP1.1默认支持.

http1.0请求与服务端的交互过程:

*  a)客户端发出带有包含一个header：”Connection： keep-alive“的请求
 *  b)服务端接收到这个请求后,根据http1.0和”Connection： keep-alive“判断出这是一个长连接,就会在response的header中也增加”Connection： keep-alive“,同是不会关闭已建立的tcp连接.
 *  c)客户端收到服务端的response后,发现其中包含”Connection： keep-alive“，就认为是一个长连接，不关闭这个连接。并用该连接再发送request.转到a)

**(2)http1.1请求与服务端的交互过程**

*  a)客户端发出http1.1的请求
 *  b)服务端收到http1.1后就认为这是一个长连接,会在返回的response设置Connection： keep-alive,同是不会关闭已建立的连接.
 *  c)客户端收到服务端的response后,发现其中包含”Connection： keep-alive“，就认为是一个长连接，不关闭这个连接。并用该连接再发送request.转到a)

基于http协议的长连接减少了请求,减少了建立连接的时间,但是每次交互都是由客户端发起的,客户端发送消息,服务端才能返回客户端消息.因为客户端也不知道服务端什么时候会把结果准备好,所以客户端的很多请求是多余的,仅是维持一个心跳,浪费了带宽.

### **4、Flash Socket** ###

在页面中内嵌入一个使用了Socket类的 Flash 程序JavaScript通过调用此Flash程序提供的Socket接口与服务器端的Socket接口进行通信，JavaScript在收到服务器端传送的信息后控制页面的显示。

优点：实现真正的即时通信，而不是伪即时。

缺点：客户端必须安装Flash插件，移动端支持不好，IOS系统中没有flash的存在；非HTTP协议，无法自动穿越防火墙。

## **二、websocket的方式实现服务端消息推送** ##

### **1、什么是socket？什么是websocket？两者有什么区别？websocket是仅仅将socket的概念移植到浏览器中的实现吗？** ###

我们知道，在网络中的两个应用程序（进程）需要全双工相互通信（全双工即双方可同时向对方发送消息），需要用到的就是socket，它能够提供端对端通信，对于程序员来讲，他只需要在某个应用程序的一端（暂且称之为客户端）创建一个socket实例并且提供它所要连接一端（暂且称之为服务端）的IP地址和端口，而另外一端（服务端）创建另一个socket并绑定本地端口进行监听，然后客户端进行连接服务端，服务端接受连接之后双方建立了一个端对端的TCP连接，在该连接上就可以双向通讯了，而且一旦建立这个连接之后，通信双方就没有客户端服务端之分了，提供的就是端对端通信了。我们可以采取这种方式构建一个桌面版的im程序，让不同主机上的用户发送消息。从本质上来说，socket并不是一个新的协议，它只是为了便于程序员进行网络编程而对tcp/ip协议族通信机制的一种封装。

**socket传送门：** [socket-CRMEB社区][socket-CRMEB]

websocket是html5规范中的一个部分，它借鉴了socket这种思想，为web应用程序客户端和服务端之间（注意是客户端服务端）提供了一种全双工通信机制。同时，它又是一种新的应用层协议，websocket协议是为了提供web应用程序和服务端全双工通信而专门制定的一种应用层协议，通常它表示为：ws://echo.websocket.org/?encoding=text HTTP/1.1，可以看到除了前面的协议名和http不同之外，它的表示地址就是传统的url地址。

Websocket其实是一个新协议，跟HTTP协议基本没有关系，只是为了兼容现有浏览器的握手规范而已，也就是说它是HTTP协议上的一种补充可以通过这样一张图理解

**websocket具有以下几个方面的优势：**

*  （1）建立在 TCP 协议之上，服务器端的实现比较容易。
 *  （2）与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。
 *  （3）数据格式比较轻量，性能开销小，通信高效。
 *  （4）可以发送文本，也可以发送二进制数据。
 *  （5）没有同源限制，客户端可以与任意服务器通信。
 *  （6）协议标识符是`ws`（如果加密，则为`wss`），服务器网址就是 URL。

### **2、websocket的通信原理和机制** ###

websocket传输使用的协议如下图：

![98a0b1d24bde451140537ca9b6dc1a81.png][]

Websocket是一个应用层协议，它必须依赖 HTTP 协议进行一次握手 ，握手成功后，数据就直接从 TCP 通道传输，与 HTTP 无关了。即：websocket分为握手和数据传输阶段，即进行了HTTP握手 + 双工的TCP连接。既然是基于浏览器端的web技术，那么它的通信肯定少不了http,websocket本身虽然也是一种新的应用层协议，但是它也不能够脱离http而单独存在。具体来讲，我们在客户端构建一个websocket实例，并且为它绑定一个需要连接到的服务器地址，当客户端连接服务端的时候，会向服务端发送一个类似下面的http报文

GET /chat HTTP/1.1
    Host: server.example.com
    Upgrade: websocket
    Connection: Upgrade
    Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
    Origin: http://example.com
    Sec-WebSocket-Version: 13

![2020ee97c0d10ebe1df1ac72653cdbf1.png][]

客户端发起的WebSocket连接报文类似传统HTTP报文，其中：

*  Upgrade: websocket  
    Connection: Upgrade  
    这个是WebSocket的核心，告诉服务器，客户端发起的是WebSocket类型请求。Sec-WebSocket-Key是WebSocket客户端发送的一个 base64编码的密文，浏览器随机生成，要求服务端必须返回一个对应加密的Sec-WebSocket-Accept应答，否则客户端会抛出Error during WebSocket handshake错误，并关闭连接。
 *  Sec-WebSocket-Version 是告诉服务器所使用的 Websocket 协议版本

服务端收到报文后会返回下列东西，表示已经接收到请求，WebSocket建立成功，来自服务器的握手如下：

HTTP/1.1 101 Switching Protocols
    Upgrade: websocket
    Connection: Upgrade
    Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=

![2a118a541eaf046bed1e06ba35464deb.png][]

*  Upgrade: websocket
 *  Connection: Upgrade（告诉客户端即将升级的是WebSocket协议）
 *  Sec-WebSocket-Accept的值是服务端采用与客户端一致的密钥计算出来后返回客户端的

至此，HTTP已经完成它所有工作，接下来就是完全按照Websocket协议进行了。

这里值得注意的是Sec-WebSocket-Accept的计算方法：

base64(hsa1(sec-websocket-key + 258EAFA5-E914-47DA-95CA-C5AB0DC85B11))

如果这个Sec-WebSocket-Accept计算错误浏览器会提示：Sec-WebSocket-Accept dismatch

如果返回成功，Websocket就会回调onopen事件。

通过查看WebSocket的原理，与HTTP对比，得出结论：

HTTP长连接中，每次数据交换除了真正的数据部分外，服务器和客户端还要大量交换HTTP header，信息交换效率很低。Websocket协议通过第一个请求建立了TCP连接之后，之后交换的数据都不需要发送 HTTP header就能交换数据，这显然和原有的HTTP协议有区别，所以它需要对服务器和客户端都进行升级才能实现（主流浏览器都已支持HTML5）。

此外还有 multiplexing、不同的URL可以复用同一个WebSocket连接等功能。这些都是HTTP长连接不能做到的。

**基于以上分析，我们可以看到，websocket能够提供低延迟，高性能的客户端与服务端的双向数据通信。它颠覆了之前web开发的请求处理响应模式，并且提供了一种真正意义上的客户端请求，服务器推送数据的模式，特别适合实时数据交互应用开发。**

**对比前面的http的客户端服务器的交互图可以发现WebSocket方式减少了很多TCP打开和关闭连接的操作，WebSocket的资源利用率高。**

### 3、websocket的创建和常用的属性方法 ###

以下 API 用于创建 WebSocket 对象。

var Socket = new WebSocket(url, [protocol] );

以上代码中的第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的，指定了可接受的子协议。

**WebSocket 属性**

以下是 WebSocket 对象的属性。假定我们使用了以上代码创建了 Socket 对象：

![95e226270c6ce6d6f309d184b6faf4a6.png][]

CONNECTING：值为0，表示正在连接。

OPEN：值为1，表示连接成功，可以通信了。

CLOSING：值为2，表示连接正在关闭。

CLOSED：值为3，表示连接已经关闭，或者打开连接失败。

可以看到，当onopen触发时，对应的就是readyState的OPEN状态，不包含OPENING；onclose触发时，对应的就是CLOSED状态，不包含CLOSING状态。

WebSocket 事件

以下是 WebSocket 对象的相关事件。假定我们使用了以上代码创建了 Socket 对象：

![627c5e9c4daeb727fbd20eb86d7508b7.png][]

**WebSocket 方法**

以下是 WebSocket 对象的相关方法。假定我们使用了以上代码创建了 Socket 对象：

![74c69366820ac32f44d5807c45f6f7c3.png][]

![b29a94d5dbdda95e06ea72751fd96a8b.png][]

**用websocket发送接受二进制数据**

`WebSocket`可以通过`ArrayBuffer`，发送或接收二进制数据。

var socket = new WebSocket('ws://127.0.0.1:8081');
    socket.binaryType = 'arraybuffer';
     
    // Wait until socket is open
    socket.addEventListener('open', function (event) {
      // Send binary data
      var typedArray = new Uint8Array(4);
      socket.send(typedArray.buffer);
    });
     
    // Receive binary data
    socket.addEventListener('message', function (event) {
      var arrayBuffer = event.data;
      // ···
    });

[socket-CRMEB]: https://www.crmeb.com/ask/thread/30945
[98a0b1d24bde451140537ca9b6dc1a81.png]: https://img-blog.csdnimg.cn/img_convert/98a0b1d24bde451140537ca9b6dc1a81.png
[2020ee97c0d10ebe1df1ac72653cdbf1.png]: https://img-blog.csdnimg.cn/img_convert/2020ee97c0d10ebe1df1ac72653cdbf1.png
[2a118a541eaf046bed1e06ba35464deb.png]: https://img-blog.csdnimg.cn/img_convert/2a118a541eaf046bed1e06ba35464deb.png
[95e226270c6ce6d6f309d184b6faf4a6.png]: https://img-blog.csdnimg.cn/img_convert/95e226270c6ce6d6f309d184b6faf4a6.png
[627c5e9c4daeb727fbd20eb86d7508b7.png]: https://img-blog.csdnimg.cn/img_convert/627c5e9c4daeb727fbd20eb86d7508b7.png
[74c69366820ac32f44d5807c45f6f7c3.png]: https://img-blog.csdnimg.cn/img_convert/74c69366820ac32f44d5807c45f6f7c3.png
[b29a94d5dbdda95e06ea72751fd96a8b.png]: https://img-blog.csdnimg.cn/img_convert/b29a94d5dbdda95e06ea72751fd96a8b.png