vue 实现 websocket 通信_vue websocket

作者：weixin_40725706 | 2024-07-29 11:44:52

踩

vue websocket

在vue中用websocket实现实时通信，通过设置心跳时间来监测连接是否存在，若心跳时间内并没接收到任何消息，将自动重连。

1. 什么是 WebSocket ?

Websocket是一个持久化的网络通信协议
WebSocket 是HTML5 新增的的特性，（WebSocket 协议的本质上是一个基于tcp的协议）
它实现了浏览器与服务器全双工通信，能更好的节省服务器资源和带宽并达到实时通讯的目的

2. WebSocket 的原理

websocket 约定了一个通信的规范，通过一个握手的机制，客户端和服务器之间能建立一个类似tcp的连接，从而方便它们之间的通信
在 websocket 出现之前，采用的是HTTP 协议，通过客户端（浏览器）轮询的方式，即客户端发送请求，服务端做出响应，为了获取最新的数据，需要不断的轮询发出HTTP请求，占用大量带宽
websocket是一种全新的协议，不属于http无状态协议，协议名为"ws"，URL 格式形如：ws://localhost:80/、wss://localhost:443/

3. websocket 的心跳机制和重连机制

心跳机制: 客户端每隔一段时间向服务端发送一个特有的心跳消息，每次服务端收到消息后只需将消息返回，此时，若二者还保持连接，则客户端就会收到消息，若没收到，则说明连接断开，此时，客户端就要主动重连，完成一个周期

断线重连: 若某时间段内客户端发送了消息，而服务端未返回，则认定为断线；这个时候会触发到websocket中的onclose事件，需要重新连接服务

4. 特点

建立在TCP协议只上，服务端比较容易实现
于HTTP协议有良好的兼容性，默认端口也是80和443，握手阶段使用HTTP协议，因此握手时不容易屏蔽，能通过各种HTTP代理服务器
数据格式轻量，通信高效且节省带宽
支持传输文本数据和二进制数据
没有同源限制，客户端可以与任意服务器通信
支持加密传输，WS+SSL，URL形如wss://

<script>
export default {
  data() {
    return {
      // websocket相关
      scoket: null, // websocket实例对象
      //心跳检测
      heartCheck: {
        vueThis: this, // vue实例
        timeout: 30000, // 超时时间（心跳时间），超过30s无消息推送，重新发送连接
        timeoutObj: null, // 计时器对象——向后端发送心跳检测
        serverTimeoutObj: null, // 计时器对象——等待后端心跳检测的回复
        // 心跳检测重置
        reset: function () {
          clearTimeout(this.timeoutObj);
          clearTimeout(this.serverTimeoutObj);
          return this;
        },
        // 心跳检测启动
        start: function () {
          this.timeoutObj && clearTimeout(this.timeoutObj);
          this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
          this.timeoutObj = setTimeout(() => {
            // 这里向后端发送一个心跳检测，后端收到后，会返回一个心跳回复
            this.vueThis.scoket.send("HeartBeat");
            console.log("发送心跳检测");
            this.serverTimeoutObj = setTimeout(() => {
              // 如果超过一定时间还没重置计时器，说明websocket与后端断开了
              console.log("未收到心跳检测回复");
              // 关闭WebSocket
              this.vueThis.scoket.close();
            }, this.timeout);
          }, this.timeout);
        },
      },
      socketReconnectTimer: null, // 计时器对象——重连
      socketReconnectLock: false, // WebSocket重连的锁
      socketLeaveFlag: false, // 离开标记（解决 退出登录再登录 时出现的 多次相同推送 问题，出现的本质是多次建立了WebSocket连接）
    }
  },
  mounted() {
    this.createWebSocket();
  },
  methods: {
    // websocket启动
    createWebSocket() {
      let webSocketLink = `ws://xxx`; // webSocket地址
      try {
        let { WebSocket, MozWebSocket } = window;
        if ("WebSocket" in window) { // 谷歌
          this.scoket = new WebSocket(webSocketLink);
        } else if ("MozWebSocket" in window) { // 火狐
          this.scoket = new MozWebSocket(webSocketLink);
        } else {
          alert("您的浏览器不支持 WebSocket!");
        }
        // websocket事件绑定
        this.socketEventBind();
      } catch (e) {

        // websocket重连
        this.socketReconnect();
      }
    },
    // websocket事件绑定
    socketEventBind() {
      // 连接成功建立的回调
      this.scoket.onopen = this.onopenCallback;
      // 连接发生错误的回调
      this.scoket.onerror = this.onerrorCallback;
      // 连接关闭的回调
      this.scoket.onclose = this.oncloseCallback;
      // 向后端发送数据的回调
      this.scoket.onsend = this.onsendCallback;
      // 接收到消息的回调
      this.scoket.onmessage = this.getMessageCallback;

      //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
      window.onbeforeunload = () => {
        this.scoket.close();
      };
    },
    // websocket重连
    socketReconnect() {
      if (this.socketReconnectLock) {
        return;
      }
      this.socketReconnectLock = true;
      this.socketReconnectTimer && clearTimeout(this.socketReconnectTimer);
      this.socketReconnectTimer = setTimeout(() => {
        console.log("WebSocket:重连中...");
        this.socketReconnectLock = false;
        // websocket启动
        this.createWebSocket();
      }, 4000);
    },
    // 连接成功建立的回调
    onopenCallback() {
      console.log("WebSocket:已连接");
      // 心跳检测重置
      this.heartCheck.reset().start();
    },
    // 连接发生错误的回调
    onerrorCallback() {
      console.log("WebSocket:发生错误");
      // websocket重连
      this.socketReconnect();
    },
    // 连接关闭的回调
    oncloseCallback() {
      console.log("WebSocket:已关闭");
      // 心跳检测重置
      this.heartCheck.reset();
      if (!this.socketLeaveFlag) {
        // 没有离开——重连
        // websocket重连
        this.socketReconnect();
      }
    },
    // 向后端发送数据的回调
    onsendCallback() {
      console.log("WebSocket:发送信息给后端");
    },
    // 接收到消息的回调
    getMessageCallback(rowInfo) {
      // 心跳回复——心跳检测重置
      if (rowInfo.data.indexOf("HeartBeat") > -1) {
        // 收到心跳检测回复就说明连接正常
        this.heartCheck.reset().start(); // 心跳检测重置
      } else { // 普通推送——正常处理
      		console.log(rowInfo);
			// =======  在此进行逻辑处理 =========
      }
    }
  },
  destroyed() {
    // 离开标记
    this.socketLeaveFlag = true;
    // 关闭WebSocket
    this.scoket.close();
  },
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143

兼容谷歌与火狐
服务连接
服务端推送的消息

在这里插入图片描述

心跳监测，无通信则断开重连

参考资料

【1】廖雪峰：WebSocket
【2】阮一峰：WebSocket教程