Vue中 使用 WebSocket

Vue中使用 WebSocket

飞熊 • 2023年4月28日上午10:15 • 前端开发 • 阅读 229

1. WebSocket 简介

前端和后端的交互模式最常见的就是：前端发数据请求，从后端拿到数据后展示到页面中。
如果前端不做操作，后端不能主动向前端推送数据，这也是http协议的缺陷。
一种新的通信协议应运而生 WebSocket，它最大的特点就是服务端可以主动向客户端推送消息，客户端也可以主动向服务端发送消息，实现了真正的平等。

WebSocket 其他特点：

建立在 TCP 协议之上，服务器端的实现比较容易；
与 HTTP 协议有着良好的兼容性；
默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。
数据格式比较轻量，性能开销小，通信高效；
可以发送文本，也可以发送二进制数据；
没有同源限制，客户端可以与任意服务器通信；
协议标识符是ws（如果加密，则为wss），服务器网址就是 URL；

2. Vue中使用 WebSocket

2.1 vue中使用 WebSocket 注意项

判断浏览器是否支持 WebSocket；

解决兼容性问题传送门：解决 WebSocket 兼容性
组件加载的时候连接websocket，在组件销毁的时候断开websocket；
后端接口需要引入 socket 模块，否则不能实现连接；

2.2 完整代码

<template>
  <div class="test">
  </div>
</template>

<script>
  export default {
    data() {
      return {
        websock: null,
      }
    },
    methods: {
      // 初始化weosocket
      initWebSocket(){ 
        if(typeof(WebSocket) === "undefined"){
          console.log("您的浏览器不支持WebSocket")
        }else{
          const wsurl = "ws://127.0.0.1:8080";
          // 实例化 WebSocket
          this.websock = new WebSocket(wsurl);
          // 监听 WebSocket 连接
          this.websock.onopen = this.websocketonopen;
          // 监听 WebSocket 错误信息
          this.websock.onerror = this.websocketonerror;
          // 监听 WebSocket 消息
          this.websock.onmessage = this.websocketonmessage;
        
          this.websock.onclose = this.websocketclose;
        }
      },
      // 连接建立之后执行send方法发送数据
      websocketonopen(){
        console.log("socket连接成功")
        let actions = {"test":"12345"};
        this.websocketsend(JSON.stringify(actions));
      },
      // 连接建立失败重连
      websocketonerror(){
        console.log("连接错误");
        this.initWebSocket();
      },
      // 数据接收
      websocketonmessage(e){
        const resdata = JSON.parse(e.data);
        console.log(resdata);
      },
      // 数据发送
      websocketsend(Data){
        this.websock.send(Data);
      },
      // 关闭
      websocketclose(e){
        console.log('WebSocket 断开连接',e);
      },
    },    
    beforeMount() {
      this.initWebSocket();
    },
    destroyed() {
      //离开路由之后断开 websocket 连接
      this.websock.close(); 
    },
  }
</script>