了解 websocket - 技术栈

1. 概念

复制代码

1、 websocket 是一种双向通行协议。实现了浏览器与服务器全双工通信，能更好的节省服务器资源和带宽并达到实时通讯的目的；
2、websocket连接成功后，只要连接不断开，通信就会一保持着；
3、要打开一个 WebSocket 连接，我们需要在 url 中使用特殊的协议 ws 创建 new WebSocket： 
`let socket = new WebSocket("ws://javascript.info");`
**同样也有一个加密的 wss:// 协议。类似于 WebSocket 中的 HTTPS。**

2. websocket 和http

复制代码

   Websocket是基于HTTP协议的，或者说借用了HTTP的协议来完成一部分握手。
   WebSocket与http协议一样都是基于TCP的，所以他们都是可靠的协议，调用的WebSocket的send函数在实现中最终都是通过TCP的系统接口进行传输的

典型的握手案例：

javascript 复制代码

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket   //请求的协议是 "websocket"。
Connection: Upgrade  //表示客户端想要更改协议
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==  //浏览器随机生成的安全密钥
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13 //WebSocket 协议版本，当前为 13
Origin: http://example.com    //客户端页面的源

其中，下面这两句就是告诉 Apache 、 Nginx 等服务器,我发起的是websocket协议

javascript 复制代码

Upgrade: websocket
Connection: Upgrade

服务器随后返回下面这个，就是表示告诉客户端我已经成功切换协议啦

javascript 复制代码

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Sec-WebSocket-Protocol: chat

3. ajax轮询、long poll 、websocket 的区别

ajax轮询和long poll ：每次都要建立http请求，这个过程是被动的；

websocket ：只要建立一次连接，就可以连续不断的得到服务器推送的消息，节省带宽和服务器端的压力；

ajax轮询和long poll 不同的是，ajax轮询是让浏览器隔个几秒就发送一次请求，询问服务器是否有新信息；

long poll 是采取阻塞模型（一直打电话，没收到就不挂电话），也就是说，客户端发起连接后，如果没消息，就一直不返回Response给客户端。直到有消息才返回，返回完之后，客户端再次建立连接，周而复始

4. websocket 优缺点

概括地说就是：支持双向通信，更灵活，更高效，可扩展性更好。

优点：

实时性：由于WebSocket的持久化连接，它可以实现实时的数据传输，避免了Web应用程序需要不断地发送请求以获取最新数据的情况。
双向通信： WebSocket协议支持双向通信，这意味着服务器可以主动向客户端发送数据，而不需要客户端发送请求。
减少网络负载：由于WebSocket的持久化连接，它可以减少HTTP请求的数量，从而减少了网络负载。
WebSocket 没有跨源限制。
浏览器对 WebSocket 支持很好。
可以发送/接收字符串和二进制数据

缺点：

需要浏览器和服务器都支持： WebSocket是一种相对新的技术，需要浏览器和服务器都支持。一些旧的浏览器和服务器可能不支持WebSocket。
需要额外的开销： WebSocket需要在服务器上维护长时间的连接，这需要额外的开销，包括内存和CPU。
安全问题：由于WebSocket允许服务器主动向客户端发送数据，可能会存在安全问题。服务器必须保证只向合法的客户端发送数据。

5. websocket 的API

WebSocket 方法：

javascript 复制代码

- socket.send(data)  //向服务器发送数据。
- socket.close([code], [reason])。 //关闭WebSocket连接
- /*code 是一个特殊的 WebSocket 关闭码（可选）
  reason 是一个描述关闭原因的字符串（可选）
  例如：
  // 关闭方：
socket.close(1000, "Work complete");

// 另一方
socket.onclose = event => {
  // event.code === 1000
  // event.reason === "Work complete"
  // event.wasClean === true (clean close)
};*/

WebSocket 事件：

open ------ 连接已建立，

message ------ 接收到数据，

error ------ WebSocket 错误，

close ------ 连接已关闭。

javascript 复制代码

let socket = new WebSocket('ws://example.com/ws');  //创建 WebSocket 对象

socket .onopen = function(e) {
  console.log('WebSocket 连接已经建立。');
};

socket.onmessage = function(event) {
  alert(`接收到服务器消息: ${event.data}`);
};

socket.onclose = function(event) {
  console.log('WebSocket 连接已经关闭。');
  if (event.wasClean) {
    alert(`[close] Connection closed cleanly, code=${event.code} reason=${event.reason}`);
  } else {
    // 例如服务器进程被杀死或网络中断
    // 在这种情况下，event.code 通常为 1006
    alert('[close] Connection died');
  }
};

socket.onerror = function(error) {
  console.error('WebSocket 连接出现错误：', event);
  alert(`[error] ${error.message}`);
};

https://www.cnblogs.com/chyingp/p/websocket-deep-in.html

https://zh.javascript.info/websocket#zong-jie