鸿蒙网络编程系列 14-WebSocket 客户端通讯示例

2024-10-22
广东
本文字数：2927 字
阅读完需：约 10 分钟

1. WebSocket 简介

WebSocket 协议最初于 2011 年通过 RFC 6455 完成了标准定义，后来又通过 RFC 7936、RFC 8307、RFC 8441 等标准对协议进行了完善。WebSocket 位于网络分层模型的应用层，是建立在 TCP 之上的双向通讯协议，可以在一个 TCP 连接上进行全双工通信；和 HTTP 不同的是，WebSocket 通讯需要服务端和客户端先通过握手连接，连接成功后才能相互通信。

2. WebSocket 的常用方法

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

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

复制代码

webSocket 模块包括了众多的操作方法，就本文而言，重点需要掌握的是如下四个：

1）createWebSocket(): WebSocket

创建一个 WebSocket 对象,在使用 WebSocket 的方法以前需要创建该对象。

2）connect(url: string, options?: WebSocketRequestOptions): Promise

连接到 url 指定的地址，可选参数 options 包含了连接需要的 header 信息，使用 promise 方法作为异步方法。

3）send(data: string | ArrayBuffer): Promise

通过 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 配置文件加上对权限的声明：

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

复制代码

这里添加了访问互联网的权限。

步骤 3：在 Index.ets 文件里添加如下的代码：

import webSocket from '@ohos.net.webSocket';import util from '@ohos.util';
//执行websocket通讯的对象let wsSocket = webSocket.createWebSocket()
@Entry@Componentstruct Index {  //连接、通讯历史记录  @State msgHistory: string = ''  //要发送的信息  @State sendMsg: string = ''  //ws服务端地址  @State wsServerUrl: string = "ws://192.168.100.100:8081/websocket"  //是否可以连接  @State canConnect: boolean = false
  //是否可以发送消息  @State canSend: boolean = false  scroller: Scroller = new Scroller()
  //是否绑定了事件处理程序  eventHandleBinded:boolean=false
  //绑定事件处理程序  bindEventHandle() {    //如果已绑定就退出    if(this.eventHandleBinded) {      return    }
    wsSocket.on('open', (err, value) => {      this.msgHistory += "连接打开:status:" + value['status'] + ", message:" + value['message'] + "\r\n"      this.scroller.scrollEdge(Edge.Bottom)    });
    //收到消息时的处理    wsSocket.on('message', (err, value) => {      this.msgHistory += "服务端:" + value + "\r\n"      this.scroller.scrollEdge(Edge.Bottom)    });
    //错误事件处理    wsSocket.on('error', (err) => {      this.msgHistory += "出现异常:" + JSON.stringify(err) + "\r\n"      this.scroller.scrollEdge(Edge.Bottom)    });
    this.eventHandleBinded = true  }
  build() {    Row() {      Column() {        Text("WebSocket通讯示例")          .fontSize(14)          .fontWeight(FontWeight.Bold)          .width('100%')          .textAlign(TextAlign.Center)          .padding(10)
        Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {          Text("服务端url：")            .fontSize(12)            .width(70)            .flexGrow(0)
          TextInput({ text: this.wsServerUrl })            .onChange((value) => {              this.wsServerUrl = value            })            .width(110)            .fontSize(11)            .flexGrow(1)
          Button("连接")            .onClick(() => {              this.connect2Server()            })            .width(60)            .fontSize(14)            .flexGrow(0)        }        .width('100%')        .padding(10)
        Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {          TextInput({ placeholder: "输入要发送的消息" }).onChange((value) => {            this.sendMsg = value          })            .width(200)            .flexGrow(1)
          Button("发送")            .enabled(this.canSend)            .width(60)            .fontSize(14)            .flexGrow(0)            .onClick(() => {              this.sendMsg2Server()            })        }        .width('100%')        .padding(10)
        Scroll(this.scroller) {          Text(this.msgHistory)            .textAlign(TextAlign.Start)            .padding(10)            .width('100%')            .backgroundColor(0xeeeeee)        }        .align(Alignment.Top)        .backgroundColor(0xeeeeee)        .height(300)        .flexGrow(1)        .scrollable(ScrollDirection.Vertical)        .scrollBar(BarState.On)        .scrollBarWidth(20)      }      .width('100%')      .justifyContent(FlexAlign.Start)      .height('100%')    }    .height('100%')  }
  //发送消息到服务端  sendMsg2Server() {    wsSocket.send(this.sendMsg + "\r\n")      .then((value) => {        this.msgHistory += "我:" + this.sendMsg + "\r\n"      })      .catch((e) => {        this.msgHistory += '发送失败' + e.message + "\r\n";      })  }
  //连接服务端  connect2Server() {    this.bindEventHandle()
    wsSocket.connect(this.wsServerUrl)      .then((value) => {        this.msgHistory += 'connect success ' + "\r\n";        this.canSend = true      })      .catch((e) => {        this.msgHistory +='connect fail ' + e.message + "\r\n";      })  }}