前端WebSocket创建和使用

创建WebSocket

// 创建一个webSocket对象
let socket = new WebSocket("url");

建立连接，发送消息

// 建立连接
socket.onopen = function(e) {
  alert("链接成功");
  // 发送消息
  socket.send("hi");
};

监听消息

// 收到消息
socket.onmessage = function(event) {
  alert(`返回消息: ${event.data}`);
  //消息处理、、、
};

关闭链接

socket.onclose = function(event) {
  if (event.wasClean) {
    alert(`状态码, code=${event.code} reason=${event.reason}`);
  } else {
    alert('异常关闭');
  }
};

链接错误

//错误信息
socket.onerror = function(error) {
  alert(`错误信息 ${error.message}`);
};

创建对象发出的请求的浏览器 header

GET /chat
Host: javascript.info
Origin: https://javascript.info
Connection: Upgrade
Upgrade: websocket
Sec-WebSocket-Key: Iv8io/9s+lYFgZWcXczP8Q==
Sec-WebSocket-Version: 13

1. Origin 客户端页面的源，对象是原生支持跨源的。没有特殊的 header 或其他限制。旧的服务器无法处理WebSocket，因此不存在兼容性问题。它允许服务器决定是否使用 WebSocket 与该网站通信。
2. Connection: Upgrade 表示客户端想要更改协议。
3. Upgrade: websocket 请求的协议是 “websocket”。
4. Sec-WebSocket-Key 浏览器随机生成的安全密钥。
5. Sec-WebSocket-Version WebSocket 协议版本，当前为 13。

如果服务器同意切换为 WebSocket 协议，服务器应该返回响应码 101

1. 101 Switching Protocols
2. Upgrade: websocket
3. Connection: Upgrade
4. Sec-WebSocket-Accept: hsBlbuDTkk24srzEOTBUlZAlC2g=