Vue.js WebSocket 整合指南：实时通信的完美解决方案_vue+websocket js

介绍

WebSocket是一种在Web应用程序中实现双向通信的通信协议，它允许客户端和服务器之间建立持久的、低延迟的连接，以实现实时数据传输。相比传统的HTTP请求，WebSocket更适合需要实时性和交互性的应用程序。

为什么需要WebSocket？

WebSocket解决了传统HTTP请求的一些限制，例如：

• 实时性: 传统HTTP请求需要客户端定期轮询服务器以获取新数据，而WebSocket允许服务器主动推送数据给客户端，实现实时更新。
• 双向通信: WebSocket支持双向通信，客户端和服务器都可以发送消息，而不是仅限于客户端向服务器发送请求。
• 低延迟: WebSocket连接保持开放，减少了连接和断开的开销，从而实现更低的通信延迟。

Vue.js中的WebSocket连接

Vue.js是一种流行的JavaScript框架，它使得构建现代Web应用程序变得更加容易。在Vue.js中实现WebSocket连接可以轻松地将实时通信功能集成到应用程序中。

websocket常用事件

• setupWebSocket(): 用于创建WebSocket连接，配置WebSocket对象，并定义连接的事件处理函数。
• closeWebSocket(): 用于关闭WebSocket连接。
• onWebSocketOpen(): WebSocket连接成功时的事件处理函数。
• onWebSocketMessage(event): 处理接收到的WebSocket消息。
• onWebSocketClose(): 处理WebSocket连接关闭事件。
• sendMessage(message): 用于发送消息到WebSocket服务器。
• startHeartbeat(): 启动心跳检测。
• stopHeartbeat(): 停止心跳检测。

WebSocket连接配置

首先，我们需要创建一个Vue.js组件，负责WebSocket连接的创建和管理。在组件的data属性中，我们定义了WebSocket对象

<template>
  <div>
   
  </div>
</template>

<script>
export default {
  data() {
    return {
      websocket: null, // WebSocket对象
    };
  },
  created() {
    this.setupWebSocket(); // 创建WebSocket连接
  },
  beforeDestroy() {
    this.closeWebSocket(); // 在组件销毁前关闭WebSocket连接
  },
  methods: {
     setupWebSocket() {
      this.websocket = new WebSocket("ws链接"); // 创建WebSocket连接
      this.websocket.onopen = this.onWebSocketOpen; // WebSocket连接打开时的处理函数
      this.websocket.onmessage = this.onWebSocketMessage; // 收到WebSocket消息时的处理函数
      this.websocket.onclose = this.onWebSocketClose; // WebSocket连接关闭时的处理函数
    },
    onWebSocketOpen() {
      console.log("链接成功");
    },
    closeWebSocket() {
      if (this.websocket) {
        this.websocket.close(); // 关闭WebSocket连接
      }
    },
  },
};
</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

发送初始化消息

在WebSocket连接成功后，我们可以在onWebSocketOpen方法中发送初始化消息到服务器。初始化消息的内容和格式应根据服务器的要求进行定义。

methods: {
  onWebSocketOpen() {
   console.log("链接成功");
    	
    // 发送初始化消息 根据后端定义的来
    const initMessage = {
      type: 'sub',
      topic: '/aa/bb/cc/d',
      parameter: {},
      id: 'bb',
    };
    this.sendMessage(JSON.stringify(initMessage));
},
sendMessage(message) {
      if (this.websocket && this.websocket.readyState === WebSocket.OPEN) {
        this.websocket.send(message); // 发送消息到WebSocket服务器
      }
    },

  // 其他方法
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

这样，当WebSocket连接成功时，初始化消息将被自动发送到服务器，以便启动双向通信。

接收WebSocket消息

在onWebSocketMessage方法中，我们通过event.data获取从服务器接收到的消息，然后可以根据消息的内容执行相应的操作。

methods: {
  // ... 其他方法 ...

  onWebSocketMessage(event) {
    const message = event.data;
    // 处理从服务器接收的消息
    console.log('Received message:', message);

    // 在这里您可以根据消息的内容执行不同的操作，例如更新界面、触发事件等
  },

  // ... 其他方法 ...
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

设置重连间隔及心跳

export default {
  data() {
    return {
      websocket: null, // WebSocket对象
      reconnectInterval: 3000, // 重连间隔时间（毫秒）
    };
  },
  methods: {
     // ... 其他方法 ...
onWebSocketOpen() {
   console.log("链接成功");
    	this.startHeartbeat(); // 开启心跳
    // 发送初始化消息 根据后端定义的来
    const initMessage = {
      type: 'sub',
      topic: '/aa/bb/cc/d',
      parameter: {},
      id: 'bb',
    };
    this.sendMessage(JSON.stringify(initMessage));
},
  startHeartbeat() {
      this.heartbeatInterval = setInterval(() => {
        if (this.websocket && this.websocket.readyState === WebSocket.OPEN) {
          this.websocket.send("ping"); // 发送心跳消息
        }
      }, 10000); // 每10秒发送一次心跳
    },
    stopHeartbeat() {
      if (this.heartbeatInterval) {
        clearInterval(this.heartbeatInterval); // 停止心跳检测定时器
      }
    },
onWebSocketClose() {
      console.log("WebSocket connection is closed");
  this.stopHeartbeat(); // WebSocket连接关闭时，停止心跳检测
      setTimeout(this.setupWebSocket, this.reconnectInterval); // 在一定时间后重连WebSocket
     },
       // ... 其他方法 ...
  },
};
}
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

心跳检测定时器

export default {
  data() {
    return {
      websocket: null, // WebSocket对象
      reconnectInterval: 3000, // 重连间隔时间（毫秒）
      heartbeatInterval: null, // 心跳定时器
    };
  },
  methods: {
     // ... 其他方法 ...
    
onWebSocketClose() {
      console.log("WebSocket connection is closed");
      setTimeout(this.setupWebSocket, this.reconnectInterval); // 在一定时间后重连WebSocket
     },
       // ... 其他方法 ...
  },
};
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

完整代码

<template>
  <div></div>
</template>

<script>
export default {
  data() {
    return {
      websocket: null, // WebSocket对象
      reconnectInterval: 3000, // 重连间隔时间（毫秒）
      heartbeatInterval: null, // 心跳定时器
    };
  },
  created() {
    this.setupWebSocket(); // 创建WebSocket连接
  },
  methods: {
    setupWebSocket() {
      this.websocket = new WebSocket("ws链接地址"); // 创建WebSocket连接
      this.websocket.onopen = this.onWebSocketOpen; // WebSocket连接打开时的处理函数
      this.websocket.onmessage = this.onWebSocketMessage; // 收到WebSocket消息时的处理函数
      this.websocket.onclose = this.onWebSocketClose; // WebSocket连接关闭时的处理函数
    },
    closeWebSocket() {
      if (this.websocket) {
        this.websocket.close(); // 关闭WebSocket连接
      }
    },
    /**
     *  WebSocket连接打开后，启动心跳检测
     */
    onWebSocketOpen() {
      console.log("WebSocket connection is open");
      this.startHeartbeat();
      // 发送初始化消息
      const initMessage = {
        type: "sub",
        topic: "/aa/bb/cc/d",
        parameter: {},
        id: "bb",
      };
      this.sendMessage(JSON.stringify(initMessage));
    },
    // 处理从服务器接收的消息
    onWebSocketMessage(event) {
      if (event.data) {
        const message = JSON.parse(event.data);
        //    根据业务来处理数据
      }
    },
    onWebSocketClose() {
      console.log("WebSocket connection is closed");
      this.stopHeartbeat(); // WebSocket连接关闭时，停止心跳检测
      setTimeout(this.setupWebSocket, this.reconnectInterval); // 在一定时间后重连WebSocket
    },
    sendMessage(message) {
      if (this.websocket && this.websocket.readyState === WebSocket.OPEN) {
        this.websocket.send(message); // 发送消息到WebSocket服务器
      }
    },
    startHeartbeat() {
      this.heartbeatInterval = setInterval(() => {
        if (this.websocket && this.websocket.readyState === WebSocket.OPEN) {
          this.websocket.send("ping"); // 发送心跳消息
        }
      }, 10000); // 每10秒发送一次心跳
    },
    stopHeartbeat() {
      if (this.heartbeatInterval) {
        clearInterval(this.heartbeatInterval); // 停止心跳检测定时器
      }
    },
  },
  beforeDestroy() {
    this.closeWebSocket(); // 在组件销毁前关闭WebSocket连接
  },
};
</script>
<style lang="scss" scoped></style>
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

总结

在文章中，我们学习了如何在Vue.js应用中集成WebSocket以实现实时通信。它为你的应用带来了许多可能性。以下是一些关键要点：

1. 创建WebSocket连接：我们创建了一个Vue.js组件，用于管理WebSocket连接。该组件初始化WebSocket对象，并定义了连接的事件处理函数，以确保连接能够正常运行。
2. 消息处理：我们实现了处理WebSocket消息的函数。当服务器发送消息时，我们能够捕获这些消息并执行相应的逻辑。
3. 心跳检测：通过实现心跳检测，我们能够保持WebSocket连接的活跃性，防止连接断开。这是实时通信应用中的关键功能。
4. 断线重连：当连接意外关闭时，我们通过自动重连确保应用能够继续保持连接，提供无缝的用户体验。

最终，可以轻松集成WebSocket功能，使应用在实时通信方面表现出色。这个功能对于各种应用，包括聊天应用、协作工具和监控系统等，都具有广泛的应用。