vue2封装的websocket（精简版）

在src目录下新建文件夹 在文件夹中新建websocket.js

// websocket.js
const WebSocketPlugin = {
  install(Vue, options) {
    const socket = new WebSocket(options.url);

    Vue.prototype.$socket = socket;

    socket.addEventListener('open', () => {
      console.log('WebSocket连接成功');
    });

    socket.addEventListener('message', (event) => {
      console.log('Received message:', event.data);
      Vue.prototype.$emit('websocket-message', event.data);
    });

    socket.addEventListener('close', (event) => {
      console.log('WebSocket连接关闭', event);
      Vue.prototype.$emit('websocket-close', event);
    });

    socket.addEventListener('error', (error) => {
      console.error('WebSocket连接错误', error);
      Vue.prototype.$emit('websocket-error', error);
    });
  },
};

export default WebSocketPlugin;

在main.js中配置

import Vue from "vue";
import App from "./App.vue";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import dataV from '@jiaminghi/data-view';
import router from "./router";
import store from "./store";
import api from "@/APi/index.js";
//配置websocket
import sockets from "@/APi/websocket.js";


Vue.prototype.$api = api;
//配置weibsocket
Vue.prototype.$sockets = sockets;
 

Vue.config.productionTip = false;
Vue.use(ElementUI);
Vue.use(dataV)
new Vue({
  router,
  store,
  render: (h) => h(App),
  components: { App },
}).$mount("#app");

在页面中的使用

// 建立 web socket 连接
       this.$sockets = new WebSocket('ws://127.0.0.1:6001/');
       this.$sockets.onopen = () => {
         console.log('WebSocket 连接已打开');
       };
       this.$sockets.onmessage = (event) => {
         console.log('收到消息：', event.data);
       };
       this.$sockets.onclose = () => {
         console.log('WebSocket 连接已关闭');
       };
       this.$sockets.onerror = (error) => {
         console.error('WebSocket 发生错误：', error);
       };
       setInterval(() => {
        //发送消息
       this.$sockets.send('123');
       //关闭连接
       this.$sockets.close();
        this.$sockets.onclose();