uniapp中使用WebSocket

在 uni-app 中，uni.connectSocket 方法用于建立 WebSocket 连接，但它并不提供 onOpen、onMessage、onClose 和 onError 这样的方法作为回调函数。相反，你应该使用 uni.onSocketOpen、uni.onSocketMessage、uni.onSocketClose 和 uni.onSocketError 这些全局事件来监听 WebSocket 的不同事件。

javascript 复制代码

<template>  
  <view>  
    <button @click="connectWebSocket">连接WebSocket</button>  
    <button @click="sendWebSocketMessage">发送消息</button>  
    <button @click="closeWebSocket">关闭WebSocket</button>  
  </view>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      socket: null, // WebSocket实例  
      isConnected: false, // WebSocket连接状态  
    };  
  },  
  methods: {  
    // 连接WebSocket服务器  
    connectWebSocket() {  
      if (!this.isConnected) {  
        this.socket = uni.connectSocket({  
          url: 'ws://your-websocket-server-url' // 替换为你的WebSocket服务器URL  
        });  
  
        uni.onSocketOpen(res => {  
          console.log('WebSocket连接已打开！');  
          this.isConnected = true;  
        });  
  
        uni.onSocketMessage(res => {  
          console.log('收到WebSocket服务器消息：', res.data);  
        });  
  
        uni.onSocketClose(res => {  
          console.log('WebSocket连接已关闭！');  
          this.isConnected = false;  
        });  
  
        uni.onSocketError(err => {  
          console.error('WebSocket连接打开失败，请检查：', err);  
        });  
      }  
    },  
  
    // 发送WebSocket消息  
    sendWebSocketMessage() {  
      if (this.socket && this.isConnected) {  
        uni.sendSocketMessage({  
          data: '这是一条测试消息' // 发送的消息内容  
        });  
      } else {  
        console.error('WebSocket未连接或未打开，请先连接WebSocket！');  
      }  
    },  
  
    // 关闭WebSocket连接  
    closeWebSocket() {  
      if (this.socket) {  
        uni.closeSocket();  
        this.socket = null;  
        this.isConnected = false;  
      }  
    }  
  },  
  beforeDestroy() {  
    // 在组件销毁前，确保关闭 WebSocket 连接  
    this.closeWebSocket();  
  }  
};  
</script>

我使用了 uni.onSocketOpen、uni.onSocketMessage、uni.onSocketClose 和 uni.onSocketError 来监听 WebSocket 的事件。同时，在 sendWebSocketMessage 方法中，我添加了对 socket 实例和连接状态的检查，以确保在发送消息之前连接是打开的。最后，在 beforeDestroy 生命周期钩子中，我调用了 closeWebSocket 方法来确保在组件销毁时关闭 WebSocket 连接。