1# WebSocket
2
3### 介绍
4
5本示例展示了WebSocket的使用，包括客户端与服务端的连接和断开以及客户端数据的接收和发送。
6
7WebSocket连接：使用WebSocket建立服务器与客户端的双向连接，需要先通过createWebSocket方法创建WebSocket对象，然后通过connect方法连接到服务器。
8当连接成功后，客户端会收到open事件的回调，之后客户端就可以通过send方法与服务器进行通信。 当服务器发信息给客户端时，客户端会收到message事件的回调。
9当客户端不要此连接时，可以通过调用close方法主动断开连接，之后客户端会收到close事件的回调。
10
11### 效果预览
12
13| 主页                                      | 未连接                                    | 连接                                  |
14|-----------------------------------------|----------------------------------------|-------------------------------------|
15| ![](screenshots/device/bindService.png) | ![](screenshots/device/disconnect.png) | ![](screenshots/device/connect.png) |
16
17使用方法：
18
191.输入服务器IP地址，点击**绑定服务器IP地址**按钮，即可绑定该IP并退出弹框，如果要解绑IP，重启应用即可。
20
212.点击顶部栏的**连接**按钮，按钮颜色从灰色变为绿色，即可与服务器建立WebSocket连接，并开始监听服务器发来的消息。
22
233.在底部消息输入框输入消息，点击**发送**按钮，即可收到来自服务端的消息回馈。
24
254.再次点击顶部栏的**连接**按钮，按钮颜色从绿色重新变成灰色，即可与服务器断开连接，接收不到服务器发来的消息。
26
275.重新连接需要退出应用重新绑定ip，再次点击连接才可以发送接收消息。
28
29### 工程目录
30```
31entry/src/main/ets/
32|---Application
33|   |---AbilityStage.ts
34|---common
35|   |---BindServiceIp.ets                    // 绑定服务器IP地址
36|   |---ChatsPage.ets                        // 聊天框
37|   |---SendMessage.ets                      // 发送信息
38|   |---TopBar.ets                           // 顶部栏
39|---MainAbility
40|   |---MainAbility.ts
41|---model
42|   |---ChatData.ets                          // 数据类型
43|   |---DataSource.ets                        // 源数据
44|   |---Logger.ts                             // 日志工具
45|---pages
46|   |---Chats.ets                             // 首页
47```
48
49### 具体实现
50
51* 本示例分为两大模块
52  * 客户端与服务端的连接和断开模块
53    * BindServiceIP方法输入服务器IP地址，socket.connect方法绑定服务器，进入消息框页面，socket.on方法连接服务器，socket.off方法断开连接
54    * 源码链接：[BindServiceIp.ets](entry/src/main/ets/common/BindServiceIp.ets)，[ChatsPage.ets](entry/src/main/ets/common/ChatsPage.ets)
55    * 接口参考：[@ohos.prompt](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/js-apis-promptAction.md)，[@ohos.net.webSocket](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-network-kit/js-apis-webSocket.md)
56
57  * 客户端数据的接收和发送模块
58    * TopBar组件搭建通讯页面，socket.send方法发送信息数据。
59    * 源码链接：[TopBar.ets](entry/src/main/ets/common/TopBar.ets)，[SendMessage.ets](entry/src/main/ets/common/SendMessage.ets)，[ChatData.ets](entry/src/main/ets/model/ChatData.ets)，[DataSource.ets](entry/src/main/ets/model/DataSource.ets)
60    * 接口参考：[@ohos.prompt](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/js-apis-promptAction.md)，[@ohos.net.webSocket](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-network-kit/js-apis-webSocket.md)
61
62### 相关权限
63
64[ohos.permission.INTERNET](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/security/AccessToken/permissions-for-all.md#ohospermissioninternet)
65
66### 依赖
67
68依赖于[WebSocketServer](https://gitee.com/adslk/application_server/tree/master/WebSocketServer)服务器才能实现相关功能。
69
70### 约束与限制
71
721.本示例仅支持在标准系统上运行。
73
742.本项目仅包含客户端，不包含服务端，当前服务端回复客服端为固定消息。
75
763.本示例仅支持API9版本SDK，版本号：3.2.11.9 及以上。
77
784.本示例需要使用DevEco Studio 3.1 Beta2 (Build Version: 3.1.0.400 构建 2023年4月7日)及以上才可编译运行。
79
80### 下载
81
82如需单独下载本工程，执行如下命令：
83```
84git init
85git config core.sparsecheckout true
86echo code\BasicFeature\Connectivity\WebSocket > .git/info/sparse-checkout
87git remote add origin https://gitee.com/openharmony/applications_app_samples.git
88git pull origin master
89```
90