websocket在vue中封装并使用

新建封装函数

// websocket.js
export default function (Vue, url) {
  // 在Vue原型上添加$websocket属性
  Vue.prototype.$websocket = {
    socket: null,
    init: function () {
      this.socket = new WebSocket(url);
      this.socket.onopen = this.onOpen;
      this.socket.onmessage = this.onMessage;
      this.socket.onerror = this.onError;
      this.socket.onclose = this.onClose;
    },
    onOpen: function (event) {
      console.log("WebSocket connected:", event);
    },
    onMessage: function (message) {
      console.log("WebSocket message received:", message.data);
      // 可以在这里广播消息到Vue组件
      // Vue.eventBus.$emit('websocket-message', message.data);
    },
    onError: function (error) {
      console.error("WebSocket error:", error);
    },
    onClose: function (event) {
      console.log("WebSocket disconnected:", event);
    },
    send: function (data) {
      if (this.socket.readyState === WebSocket.OPEN) {
        this.socket.send(data);
      } else {
        console.error("WebSocket is not connected.");
      }
    }
  };
 
  Vue.prototype.$websocket.init();
}

注册插件

// main.js
import Vue from 'vue';
import App from './App.vue';
import websocketPlugin from './websocket';
 
Vue.use(websocketPlugin, 'wss://your-websocket-url');
 
new Vue({
  render: h => h(App),
}).$mount('#app');

组件内使用

// 在Vue组件中
export default {
  mounted() {
    // 监听WebSocket消息
    this.$websocket.socket.onmessage = (message) => {
      console.log(message.data);
    };
  },
  methods: {
    sendMessage() {
      this.$websocket.send('Hello, WebSocket!');
    }
  }
}