个人技术博客—— uniapp中 WebSocket 的使用

222100333游宗建 2024-06-03 00:16:10

这个作业属于哪个课程	软件工程实践-2023学年-W班
这个作业要求在哪里	软件工程实践总结&个人技术博客
这个作业的目标	分享技术
其他参考文献	无

一、技术概述
二、技术详述
2.1 创建WebSocket连接
2.2 连接成功/失败
2.3 监听服务器发来的数据
2.4 发送消息给服务器
2.5 断开连接
三、遇到的问题与解决
3.1 uni.sendSocketMessage({})中的data格式
3.2 实时交互中WebSocket连接的时机
四、总结
五、参考文档

一、技术概述

WebSocket是Vue组件提供的原生API，同时uniapp也集成了该API。其是一种网络通信协议，允许服务器主动向客户端推送消息，实现双向通信。在实时应用（如聊天、在线游戏）中常用。学习 WebSocket 可提升实时交互能力。难点在于处理连接状态、重连逻辑及跨域问题。

二、技术详述

2.1 创建WebSocket连接

用户进入聊天页面后，通过uni.connectSocket（）创建一个WebSocket连接，其中，url为所要连接的地址，并且在后面附上用户个人的id；header为交互数据的类型；请求发送成功则回调success：(function(res) {})，否则回调fail：(function(res) {})。

2.2 连接成功/失败

WebSocket连接成果则回调uni.onSocketOpen(function(res) {})，并将socketOpen置为true，用来标志是否成功连接到WebSocket，否则回调uni.onSocketError(function(res) {})。

2.3 监听服务器发来的数据

通过uni.onSocketMessage(function(res) {})获取服务器发来的数据。res为响应体，res.data为响应的真实数据，通过JSON.parse()解析数据并作相应处理。

2.4 发送消息给服务器

通过uni.sendSocketMessage({})给服务器发送消息。data为所要发送数据，其值为JSON格式，消息发送成功则回调success: (res) => {}，同时进行前端的渲染，否则回调fail: (err) => {}。

2.5 断开连接

用户退出聊天页面后，通过uni.closeSocket()断开连接，uni.onSocketClose(function(res) {})判断是否成功断开连接。

三、遇到的问题与解决

3.1 uni.sendSocketMessage({})中的data格式

发送消息中data的格式可以是字符串、ArrayBuffer对象、或是JSON对象。这得先跟后端说好，以免出现格式不对的问题。

3.2 实时交互中WebSocket连接的时机

对于我所做的项目，需要实现实时聊天的功能，因此，WebSocket连接的时机成了一个主要的问题。一开始的思路是，在App.vue中，即整个软件的生命周期进行监听，但发现，WebSocket连接需要用户id，如果用户第一次使用还没有登录，那么他就没有id，就无法成功连接。后来退而求其次，考虑放在登录后的首页建立WebSocket连接，但是uni.onSocketMessage(function(res) {})该api的生命周期只有在当前所出的页面，因此，如果想要实现未读消息的获取与处理，就得在每个页面都写上该api进行监听，这显然是不太合理的。最后的解决方案是，仅在用户进入聊天页面时才用WebSocket实现实时交互，新增一个接口专门用于获取并处理用户离线时的未读消息（我们定义的离线是用户不在聊天页面即离线），通过在App.vue中轮循调用该接口，实现实时处理未读消息并渲染的功能。