websocket vue

// WebSocket 和 Vue.js 示例代码

// 1. 首先在你的 Vue 组件中引入 WebSocket

<template>
  <div>
    <h1>WebSocket 示例</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      socket: null,
      message: ''
    };
  },
  created() {
    // 2. 在组件创建时初始化 WebSocket 连接
    this.initWebSocket();
  },
  beforeDestroy() {
    // 3. 在组件销毁前关闭 WebSocket 连接
    this.socket.close();
  },
  methods: {
    initWebSocket() {
      // 4. 创建 WebSocket 实例并连接到服务器
      this.socket = new WebSocket('ws://example.com/socket');

      // 5. 监听 WebSocket 的打开事件
      this.socket.onopen = () => {
        console.log('WebSocket 连接已建立');
      };

      // 6. 监听 WebSocket 的消息事件
      this.socket.onmessage = (event) => {
        // 更新组件中的数据
        this.message = event.data;
      };

      // 7. 监听 WebSocket 的关闭事件
      this.socket.onclose = () => {
        console.log('WebSocket 连接已关闭');
      };

      // 8. 监听 WebSocket 的错误事件
      this.socket.onerror = (error) => {
        console.error('WebSocket 错误:', error);
      };
    }
  }
};
</script>

<style scoped>
/* 样式可以根据需要自定义 */
</style>

解释说明：

1. 模板部分 (<template>)：

   • 包含一个简单的 HTML 结构，用于显示从 WebSocket 接收到的消息。

2. 脚本部分 (<script>)：

   • data()：定义了两个属性 socket 和 message，分别用于存储 WebSocket 实例和接收到的消息。
   • created()：在组件创建时调用 initWebSocket() 方法来初始化 WebSocket 连接。
   • beforeDestroy()：在组件销毁前关闭 WebSocket 连接，防止内存泄漏。
   • methods：
     • initWebSocket()：创建 WebSocket 实例并连接到指定的 WebSocket 服务器。
     • onopen：当 WebSocket 连接成功建立时触发。
     • onmessage：当接收到服务器发送的消息时触发，并更新组件中的 message 属性。
     • onclose：当 WebSocket 连接关闭时触发。
     • onerror：当发生错误时触发。

3. 样式部分 (<style scoped>)：

   • 可以根据需要自定义样式，这里没有具体样式内容。