vue2封装webSocket的实现(开箱即用)

npm install vue-native-websocket --save

import websocket from 'vue-native-websocket';
Vue.use(websocket, '', {
    connectManually: true, // 手动连接
    format: 'json', // json格式
    reconnection: true, // 是否自动重连
    reconnectionAttempts: 5, // 自动重连次数
    reconnectionDelay: 2000, // 重连间隔时间
});

const socketService = {
    socket: null,
    init(username) {
        if (typeof WebSocket === "undefined") {
            alert("您的浏览器不支持socket");
        } else {
// ws://10.244.11.117:8089/dashboard/websocket/
            let path = "你的ws WebSocket 地址" + username; // 请求路径
            this.socket = new WebSocket(path);
            this.socket.onopen = this.open.bind(this);
            this.socket.onerror = this.error.bind(this);
            this.socket.onmessage = this.getMessage.bind(this);
        }
    },
    open() {
        console.log("socket连接成功");
    },
    error() {
        console.log("连接错误");
    },
    getMessage(msg) {
        return new Promise((resolve, reject) => {
            this.socket.onmessage = (msg) => {
                console.log(msg.data);
                // 利用promise 返回出去结果
                if (msg.data != '连接成功' && JSON.parse(msg.data)) {
                    const data = JSON.parse(msg.data);
                    resolve(data); // 将数据传递给调用者
                }
                // this.scrollInstance.refresh(); // 手动刷新滚动效果
            };
        });
        // this.scrollInstance.refresh(); // 手动刷新滚动效果
    },
    send(params) {
        if (this.socket) {
            this.socket.send(params);
        }
    },
    close() {
        console.log("socket已经关闭");
    }
};
//最后导出
export default socketService;

//路径是自己的啊
import socketService from "../sokect/index";

 mounted() {
      // 调用
     this.startSocket();
  },
 methods: {
    async startSocket() {
      // 这里是 username  
      socketService.init("warning-all");
      try {
        const msg = await socketService.getMessage();
          //打印出来 服务器给我的信息
         console.error(JSON.parse(msg.data) );
      } catch (error) {
        console.error("Error receiving message:", error);
      }
    },
  }