vue如何使用socket与服务端进行通信

1、定义socket

var ws = new WebSocket('wss://地址');

2、进行连接，同时每5秒钟发送心跳一次

ws.onopen = () => {
  console.log('@open');
  // params为与服务端定义好的参数
  ws.send(JSON.stringify(params));
  this.sendTimmer = setInterval(function () {
    ws.send('Hi Server!');
  }, 5000);
};

3、获取服务端发送来的信息，进行处理

ws.onmessage = (event) => {
  console.log('@message:', event);
  try {
      const data = JSON.parse(event.data);
      if (data.end) {
        //约定的单条消息传递结束
      } else {
          // 进行数据处理
      }
  } catch (err) {
      // 数据错误处理
      ws.close();
      console.error(err);
  }
  if (event.data == '[DONE]') {
      // 消息传递结束
      this.sendTimmer && clearInterval(this.sendTimmer);
      ws.close();
  }
};

4、关闭socket

ws.onclose = (event) => {
  console.log('@close:', event);
  this.sendTimmer && clearInterval(this.sendTimmer);
  ws.close();
};

5、判断socket发送错误

ws.onerror = (event) => {
  console.error('error:', event);
  // 进行错误类型判断，展示不同信息
  ws.close();
};