脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue socket服务端通信

vue使用socket与服务端进行通信的代码详解

 更新时间：2023年09月24日 10:35:10   作者：谨言的鼠猫  
这篇文章主要给大家介绍了vue如何使用socket与服务端进行通信的相关资料,在Vue中我们可以将Websocket类封装成一个Vue插件,以便全局使用,需要的朋友可以参考下

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

到此这篇关于vue使用socket与服务端进行通信的代码详解的文章就介绍到这了,更多相关vue socket服务端通信内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论