HarmonyOS WebSocket全场景应用开发深度解析

注：适用版本（Harmony OS NEXT / 5.0 / API 12+ ）

一、最终效果预览

                                                

二、基础代码结构

@Entry
@Component
struct ChatApp {
  @State messages: Message[] = []  // 所有聊天记录
  @State inputText: string = ""    // 输入框内容
  @State isConnected: boolean = false // 是否在线

  private ws: webSocket.WebSocket | null = null

  // 建立连接
  private connect() {
    this.ws = webSocket.createWebSocket()
    this.ws.connect('wss://toolin.cn/echo')
    
    // 四个关键监听
    this.ws.on('open', () => this.isConnected = true)
    this.ws.on('message', (data) => {
      this.messages = [...this.messages, new Message('received', data.message)]
    })
    this.ws.on('close', () => this.isConnected = false)
    this.ws.on('error', (err) => console.error('出错啦:', err))
  }

  // 发送消息
  private sendMessage() {
    if (this.inputText && this.isConnected) {
      this.ws?.send(this.inputText)
      this.messages = [...this.messages, new Message('sent', this.inputText)]
      this.inputText = ""
    }
  }

  build() { /* 界面代码 */ }
}

三、核心功能

        1、连接状态管理

// 显示连接状态
Text(this.isConnected ? '🟢 在线' : '🔴 离线')
  .fontColor(this.isConnected ? Color.Green : Color.Red)

// 连接/断开按钮
Button(this.isConnected ? '断开连接' : '点击连接')
  .onClick(() => {
    this.isConnected ? this.ws?.close() : this