uniapp中websocket的全局封装，在两个页面使用

在 UniApp 中，WebSocket 的全局封装通常是为了简化跨页面的数据通信和实时事件处理。以下是一个简单的步骤说明如何进行全局封装：

1. **创建WebSocket实例**：
首先，在你的项目中创建一个单独的文件，比如 `utils/socket.js`，用于存放 WebSocket 的配置和连接管理。

import { createSocket } from '@vant/websocket';

const socket = createSocket({
  url: 'your_websocket_url', // 替换为实际的WebSocket地址
  protocols: ['your_protocol'], // 如果有特定协议
});

export default socket;

2. **封装发送和接收数据方法**：
在 `socket.js` 文件中，你可以封装一些通用的方法，如发送消息、接收消息等。

// 发送数据
function sendMessage(data) {
  return new Promise((resolve, reject) => {
    socket.send(data);
    resolve();
  });
}

// 接收数据并处理
function listenMessage(callback) {
  socket.onmessage = (event) => {
    const message = event.data; // 这里假设接收到的是纯文本
    callback(message);
  };
}

3. **在页面中使用**：
在需要使用 WebSocket 的页面中引入这个封装好的 `socket` 对象，并调用相应的方法。

import socket from '@/utils/socket';

Page({
  onLoad() {
    // 初始化连接
    socket.connect();

    // 示例：发送数据到服务器
    sendMessage('Hello Server!').then(() => {
      console.log('Message sent');
    });

    // 添加消息监听
    listenMessage((message) => {
      console.log('Received message:', message);
    });
  },
  
  onUnload() {
    // 页面卸载时断开连接
    socket.disconnect();
  }
})