vue websocket

// Vue 组件中使用 WebSocket 的示例代码

<template>
  <div>
    <h1>WebSocket 示例</h1>
    <p>收到的消息: {{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      socket: null,
      message: ''
    };
  },
  created() {
    // 创建 WebSocket 连接
    this.socket = new WebSocket('ws://example.com/socket');

    // 监听连接打开事件
    this.socket.addEventListener('open', (event) => {
      console.log('WebSocket 连接已打开');
    });

    // 监听消息接收事件
    this.socket.addEventListener('message', (event) => {
      this.message = event.data;
      console.log('收到消息:', event.data);
    });

    // 监听连接关闭事件
    this.socket.addEventListener('close', (event) => {
      console.log('WebSocket 连接已关闭');
    });

    // 监听错误事件
    this.socket.addEventListener('error', (event) => {
      console.error('WebSocket 错误:', event);
    });
  },
  beforeDestroy() {
    // 组件销毁时关闭 WebSocket 连接
    if (this.socket) {
      this.socket.close();
    }
  }
};
</script>

解释说明：

1. 创建 WebSocket 连接：

   • 在 created 生命周期钩子中，我们创建了一个 WebSocket 实例，并传入了 WebSocket 服务器的 URL（例如：ws://example.com/socket）。

2. 监听事件：

   • open：当 WebSocket 连接成功打开时触发。
   • message：当从服务器接收到消息时触发，我们将消息存储在组件的 message 数据属性中，并在模板中显示。
   • close：当 WebSocket 连接关闭时触发。
   • error：当发生错误时触发。

3. 关闭 WebSocket 连接：

   • 在 beforeDestroy 生命周期钩子中，我们确保在组件销毁之前关闭 WebSocket 连接，以避免内存泄漏。

4. 模板部分：

   • 模板中展示了接收到的消息内容。