vue 连接websocket

在Vue.js中整合WebSocket主要涉及以下几个步骤：

1. 创建WebSocket连接：

setupWebSocket() {
  this.websocket = new WebSocket('ws://your-server-url'); // 替换为实际的WebSocket服务器地址
},

2. 定义连接状态事件处理器：

onWebSocketOpen() {
  console.log("链接成功");
  // 在这里发送初始化消息
  const initMessage = { ... }; // 初始化消息的具体内容，如你在引用[1]中所示
  this.sendMessage(JSON.stringify(initMessage));
},

3. 发送消息：

sendMessage(message) {
  if (this.websocket && this.websocket.readyState === WebSocket.OPEN) {
    this.websocket.send(message);
  }
},

4. 监听其他事件（如接收消息和连接关闭）：

// 接收并处理接收到的消息
onWebSocketMessage(event) {
  console.log("接收到消息:", event.data);
},

// 关闭WebSocket连接
closeWebSocket() {
  if (this.websocket && this.websocket.readyState !== WebSocket.CLOSED) {
    this.websocket.close();
  }
},

5. 可选的附加功能，如心跳检测：

startHeartbeat() {
  setInterval(() => {
    if (this.websocket.readyState === WebSocket.OPEN) {
      this.websocket.send('ping'); // 发送心跳信息
    }
  }, 30 * 1000); // 每30秒发送一次
}

stopHeartbeat() {
  clearInterval(this.heartbeatInterval);
}

要使用这些功能，只需在Vue实例的生命周期钩子中调用`setupWebSocket()`方法，并根据需要调用其他处理函数。别忘了替换`ws://your-server-url`为实际的WebSocket服务器URL。