Websocket的使用

WebSocket 协议本质上是一个基于 TCP 的协议。

理解：为了建立一个 WebSocket 连接，客户端浏览器首先要向服务器发起一个 HTTP 请求，这个请求和通常的 HTTP 请求不同，包含了一些附加头信息，其中附加头信息"Upgrade: WebSocket"表明这是一个申请协议升级的 HTTP 请求，服务器端解析这些附加的头信息然后产生应答信息返回给客户端，客户端和服务器端的 WebSocket 连接就建立起来了，双方就可以通过这个连接通道自由的传递信息，并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。

服务器（Node.js）：

var WebSocketServer = require('ws').Server;
var wss = new WebSocketServer({port: 8080});

wss.on("connection", function(socket) {
    socket.on("message", function(msg) {
        console.log(msg);
        socket.send("Nice to meet you!");
    });
});

客户端同样可以使用Node.js或者是浏览器实现，这里选用浏览器作为客户端

1.创建对象

websocket = new WebSocket('ws://localhost:9998')  //'ws://localhost:9998' 为 服务端的路径

2.监听事件

①连接成功事件

 websocket.onopen = function () {  
        console.log('websocket open');
        //发送要传输的数
        websocket.send(JSON.stringify(data));
}

②接收数据事件

 websocket.onmessage = function (e) {
      console.log(JSON.parse(e.data));
 }

③关闭连接事件

ws.onclose = () => {
        console.log('连接服务器失败')
}

Websocket事件

事件	事件处理程序	描述
open	websocket.onopen	连接建立时触发
message	websocket.onmessage	客户端接受服务器数据时触发
error	websocket.onerror	通信发送错误时触发
close	websocket.onclose	连接关闭时触发

Websocket方法

方法	描述
websocket.send()	使用连接时发数据
websocket.close()	关闭连接

完整代码：

    //webSocket通知
    initWebSocket(){ //初始化weosocket
      if ('WebSocket' in window) {              //  判断是否支持WebSocket
          // 建立连接
          this.websock = new WebSocket(`ws://172.16.253.245:8086/renren-fast/websocket/${this.user}`);
      }else {
          alert('当前浏览器 Not support websocket')
      }
      
      // 服务器连接成功
      this.websock.onopen = this.websocketonopen;
      // 解析信息
      this.websock.onmessage = this.websocketonmessage;
      // 服务器连接出错
      this.websock.onerror = this.websocketonerror;

      // 服务器连接关闭
      this.websock.onclose = this.websocketclose;
    },
    websocketonopen(){ 
      console.log('建立链接');
      //执行send方法发送数据
      let actions =JSON.stringify(this.noticeData);
      // console.log('actions',actions);
      this.websock.send(actions);

      //数据传给后端，清空数据，清空被勾选状态
      this.noticeData={};
      this.$refs.multipleTable.clearSelection();
    },
     websocketonmessage(e){ //数据接收
      const redata = JSON.parse(e.data);
      console.log('数据接收',redata);
    },
    websocketonerror(e){//连接建立失败重连
      // this.initWebSocket();
      console.log('错误信息',e);
    },
    websocketclose(e){  //关闭
      console.log('断开连接',e);
    },