vue使用websocket

// Vue 使用 WebSocket 示例代码

// main.js 或者在组件中引入
import Vue from 'vue';
import App from './App.vue';

Vue.config.productionTip = false;

// 创建 WebSocket 实例
let socket;
if (typeof WebSocket !== 'undefined') {
  socket = new WebSocket('ws://your-websocket-server-url');

  // 连接成功时触发
  socket.onopen = () => {
    console.log('WebSocket连接已建立');
  };

  // 接收到消息时触发
  socket.onmessage = (event) => {
    console.log('收到消息:', event.data);
    // 可以在这里更新 Vuex 状态或者直接操作组件数据
  };

  // 连接关闭时触发
  socket.onclose = () => {
    console.log('WebSocket连接已关闭');
  };

  // 发生错误时触发
  socket.onerror = (error) => {
    console.error('WebSocket发生错误:', error);
  };
}

new Vue({
  render: h => h(App),
  data() {
    return {
      socket,
    };
  },
  methods: {
    sendMessage(message) {
      if (this.socket && this.socket.readyState === WebSocket.OPEN) {
        this.socket.send(message);
        console.log('消息已发送:', message);
      } else {
        console.error('WebSocket连接未建立或已关闭');
      }
    },
  },
}).$mount('#app');

// 在组件中使用
<template>
  <div>
    <button @click="sendMessage('Hello, WebSocket!')">发送消息</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage(message) {
      this.$root.sendMessage(message);
    },
  },
};
</script>

解释说明：

1. 创建 WebSocket 实例：在 main.js 或者组件中创建 WebSocket 实例，并连接到指定的 WebSocket 服务器。
2. 事件处理：为 WebSocket 实例添加事件监听器，处理连接成功、接收消息、连接关闭和错误等事件。
3. 发送消息：定义 sendMessage 方法，在 WebSocket 连接正常的情况下发送消息。
4. 在组件中使用：通过按钮点击事件调用 sendMessage 方法，发送消息到 WebSocket 服务器。

如果你希望更灵活地管理 WebSocket 连接，可以考虑将 WebSocket 实现封装成一个插件或者 Vuex 模块。