uniapp WebSocket

### 如何在 UniApp 中实现 WebSocket 实时通信 #### 创建 WebSocket 配置服务端 为了使客户端能够通过 WebSocket 进行实时通信，首先需要设置好支持 WebSocket 的服务器。对于 Spring Boot 应用程序而言，可以创建 `WebSocketConfig` 类并让其继承自 `WebSocketConfigurer` 接口，在其中定义必要的配置逻辑[^1]。 ```java @Configuration @EnableWebSocket public class WebSocketConfig implements WebSocketConfigurer { @Override public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) { // 注册处理程序以及路径映射 registry.addHandler(new MyWebSocketHandler(), "/ws").setAllowedOrigins("*"); } } ``` 此部分代码负责注册 WebSocket 处理器及其对应的 URL 路径 `/ws`，允许来自任何源的请求访问该接口。 #### 客户端初始化与连接建立 接着转向前端开发工作——即如何利用 UniApp 来完成对上述 WebSocket 服务端的支持。当涉及到具体页面或组件内部操作时，则可通过调用 `uni.connectSocket()` 函数发起 Web Socket 请求[^2]： ```javascript export default { data() { return {}; }, onLoad() { const wsUrl = "wss://your-websocket-server.com"; // 替换成实际的服务地址 uni.connectSocket({ url: wsUrl, success(res) { console.log("WebSocket连接成功", res); }, fail(err) { console.error("WebSocket连接失败", err); } }); // 监听消息接收事件 uni.onSocketMessage(function (res) { console.log('收到服务器内容：' + res.data); }); // 监听关闭事件 uni.onSocketClose(() => { console.log('WebSocket 已关闭'); }); } }; ``` 这段 JavaScript 代码展示了怎样在一个 Vue 组件内加载期间启动到指定 WebSocket 地址的链接过程；同时监听可能的消息接收及断开情况以便及时响应。 #### 自动重连机制设计 考虑到网络波动可能导致意外中断的情况发生，因此有必要加入自动重新尝试连接的功能以提高系统的健壮性和用户体验度。下面给出了一种简单的做法示例[^3]: ```javascript class WsClient { constructor(url, intervalTime) { this.url = url; this.intervalTime = intervalTime || 5000; // 默认间隔时间为5秒 this.socketTask = null; setTimeout(() => { this.initWebsocket(); }, this.intervalTime); } initWebsocket() { let that = this; this.socketTask = uni.connectSocket({ url: this.url, complete: function () { if (!that.isConnected()) { setTimeout(() => { that.initWebsocket(); // 尝试再次连接 }, that.intervalTime); } } }); this.socketTask.onOpen((res) => { console.log("WebSocket 开启成功！"); }); this.socketTask.onError((err) => { console.error("WebSocket 错误信息：" + JSON.stringify(err)); }); this.socketTask.onMessage(({data}) => { console.log(`收到服务器数据 ${data}`); }); this.socketTask.onClose(() => { console.warn("WebSocket 关闭了"); }); } isConnected() { return this.socketTask && this.socketTask.readyState === 1; } } // 使用方式如下所示： new WsClient("wss://example.com/socket", 3000); ``` 这里定义了一个名为 `WsClient` 的类用来封装整个 WebSocket 生命周期管理流程，并实现了基本的心跳检测和异常恢复策略。