鸿蒙HarmonyOS NEXT（开发进阶）WebSocket客户端通讯实践案例 ...

  鸿蒙NEXT开发实战往期必看文章：
一分钟相识”纯血版！鸿蒙HarmonyOS Next应用开发！
“非常详细的” 鸿蒙HarmonyOS Next应用开发学习门路！（从零底子入门到精通）
HarmonyOS NEXT应用开发案例实践总联合（持续更新......）
HarmonyOS NEXT应用开发性能优化实践总结（持续更新......）

---

1. WebSocket简介

WebSocket协议最初于2011年通过RFC 6455完成了尺度界说，后来又通过RFC 7936、RFC 8307、RFC 8441等尺度对协议进行了完善。WebSocket位于网络分层模型的应用层，是创建在TCP之上的双向通讯协议，可以在一个TCP连接上进行全双工通讯；和HTTP差别的是，WebSocket通讯需要服务端和客户端先通过握手连接，连接成功后才能相互通讯。
2. WebSocket的常用方法

鸿蒙封装的WebSocket利用类位于模块webSocket中，使用如下的方式导入：

1. import webSocket from '@ohos.net.webSocket';

复制代码

        webSocket模块包括了众多的利用方法，就本文而言，重点需要把握的是如下四个：
1）createWebSocket(): WebSocket
创建一个WebSocket对象,在使用WebSocket的方法从前需要创建该对象。
2）connect(url: string, options?: WebSocketRequestOptions): Promise<boolean>
连接到url指定的地址，可选参数options包罗了连接需要的header信息，使用promise方法作为异步方法。
3）send(data: string | ArrayBuffer): Promise<boolean>
通过WebSocket连接发送数据data，使用Promise方式作为异步方法。
4）on(type: 'message', callback: AsyncCallback<string | ArrayBuffer>): void
订阅WebSocket连接的吸收消息变乱，使用callback方式作为异步方法。
3. WebSocket客户端通讯示例

为演示WebSocket通讯的方式，本示例实现了一个使用WebSocket协议发送、吸收消息的功能，运行后的初始界面如下所示：

应用启动后，单击“连接”按钮可以可以连接到指定的WebSocket服务器，输入要发送的信息，然后单击“发送”按钮，即可发送信息到服务器，架设服务器是一个回声服务器，就会把收到的信息发送给客户端。
下面详细先容创建该应用的步调。
步调1：创建Empty Ability项目。
步调2：在module.json5配置文件加上对权限的声明：

1. "requestPermissions": [
2.       {
3.         "name": "ohos.permission.INTERNET"
4.       }
5.     ]

复制代码

这里添加了访问互联网的权限。
步调3：在Index.ets文件里添加如下的代码：

1. import webSocket from '@ohos.net.webSocket';
2. import util from '@ohos.util';
4. //执行websocket通讯的对象
5. let wsSocket = webSocket.createWebSocket()
7. @Entry
8. @Component
9. struct Index {
10.   //连接、通讯历史记录
11.   @State msgHistory: string = ''
12.   //要发送的信息
13.   @State sendMsg: string = ''
14.   //ws服务端地址
15.   @State wsServerUrl: string = "ws://192.168.100.100:8081/websocket"
16.   //是否可以连接
17.   @State canConnect: boolean = false
19.   //是否可以发送消息
20.   @State canSend: boolean = false
21.   scroller: Scroller = new Scroller()
23.   //是否绑定了事件处理程序
24.   eventHandleBinded:boolean=false
26.   //绑定事件处理程序
27.   bindEventHandle() {
28.     //如果已绑定就退出
29.     if(this.eventHandleBinded) {
30.       return
31.     }
33.     wsSocket.on('open', (err, value) => {
34.       this.msgHistory += "连接打开:status:" + value['status'] + ", message:" + value['message'] + "\r\n"
35.       this.scroller.scrollEdge(Edge.Bottom)
36.     });
38.     //收到消息时的处理
39.     wsSocket.on('message', (err, value) => {
40.       this.msgHistory += "服务端:" + value + "\r\n"
41.       this.scroller.scrollEdge(Edge.Bottom)
42.     });
44.     //错误事件处理
45.     wsSocket.on('error', (err) => {
46.       this.msgHistory += "出现异常:" + JSON.stringify(err) + "\r\n"
47.       this.scroller.scrollEdge(Edge.Bottom)
48.     });
50.     this.eventHandleBinded = true
51.   }
53.   build() {
54.     Row() {
55.       Column() {
56.         Text("WebSocket通讯示例")
57.           .fontSize(14)
58.           .fontWeight(FontWeight.Bold)
59.           .width('100%')
60.           .textAlign(TextAlign.Center)
61.           .padding(10)
63.         Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
64.           Text("服务端url：")
65.             .fontSize(12)
66.             .width(70)
67.             .flexGrow(0)
69.           TextInput({ text: this.wsServerUrl })
70.             .onChange((value) => {
71.               this.wsServerUrl = value
72.             })
73.             .width(110)
74.             .fontSize(11)
75.             .flexGrow(1)
77.           Button("连接")
78.             .onClick(() => {
79.               this.connect2Server()
80.             })
81.             .width(60)
82.             .fontSize(14)
83.             .flexGrow(0)
84.         }
85.         .width('100%')
86.         .padding(10)
88.         Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
89.           TextInput({ placeholder: "输入要发送的消息" }).onChange((value) => {
90.             this.sendMsg = value
91.           })
92.             .width(200)
93.             .flexGrow(1)
95.           Button("发送")
96.             .enabled(this.canSend)
97.             .width(60)
98.             .fontSize(14)
99.             .flexGrow(0)
100.             .onClick(() => {
101.               this.sendMsg2Server()
102.             })
103.         }
104.         .width('100%')
105.         .padding(10)
107.         Scroll(this.scroller) {
108.           Text(this.msgHistory)
109.             .textAlign(TextAlign.Start)
110.             .padding(10)
111.             .width('100%')
112.             .backgroundColor(0xeeeeee)
113.         }
114.         .align(Alignment.Top)
115.         .backgroundColor(0xeeeeee)
116.         .height(300)
117.         .flexGrow(1)
118.         .scrollable(ScrollDirection.Vertical)
119.         .scrollBar(BarState.On)
120.         .scrollBarWidth(20)
121.       }
122.       .width('100%')
123.       .justifyContent(FlexAlign.Start)
124.       .height('100%')
125.     }
126.     .height('100%')
127.   }
129.   //发送消息到服务端
130.   sendMsg2Server() {
131.     wsSocket.send(this.sendMsg + "\r\n")
132.       .then((value) => {
133.         this.msgHistory += "我:" + this.sendMsg + "\r\n"
134.       })
135.       .catch((e) => {
136.         this.msgHistory += '发送失败' + e.message + "\r\n";
137.       })
138.   }
140.   //连接服务端
141.   connect2Server() {
142.     this.bindEventHandle()
144.     wsSocket.connect(this.wsServerUrl)
145.       .then((value) => {
146.         this.msgHistory += 'connect success ' + "\r\n";
147.         this.canSend = true
148.       })
149.       .catch((e) => {
150.         this.msgHistory +='connect fail ' + e.message + "\r\n";
151.       })
152.   }
153. }

复制代码

步调4：编译运行，可以使用模拟器或者真机。
步调5：配置服务端地址，假设服务端是回声服务器。
连接上服务端后，客户端发送消息“Hi,Server！”
然后服务端主动复兴：“Hi,Server！”，截图如下所示：

​这样就完成了一个简单的WebSocket消息发送应用。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。