vue封装websocket

以下是在Vue中封装WebSocket的示例代码：

1. 创建一个websocket.js文件，封装WebSocket的连接和关闭方法：

let socket = null;

function initWebSocket(url) {
  // 创建一个WebSocket对象
  socket = new WebSocket(url);

  // 监听WebSocket连接打开事件
  socket.onopen = function () {
    console.log('WebSocket连接已打开！');
  };

  // 监听WebSocket接收到消息事件
  socket.onmessage = function (event) {
    console.log('WebSocket接收到消息：', event.data);
  };

  // 监听WebSocket连接关闭事件
  socket.onclose = function () {
    console.log('WebSocket连接已关闭！');
  };

  // 监听WebSocket连接发生错误事件
  socket.onerror = function () {
    console.log('WebSocket连接发生错误！');
  };
}

function closeWebSocket() {
  // 关闭WebSocket连接
  if (socket != null) {
    socket.close();
    socket = null;
  }
}

export { initWebSocket, closeWebSocket };

2. 在需要使用WebSocket的组件中引入websocket.js文件，并调用initWebSocket方法连接WebSocket：

import { initWebSocket, closeWebSocket } from '@/utils/websocket.js';

export default {
  data() {
    return {
      url: 'ws://localhost:8080/ws', // WebSocket连接地址
    };
  },
  mounted() {
    // 连接WebSocket
    initWebSocket(this.url);
  },
  beforeDestroy() {
    // 关闭WebSocket连接
    closeWebSocket();
  },
};

以上代码演示了如何在Vue中封装WebSocket，并在组件中调用WebSocket连接和关闭方法。