鸿蒙 HarmonyOS--WebSocket连接

WebSocket是一种长连接的双向通信方式，一旦连接完成，双方就能相互主动发起通信，每次通信不需要再次连接。

客户端向服务器发送握手报文，服务器响应确认握手的报文，连接就建立了，连接完成后，双方都可以主动发送数据，直到有一方发来断开连接的信号来关闭连接。

下面使用了一个WebSocket在线测试的url，客户端发送了什么消息，服务端就会返回什么消息，用id来区分客户端和服务端。

import { webSocket } from '@kit.NetworkKit'
import { promptAction } from '@kit.ArkUI'
import { BusinessError } from '@kit.BasicServicesKit'

interface messageInfo {
  //用户id，我这里的设置：客户端的id为1001,服务端id为1002
  id: string
  msg: string
}

@Entry
@Component
struct WebSocketPage {
  @State data: messageInfo[] = [] //消息数组
  @State myMsg: string = ''
  //这是websocket在线测试url，客户端发送什么，服务器就会返回什么
  @State url: string = 'ws://124.222.224.186:8800/websocket'
  ws: webSocket.WebSocket | null = null

  async aboutToAppear() {
    this.connect2Server(this.url)
    this.receiveMsg()
  }

  //连接服务端
  connect2Server(defaultIpAddress: string) {
    this.ws = webSocket.createWebSocket();
    //根据URL地址，建立一个WebSocket连接
    this.ws.connect(defaultIpAddress, (err: BusinessError, value: boolean) => {
      if (!err) {
        //连接成功
        promptAction.showToast({ message: 'connect success ' })
      } else {
        AlertDialog.show({ message: 'connect fail ' + err.message })
      }
    })

    this.ws.on('open', (err: BusinessError, value: object) => {
      //打开webSocket失败
      if (err) {
        AlertDialog.show({ message: JSON.stringify(err) })
      }
    })
  }

  //接收到服务器消息
  receiveMsg() {
    if (this.ws) {
      this.ws.on('message', (err, value) => {
        this.data.push({ id: '1002', msg: JSON.stringify(value) })
      })
    }
  }

  //发送消息到服务端
  sendMsg2Server(msg: string) {
    if (this.ws) {
      this.ws.send(msg)
        .catch((e: Error) => {
          AlertDialog.show({ message: '发送失败' + e.message })
        })
    }
  }

  build() {
    Navigation() {
      Column() {
        List() {
          ForEach(this.data, (Item: messageInfo) => {
            ListItem() {
              Row() {
                //网络图片需要打开网络权限
                Image(Item.id === '1001' ?
                  "https://tse3-mm.cn.bing.net/th/id/OIP-C.JRIYJ3EqtcLF1LwK3oxjgAHaGg?w=201&h=181&c=7&r=0&o=5&dpr=1.3&pid=1.7" :
                  "https://tse3-mm.cn.bing.net/th/id/OIP-C.7Z068v6GRuOJVYYUSHsBDgHaNK?w=115&h=182&c=7&r=0&o=5&dpr=1.3&pid=1.7")
                  .height(40)
                  .width(40)
                  .borderRadius(6)
                Row() {
                  Text(Item.msg)
                    .backgroundColor(Item.id === '1001' ? Color.Orange : Color.Yellow)
                    .padding(10)
                    .lineHeight(24)
                    .margin({
                      left: 10,
                      right: 10
                    })
                    .borderRadius(5)
                }
                .layoutWeight(6)
                .justifyContent(Item.id === '1001' ? FlexAlign.End : FlexAlign.Start)

                Text().layoutWeight(1)
              }
              .alignItems(VerticalAlign.Top)
              .direction(Item.id === '1001' ? Direction.Rtl : Direction.Ltr)
            }
            .margin({ bottom: 10 })
          })
        }
        .padding(10)
        .backgroundColor(Color.Pink)
        .layoutWeight(1)

        TextInput({ placeholder: '请输入', text: $$this.myMsg })
          .onSubmit(() => {
            this.sendMsg2Server(this.myMsg)
            this.data.push({ id: '1001', msg: this.myMsg } as messageInfo)
            //清空输入框内容
            this.myMsg = ''
          })
      }
      .height('100%')
      .width('100%')
    }
    .title('webSocket通信')
    .titleMode(NavigationTitleMode.Mini)
  }
}