websocket 详解

1. websocket 是什么？

websocket 是一种网络通信协议，与 http 语义一样，但功能不一样

---

http 也是一种网络通信协议，为什么不用 http 而用 websocket ?

2. websocket 与 http 有什么区别？

websocket 通信可由服务器发起，也可以由客户端发起。可以实现客户端与服务端长连接

http 通信只能由客户端发起。

举个例子：

websocket 像是面试，你可以询问面试官问题，面试官也可以问你问题，属于双向平等对话。

http 更像是查询银行卡余额的操作，只会返回给你结果。

---

3. websocket 其他特点：

• 建立在 TCP 协议之上，在服务端上实现比较容易
• 跟 http 协议有着良好的兼容性，默认端口也是 80 和 443，并且 握手阶段采用 http 协议，因为握手时不容易屏蔽，能通过各种 http 代理服务器。
• 数据格式比较轻量，性能开销小，通信高效。
• 可以发送文本或二进制数据（blob 对象与 Arraybuffer 对象）
• 没有同源限制，客户端可以与任意服务器通信。
• 协议标识符为：ws ( ws-不加密，wss-加密 ) ，服务器网址：ws://example.com:80/some/path

---

4. websocket 用法：

// 1. 新建 WebSocket 实例, 客户端就会与服务器进行连接
// WebSocket() 会 return 一个 object.
const ws = new WebSocket("wss://echo.websocket.org")

// 2.开始连接，发送一些信息
ws.onopen = function(evt) { 
  console.log( "开始连接" );
  ws.send("客户端发送消息给服务器!");
};

// 3.连接成功，接收消息，准备断开连接
ws.onmessage = function(evt) {
  console.log("服务器返回数据给客户端");
  ws.close();
};

// 4.断开连接成功
ws.onclose = function(evt) {
  console.log("关闭了");
}; 

4.1 websocket  属性:

webSocket.onopen：用于指定连接成功后的回调函数。

webSocket.onmessage：用于从服务器接收到信息时的回调函数。

webSocket.onerror：用于指定连接失败后的回调函数。

webSocket.onclose：用于指定连接关闭后的回调函数。

webSocket.binaryType: 使用二进制的数据类型连接。

webSocket.url ：WebSocket 的绝对路径（只读）

webSocket.protocol：服务器选择的下属协议（只读）

webSocket.bufferedAmount: 未发送至服务器的字节数。（只读）

webSocket.readyState : 实例对象的当前状态, 共有 4 种（只读）

• CONNECTING：值为0，表示正在连接。
• OPEN：值为1，表示连接成功，可以通信了。
• CLOSING：值为2，表示连接正在关闭。
• CLOSED：值为3，表示连接已经关闭，或者打开连接失败。

switch (ws.readyState) {
  case WebSocket.CONNECTING:
    // 正在连接中···
    break;
  case WebSocket.OPEN:
    // 连接成功，可以通信啦！
    break;
  case WebSocket.CLOSING:
    // 断开连接中···
    break;
  case WebSocket.CLOSED:
    // 断开连接啦！
    break;
  default:
    
    break;
}

---

4.2 websocket  方法:

webSocket.close([code[, reason]]) ：关闭当前链接,

code: 可选,一个数字状态码，它解释了连接关闭的原因。如果没有传这个参数，默认使用 1005，抛出异常：INVALID_ACCESS_ERR，无效的 code.

 reason 可选,一个人类可读的字符串，它解释了连接关闭的原因。这个 UTF-8 编码的字符串不能超过 123 个字节,抛出异常：SYNTAX_ERR，超出 123个字节。

webSocket.send(data) ：发送数据到服务器。

---

4.3 websocket  事件:

open：连接成功时触发。 也可以通过 onopen 属性来设置。

message：收到数据时触发。 也可以通过 onmessage 属性来设置。

error：连接因错误而关闭时触发，例如无法发送数据时。 也可以通过 onerror 属性来设置。

close：连接被关闭时触发。 也可以通过 onclose 属性来设置。

---

示例：

created(){
    this.initWebSocket()
},
method:{

    //初始化websocket 
    initWebSocket() {
      this.websocket = new WebSocket("ws://localhost:12345"); //ws地址
      this.websocket.onopen = this.websocketonopen;
      this.websocket.onerror = this.websocketonerror;
      this.websocket.onmessage = this.websocketonmessage;
      this.websocket.onclose = this.websocketclose;
    },
    
    websocketonopen(){
        console.log('websocket打开')
        this.websocket.send('向服务端发送些数据',)
    },

    websocketonerror(e){
        console.log('websocket连接失败',e)
    },
    
    websocketonmessage(e){
        console.log('websocket连接成功，服务端返回些数据',e)
    },

    websocketclose(e){
        console.log('websocket断开连接',e)
    },
}

 参考连接：

WebSocket() - Web API 接口参考 | MDN

WebSocket 教程 - 阮一峰的网络日志