【FFH】实时聊天室之WebSocket实战

如果要实现像微信聊天一样的功能&＃xff0c;在组网内进行通信显然是不够的&＃xff0c;所以软总线并不作用与这种远距离传输。如果我们要完成微信的聊天功能&＃xff0c;传统的方法就是利用webSocket借助服务器进行全双工通信。

WebSocket是什么&＃xff1f;

WebSocket 是 一种在单个 TCP 连接上进行全双工通讯的网络通信协议。

在以前没有webSocket的时候&＃xff0c;大家都用HTTP协议进行网络通信&＃xff0c;但是HTTP协议是一个无状态&＃xff0c;无连接&＃xff0c;单向的应用层协议&＃xff0c;因此只能让客户端对服务端进行单向请求&＃xff0c;服务端无法主动向客户端发送消息&＃xff0c;导致了像实时聊天这种业务开展起来比较困难。

有开发者就使用HTTP进行长轮询的方案&＃xff0c;也就是说需要HTTP在一段时间内必须一直保持连接请求&＃xff0c;以获取最新的服务器的消息。这样显然效率低下&＃xff0c;而且非常浪费资源。

因此就诞生了WebSocket&＃xff0c;只需要进行一次连接&＃xff0c;就可以一直保持全双工的通信状态。

Demo展示

下面我们就来用官方提供的WebSocket接口实现一个简易实时聊天室的Demo。效果如下&＃xff1a;

可以看到官方文档的接口说明&＃xff0c;我们只需要简单用到几个接口就可以实现我们的业务需求了。

https://developer.harmonyos.com/cn/docs/documentation/doc-guides/websocket-connection-0000001333321005

① 申请网络权限

在config.json文件里面注册网络权限&＃xff0c;该权限允许程序打开网络套接字&＃xff0c;进行网络连接。

"reqPermissions": [{"name": "ohos.permission.INTERNET"}
]


② 导入webSocket模块

import webSocket from &＃39;&＃64;ohos.net.webSocket&＃39;;


③ 创建webSocket对象

接着我们调用createWebSocket()接口生成一个webSocket对象&＃xff0c;并且保存起来。

let ws &＃61; webSocket.createWebSocket();


④ 连接webSocket通道

调用connect()接口进行连接。这里需要一个URL作为参数传入&＃xff0c;在这个demo中&＃xff0c;直接用了一个以前开发好的服务器接口进行调用&＃xff0c;但是不对外开放&＃xff0c;因此大家只需要将自己开发好的接口地址放到”wsURL“内即可。

onInit() {let that &＃61; this;ws.connect("wsURL", (err, value) &＃61;> {if (!err) {console.log("xxx---connect success");} else {console.log("xxx---connect fail, err:" &＃43; JSON.stringify(err));}});},


⑤ 订阅通道内消息更新

这里我们调用on( type:‘message’ )接口进行消息监听&＃xff0c;这里要注意的是服务端传递过来的是字符串类型&＃xff0c;所以如果消息是JSON对象&＃xff0c;则需要用JSON.parse()进行解析&＃xff0c;还原成JSON对象。

onInit() {let that &＃61; this;ws.on(&＃39;message&＃39;, (err, value) &＃61;> {console.log("xxx---on message, message:" &＃43; value);//传递的是序列化后的字符串&＃xff0c;需要解序列化为JSON对象let dataObj &＃61; JSON.parse(value)console.log("xxx---parse success---postId: "&＃43;dataObj.postId&＃43;",message:"&＃43;dataObj.message)that.message.push(dataObj)console.log("xxx---check message: "&＃43;JSON.stringify(that.message))});},


⑥ 发送消息

紧接着调用send()接口进行消息的发送&＃xff0c;这里注意&＃xff0c;如果要传递的是JSON对象&＃xff0c;要使用JSON.stringify()进行序列化操作&＃xff0c; 保证我们传递的是流字符串的形式。

在该接口的回调中&＃xff0c;我们也可以打印出来&＃xff0c;看看消息是否发送成功。

sendMessage(){let that &＃61; this;let data &＃61; {postId:that.id,message:that.sendMes}let dataStr &＃61; JSON.stringify(data)ws.send(dataStr, (err, value) &＃61;> {if (!err) {console.log("xxx---send success");} else {console.log("xxx---send fail, err:" &＃43; JSON.stringify(err));}});that.message.push(data)},


⑦ 隐藏标题栏

细心的小伙伴就会发现&＃xff0c;我的demo展示的黑色标题栏不见了&＃xff0c;其实是可以隐藏掉的&＃xff0c;只需要在config.json文件中module.abilities下添加几行代码即可。

"metaData":{"customizeData":[{"name": "hwc-theme","value": "androidhwext:style/Theme.Emui.NoTitleBar","extra":""}]}


⑧ 样式设计

接着就是简单设计一下界面样式&＃xff0c;把获取到的消息渲染出来就完成啦。

<div class&＃61;"container"><div style&＃61;"width: 100%;height: 8%;color: #ff86868a;font-size: 25px;justify-content: center;position: absolute;"><text style&＃61;"top: 10px;">实时聊天室text>div><list style&＃61;"height: 80%;"><list-item for&＃61;"{{message}}" class&＃61;"{{$item.postId&＃61;&＃61;id?&＃39;listItemRight&＃39;:&＃39;listItemLeft&＃39;}}" ><div class&＃61;"listItemDiv" ><text style&＃61;"padding:5px;border-radius: 10px;font-size: 20px;margin: 5px;max-width: 70%;">{{$item.message}}text>div>list-item>list><div style&＃61;"position: absolute;left:10px;bottom: 20px;"><textarea id&＃61;"textarea" class&＃61;"textarea" extend&＃61;"true"placeholder&＃61;"请输入聊天信息"onchange&＃61;"inputChange" >textarea><button style&＃61;"width: 75px;height: 50px;margin-left: 10px;background-color: #ff4848f5;" onclick&＃61;"sendMessage"> 发送 button>div>div>

.container {display: flex;flex-direction: column;justify-content: center;align-items: center;left: 0px;top: 0px;width: 100%;height: 100%;
}
.textarea {placeholder-color: gray;width: 70%;
}.listItemDiv{background-color: #ff87f3d0;border-radius: 10px;}.listItemLeft{margin: 10px;width: 100%;justify-content: flex-start;
}
.listItemRight{margin: 10px;width: 100%;justify-content: flex-end;
}