vue 使用websocket

// main.js

import Vue from 'vue';
import App from './App.vue';

// 引入 WebSocket 插件
import VueSocketIO from 'vue-socket.io';

// 创建 WebSocket 实例，连接到指定的服务器地址
export const SocketInstance = new VueSocketIO({
  debug: true,
  connection: 'http://localhost:3000', // 替换为你的 WebSocket 服务器地址
  vuex: {
    store,
    actionPrefix: 'SOCKET_',
    mutationPrefix: 'SOCKET_'
  }
});

// 将 WebSocket 插件挂载到 Vue 实例上
Vue.use(VueSocketIO, SocketInstance);

new Vue({
  render: h => h(App),
}).$mount('#app');

// 在组件中使用 WebSocket
// ExampleComponent.vue

<template>
  <div>
    <button @click="sendMessage">发送消息</button>
    <p>收到的消息: {{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  methods: {
    sendMessage() {
      this.$socket.emit('message', { content: 'Hello WebSocket!' });
    }
  },
  created() {
    // 监听来自服务器的消息
    this.$options.sockets.onmessage = (data) => {
      this.message = data;
    };
  }
};
</script>

解释说明：

1. 引入 WebSocket 插件：我们使用 vue-socket.io 插件来集成 WebSocket 功能。这个插件可以帮助我们在 Vue 应用中轻松地与 WebSocket 服务器进行通信。

2. 创建 WebSocket 实例：通过 VueSocketIO 创建一个 WebSocket 实例，并连接到指定的 WebSocket 服务器地址（例如 http://localhost:3000）。你可以根据实际情况替换为你自己的服务器地址。

3. 挂载 WebSocket 插件：将创建好的 WebSocket 实例挂载到 Vue 实例上，这样可以在整个应用中使用 WebSocket 功能。

4. 在组件中使用 WebSocket：

   • sendMessage 方法用于向服务器发送消息。
   • created 钩子函数中监听来自服务器的消息，并将其显示在页面上。

通过这种方式，你可以在 Vue 应用中方便地使用 WebSocket 进行实时通信。