鸿蒙开发-如何实现WebSocket连接

场景介绍

使用WebSocket建立服务器与客户端的双向连接，需要先通过createWebSocket()方法创建WebSocket对象，然后通过connect()方法连接到服务器。

当连接成功后，客户端会收到open事件的回调，之后客户端就可以通过send()方法与服务器进行通信。

当服务器发信息给客户端时，客户端会收到message事件的回调。当客户端不要此连接时，可以通过调用close()方法主动断开连接，之后客户端会收到close事件的回调。

接口说明

接口名	描述
createWebSocket()	创建一个WebSocket连接。
connect()	建立一个WebSocket连接
send()	通过WebSocket连接发送数据。
close()	关闭WebSocket连接。
on(type: 'open')	订阅WebSocket的打开事件。
off(type: 'open')	取消订阅WebSocket的打开事件。
on(type: 'message')	订阅WebSocket的接收到服务器消息事件。
off(type: 'message')	取消订阅WebSocket的接收到服务器消息事件。
on(type: 'close')	订阅WebSocket的关闭事件。
off(type: 'close')	取消订阅WebSocket的关闭事件。
on(type: 'error')	订阅WebSocket的Error事件。
off(type: 'error')	取消订阅WebSocket的Error事件。

开发步骤

1.使用WebSocket建立服务器与客户端的双向连接

const ws = webSocket.createWebSocket()

2.通过connect()方法连接到服务器

ws.connect(`wss://xxxxx.net/socket.io/?token=b57b72f3-8a16-41fd-9b5f-7d83d007d6db&EIO=4&transport=websocket`)

3.当连接成功后，客户端会收到open事件的回调

ws.on('open', (err) => {
  if (err) {
    promptAction.showToast({ message: '连接失败' })
    return
  }
  ws.send('40')
  promptAction.showToast({ message: '连接成功' })
})

4.通过调用send()方法与服务器进行通信

ws.send(`42["message", {"msg": "${this.message}", "timestamp": "${Date.now()}"}]`)

5.当服务器发信息给客户端时，客户端会收到message事件的回调

ws.on('message', (err, data) => {
  if (err) {
    promptAction.showToast({ message: '连接失败' })
    return
  }
  this.list.push(JSON.stringify(data).split('\')[5])
})

效果展示

完整代码

/**
 * 使用WebSocket建立服务器与客户端的双向连接，
 * 需要先通过createWebSocket()方法创建WebSocket对象，
 * 然后通过connect()方法连接到服务器。
 * 当连接成功后，客户端会收到open事件的回调，
 * 之后客户端就可以通过send()方法与服务器进行通信。
 * 当服务器发信息给客户端时，客户端会收到message事件的回调。
 * 当客户端不要此连接时，可以通过调用close()方法主动断开连接，
 * 之后客户端会收到close事件的回调。
 * */
import webSocket from '@ohos.net.webSocket'
import { promptAction } from '@kit.ArkUI'

// 1.使用WebSocket建立服务器与客户端的双向连接
const ws = webSocket.createWebSocket()

@Entry
@Component
struct Index {
  @State list: string[] = []
  @State message: string = '你好'

  webSocketInit() {

    // 2.通过connect()方法连接到服务器
    ws.connect(`wss://xxxxxnet/socket.io/?token=b57b72f3-8a16-41fd-9b5f-7d83d007d6db&EIO=4&transport=websocket`)
    // 3.当连接成功后，客户端会收到open事件的回调
    ws.on('open', (err) => {
      if (err) {
        promptAction.showToast({ message: '连接失败' })
        return
      }
      ws.send('40')
      promptAction.showToast({ message: '连接成功' })
    })
    // 5.当服务器发信息给客户端时，客户端会收到message事件的回调
    ws.on('message', (err, data) => {
      if (err) {
        promptAction.showToast({ message: '连接失败' })
        return
      }
      this.list.push(JSON.stringify(data).split('\"')[5])
    })
    ws.on('error', (err) => {
      if (err) {
        promptAction.showToast({ message: '连接失败' })
        return
      }
    })
    ws.on('close', (err) => {
      if (err) {
        promptAction.showToast({ message: '连接断开' })
        return
      }
    })
  }

  build() {
    Navigation() {
      Column() {
        Button('使用WebSocket建立服务器与客户端的双向连接')
          .onClick(() => {
            this.webSocketInit()
          })
        TextInput({ placeholder: '请输入内容', text: $$this.message })
        Button('发送')
          .onClick(() => {
            this.list.push(this.message)
            // 4.通过调用send()方法与服务器进行通信
            ws.send(`42["message", {"msg": "${this.message}", "timestamp": "${Date.now()}"}]`)

          })
        Text(JSON.stringify(this.list))
          .fontSize(20)
          .lineHeight(50)

      }
      .width('100%')
      .height('100%')
    }
    .title('WebSocket')
    .titleMode(NavigationTitleMode.Mini)
  }
}