uniapp中使用WebSocket

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

<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 (!) {  
         = ({  
          url: 'ws://your-websocket-server-url' // 替换为你的WebSocket服务器URL  
        });  
  
        (res => {  
          ('WebSocket连接已打开！');  
           = true;  
        });  
  
        (res => {  
          ('收到WebSocket服务器消息：', );  
        });  
  
        (res => {  
          ('WebSocket连接已关闭！');  
           = false;  
        });  
  
        (err => {  
          ('WebSocket连接打开失败，请检查：', err);  
        });  
      }  
    },  
  
    // 发送WebSocket消息  
    sendWebSocketMessage() {  
      if ( && ) {  
        ({  
          data: '这是一条测试消息' // 发送的消息内容  
        });  
      } else {  
        ('WebSocket未连接或未打开，请先连接WebSocket！');  
      }  
    },  
  
    // 关闭WebSocket连接  
    closeWebSocket() {  
      if () {  
        ();  
         = null;  
         = false;  
      }  
    }  
  },  
  beforeDestroy() {  
    // 在组件销毁前，确保关闭 WebSocket 连接  
    ();  
  }  
};  
</script>

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