在 UniApp 中对接 WebSocket 实现即时通讯,步骤如下:
1. 安装 WebSocket 客户端(可选)
UniApp 内置了 uni.connectSocket
和 uni.onSocketMessage
等 API,可以直接使用 WebSocket。不过,如果需要一些扩展功能,也可以使用第三方 WebSocket 客户端库,比如 socket.io
。
2. 配置 WebSocket 连接
// 在页面的 onLoad 或者其他生命周期函数中
onLoad() {// 创建 WebSocket 连接this.socketTask = uni.connectSocket({url: 'ws://your.websocket.server.url', // 替换成你的 WebSocket 服务器地址success: (res) => {console.log('WebSocket 连接成功:', res);},fail: (err) => {console.error('WebSocket 连接失败:', err);}});// 监听 WebSocket 连接打开事件uni.onSocketOpen((res) => {console.log('WebSocket 已连接', res);});// 监听 WebSocket 消息事件uni.onSocketMessage((res) => {console.log('收到消息:', res.data);// 处理收到的消息this.handleIncomingMessage(res.data);});// 监听 WebSocket 错误事件uni.onSocketError((err) => {console.error('WebSocket 错误:', err);});// 监听 WebSocket 关闭事件uni.onSocketClose(() => {console.log('WebSocket 连接关闭');});
},// 发送消息到 WebSocket
sendMessage(msg) {if (this.socketTask) {this.socketTask.send({data: JSON.stringify({ message: msg }), // 发送的消息success: () => {console.log('消息发送成功');},fail: (err) => {console.error('消息发送失败', err);}});}
},// 处理接收到的消息
handleIncomingMessage(data) {// 处理接收到的消息// 例如解析 JSON 数据,并展示到页面let parsedData = JSON.parse(data);console.log(parsedData);
}
3. 关闭 WebSocket 连接
// 在页面卸载时关闭 WebSocket 连接
onUnload() {if (this.socketTask) {this.socketTask.close({success: () => {console.log('WebSocket 连接关闭');},fail: (err) => {console.error('WebSocket 关闭失败', err);}});}
}
4. 处理 WebSocket 消息
WebSocket 的消息通常是通过 uni.onSocketMessage
获取的,可以根据消息内容进行处理,例如显示在聊天界面中。
5. 服务端 WebSocket 配置
确保后端服务正确配置了 WebSocket 服务器,下面是一个简单的 WebSocket 服务端示例,使用 Node.js 和 ws
库:
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });wss.on('connection', (ws) => {console.log('客户端已连接');// 监听客户端消息ws.on('message', (message) => {console.log('收到消息:', message);// 将消息广播给所有客户端wss.clients.forEach((client) => {if (client !== ws && client.readyState === WebSocket.OPEN) {client.send(message);}});});// 向客户端发送欢迎消息ws.send(JSON.stringify({ message: '欢迎连接到 WebSocket 服务器' }));
});
6. 发送不同类型的数据
WebSocket 可以发送文本数据或二进制数据,可以根据需要选择合适的数据格式,如 JSON、文本、图片等。发送的消息可以是字符串或二进制缓冲区。
通过以上步骤,你可以在 UniApp 中使用 WebSocket 实现即时通讯功能,前端和后端都需要根据需求进行配置。