websocket详解

1. websocket 是什么？

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

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

2. websocket 与 http 有什么区别？

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

3.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("关闭了");
}; 

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;
}

3.2 websocket 方法:

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

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

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

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

2.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)
    },
}