文章目录前言建立连接监听服务器消息代码实现发送消息连接状态与断线重连核心代码完整聊天界面骨架常见误区小白必踩完整可运行示例WebSocket 聊天雏形完整示例写在最后前言HTTP 请求是一问一答你发一次服务器回一次然后连接就断了。但聊天、直播弹幕、实时行情这种场景需要服务器主动、持续地给你推消息。这就得用 WebSocket——一条长连接双方随时互发。这篇文章我带你用 HarmonyOS 的WebSocket模块搭一个聊天室雏形发消息、收消息、断线重连都讲到。建立连接import{webSocket}fromkit.NetworkKitletws:webSocket.WebSocketasyncfunctionconnect(){wswebSocket.createWebSocket()ws.connect(wss://echo.example.com/chat)// 你的 WebSocket 地址}createWebSocket()创建一个长连接对象。connect传入ws://或wss://加密开头的地址和 HTTP 不同。监听服务器消息长连接的价值就在收。给ws注册message事件回调代码实现ws.on(message,(err,value){if(err){console.error(收消息出错,err)return}// value 是服务器推过来的内容可能是 string 或 ArrayBufferconsttexttypeofvaluestring?value:this.messages.push({role:them,text:text})})要点on(message, ...)里的回调每次服务器推消息都会触发不用你轮询。回调第一参数是错误对象先判错再处理数据养成习惯。收到的value可能是字符串或二进制聊天场景基本是字符串。发送消息functionsend(text:string){ws.send(text,(err){if(!err){this.messages.push({role:me,text:text})// 本地也显示自己发的}})}send把字符串发给服务器回调里判错。注意发送成功不代表对方收到只是发出去了。要不要回显自己发的消息由你本地 push 决定。连接状态与断线重连真实网络会抖动连接可能断。监听open/close/error做好状态管理核心代码ws.on(open,(){this.connectedtrue})ws.on(close,(){this.connectedfalse// 3 秒后尝试重连setTimeout(()connect(),3000)})ws.on(error,(){/* 记录日志 */})open连上了可以发消息了。close断开这里做指数退避重连简单起见示例用固定 3 秒。重连时不要重复createWebSocket多次不释放断开后复用或先close再建。完整聊天界面骨架EntryComponentV2struct ChatRoom{Localmessages:{role:string,text:string}[][]Localinput:stringLocalconnected:booleanfalseaboutToAppear(){connect()}build(){Column(){Text(this.connected?已连接:连接中...).fontColor(this.connected?#00AA00:#999)List(){ForEach(this.messages,(m,i){ListItem(){Text(m.text).padding(8).backgroundColor(m.roleme?#DCF8C6:#FFFFFF)}},(m,i)i.toString())}.layoutWeight(1)Row(){TextInput({text:this.input}).onChange(vthis.inputv).layoutWeight(1)Button(发送).onClick((){send(this.input);this.input})}}.padding(12)}}这已经是一个能跑的聊天室雏形连上服务器、收发消息、本地显示气泡、断线重连。常见误区小白必踩误区说明收消息不先判错on(message)回调第一参是错误对象不判错直接处理数据出错时一脸懵。自己发的不回显发送成功后是否本地显示自己的消息由你push决定不回显就没反馈。断线不重连网络会抖监听close做重连否则连上了用一会儿就断了。销毁不close()页面退出要ws.close()否则连接泄漏。下面这段代码可以直接复制到 DevEco Studio 里运行。建议你边读边敲改一改文末「动手改一改」里的参数亲眼看看效果。完整可运行示例WebSocket 聊天雏形建立长连接发送和接收消息。完整示例// WebSocket 双向实时通信import{webSocket}fromkit.NetworkKitEntryComponentstruct Chat{Statelog:stringprivatews?:webSocket.WebSocketaboutToAppear(){this.wswebSocket.createWebSocket()this.ws.connect(wss://echo.websocket.events,(err){if(!err){this.log已连接\n}})this.ws.on(message,(data){this.log收到: data\n// 收到服务端回包})}aboutToDisappear(){this.ws?.close()// 离开页面务必关闭避免泄漏}build(){Column({space:12}){Button(发一条).onClick((){this.ws?.send(你好)// 发送})Text(this.log).fontSize(14)}.padding(20)}}你会看到什么点「发一条」连接建立后服务端把消息原样回传Log 区出现「收到: 你好」。动手改一改接一个真实 echo 服务体验实时回路。把收到的消息累加到一个State列表做成聊天记录流。在on(error)里加重连逻辑提升健壮性。写在最后WebSocket 的核心就三件事连上connect、收on message、发send再加一个断线重连保证稳定。聊天、推送、行情全都建立在它之上。提醒一句长连接记得在页面销毁时ws.close()释放不然会泄漏。想做真正的聊天室下一步就是把echo服务器换成你自己的后端。
