概要

技术:

ArkTS + ArkUI（MVVM架构）| WebSocket（JSON消息体）|

Node.js + ws（服务端广播）| 华为AccountKit认证|创建元服务

页码:

• Index— 首页，昵称/IP输入，华为账号登录，路由跳转

• ChatView— 聊天界面，消息左右布局，输入发送，自动滚底

• ChatViewModel— 连接管理，消息收发与senderID去重，UI回调

• ChatModel— 消息模型（头像、昵称、内容、是否自己）

• WsChatClient— 封装鸿蒙原生WebSocket API

• server.js— Node.js服务端，连接池管理，广播转发

• EntryFormAbility— 元服务入口，承载页面生命周期

整体架构流程

用户启动元服务
↓
EntryFormAbility（入口承载）
↓
Index 首页
├── 华为账号登录 → 获取用户标识
├── 输入昵称、服务器IP
└── 点击加入 → router.pushUrl 传参跳转
↓
ChatView 聊天界面
├── 接收路由参数（userName, userID, serverIP）
├── 初始化 ChatViewModel
├── connectToServer(ip, port) → 创建 WsChatClient
└── 设置回调：收到消息 → 刷新列表 → 自动滚底
↓
WsChatClient（WebSocket连接）
└── ws://IP:3000 → 连接 Node.js 服务端
↓
server.js（服务端）
├── 新连接加入连接池
├── 收到消息 → 广播给所有客户端
└── 断线 → 清理连接池
↓
消息收发流程：
发送：输入框 → sendMessage() → 本地list.push + ws.send(JSON)
接收：ws.onmessage → JSON解析 → senderID判断是否自己
→ 不是自己则list.push → 回调通知ChatView刷新

技术名词解释

技术细节

ChatModel：

export class ChatModel { img: Resource; name: string; text: string; isMe: boolean; constructor(img: Resource, name: string, text: string, isMe: boolean = false) { this.img = img; this.name = name; this.text = text; this.isMe = isMe; } }

WsChatClient：

import { webSocket } from '@kit.NetworkKit'; import { BusinessError } from '@kit.BasicServicesKit'; import { util } from '@kit.ArkTS'; export class WsChatClient { private ws: webSocket.WebSocket | null = null; private url: string; private onMessage: ((msg: string) => void) | null = null; private onStatus: ((status: string) => void) | null = null; private isConnected: boolean = false; constructor(url: string) { this.url = url; } connect(onMessage: (msg: string) => void, onStatus?: (status: string) => void): void { this.onMessage = onMessage; this.onStatus = onStatus || null; this.ws = webSocket.createWebSocket(); this.ws.on('open', (err: BusinessError, value: Object) => { if (!err) { this.isConnected = true; this.onStatus?.('已连接'); } else { this.onStatus?.('连接失败：' + JSON.stringify(err)); } }); this.ws.on('message', (err: BusinessError, value: string | ArrayBuffer) => { if (!err && this.onMessage) { let msg: string; if (typeof value === 'string') { msg = value; } else { let decoder = new util.TextDecoder(); msg = decoder.decodeWithStream(new Uint8Array(value)); } this.onMessage(msg); } }); this.ws.on('close', (err: BusinessError, value: webSocket.CloseResult) => { this.isConnected = false; this.onStatus?.('已断开'); }); this.ws.on('error', (err: BusinessError) => { this.onStatus?.('错误：' + JSON.stringify(err)); }); this.ws.connect(this.url, (err: BusinessError, value: boolean) => { if (err) { this.onStatus?.('连接失败：' + JSON.stringify(err)); } }); } send(msg: string): void { if (this.ws && this.isConnected) { this.ws.send(msg, (err: BusinessError, value: boolean) => { if (err) { console.error('发送失败：' + JSON.stringify(err)); } }); } } close(): void { if (this.ws) { this.ws.close(); this.ws = null; this.isConnected = false; } } }

ChatViewModel：

import { ChatModel } from '../Model/ChatModel'; import { WsChatClient } from '../Utils/WsChatClient'; interface MessageData { sender: string; senderID: string; text: string; time: number; } export class ChatViewModel { list: Array<ChatModel> = []; private wsClient: WsChatClient | null = null; private myName: string = '我'; private myID: string = ''; private onListChanged: (() => void) | null = null; constructor() { this.list = []; } // 设置列表更新回调 setOnListChanged(callback: () => void): void { this.onListChanged = callback; } // 设置用户信息 setMyName(name: string): void { this.myName = name; } setMyID(id: string): void { this.myID = id; } // 启动服务器（创建房间） startServer(): void { console.info('启动聊天服务器'); } // 连接WebSocket服务器 connectToServer(ip: string, port: number = 3000): void { let url: string = `ws://${ip}:${port}`; this.wsClient = new WsChatClient(url); this.wsClient.connect( (msg: string): void => { this.handleReceivedMessage(msg); }, (status: string): void => { console.info('连接状态：' + status); } ); } // 处理接收到的消息 private handleReceivedMessage(msg: string): void { try { let messageData: MessageData = JSON.parse(msg) as MessageData; // 通过senderID判断是否是自己发的消息 let isMe: boolean = messageData.senderID === this.myID; // 如果是自己发的消息就不重复添加（因为在sendMessage中已经添加了） if (isMe) { return; } let chatMsg: ChatModel = new ChatModel( $r('app.media.A'), messageData.sender, messageData.text, false // 别人发的 ); this.list.push(chatMsg); // 通知视图更新 this.onListChanged?.(); } catch (e) { let chatMsg: ChatModel = new ChatModel( $r('app.media.A'), '对方', msg, false ); this.list.push(chatMsg); // 通知视图更新 this.onListChanged?.(); } } // 发送消息 sendMessage(text: string): void { this.list.push(new ChatModel($r('app.media.B'), this.myName, text, true)); if (this.wsClient) { let messageData: MessageData = { sender: this.myName, senderID: this.myID, text: text, time: new Date().getTime() }; this.wsClient.send(JSON.stringify(messageData)); } } // 断开连接 disconnect(): void { if (this.wsClient) { this.wsClient.close(); this.wsClient = null; } } }

ChatView

// view/chatView.ets import { ChatModel } from '../Model/ChatModel'; import { ChatViewModel } from '../ViewModel/ChatViewModel'; import { router } from '@kit.ArkUI'; interface RouterParams { userName: string; userID: string; isHost: boolean; serverIP?: string; } @Entry @ComponentV2 export struct ChatView { @Local chatList: ChatModel[] = []; @Local inputText: string = ''; private viewModel: ChatViewModel = new ChatViewModel(); private scroller: Scroller = new Scroller(); private userName: string = ''; private userID: string = ''; private isHost: boolean = false; aboutToAppear(): void { // 获取路由参数 const params: RouterParams = router.getParams() as RouterParams; this.userName = params.userName; this.userID = params.userID; this.isHost = params.isHost; // 设置用户信息 this.viewModel.setMyName(this.userName); this.viewModel.setMyID(this.userID); // 设置列表更新回调，当收到新消息时自动刷新UI this.viewModel.setOnListChanged(() => { this.chatList = this.viewModel.list; // 滚到底部 this.scroller.scrollEdge(Edge.Bottom); }); // 连接服务器 if (this.isHost) { this.viewModel.startServer(); } else { const ip: string = params.serverIP || '192.168.1.100'; this.viewModel.connectToServer(ip); } // 初始化数据 this.chatList = this.viewModel.list; } build() { Column() { // ========== 顶部标题栏 ========== Row() { Button('← 返回') .fontSize(14) .fontColor('#007AFF') .backgroundColor(Color.Transparent) .onClick(() => { this.viewModel.disconnect(); router.back(); }) Text('聊天室') .fontSize(18) .fontWeight(FontWeight.Bold) .layoutWeight(1) .textAlign(TextAlign.Center) Text(this.userName) .fontSize(12) .fontColor('#888888') .padding({ right: 12 }) } .width('100%') .height(48) .backgroundColor('#FFFFFF') .padding({ left: 8 }) // ========== 消息列表区域 ========== List({ scroller: this.scroller }) { ForEach(this.chatList, (item: ChatModel, index: number) => { ListItem() { Row() { if (item.isMe) { // ----- 自己发的消息 ----- Blank() Column({ space: 4 }) { Text(item.text) .fontSize(16) .padding(12) .borderRadius(12) .backgroundColor('#007AFF') .fontColor(Color.White) .constraintSize({ maxWidth: '70%' }) } Image(item.img) .width(40) .height(40) .borderRadius(20) .objectFit(ImageFit.Cover) .margin({ left: 8 }) } else { // ----- 别人发的消息 ----- Image(item.img) .width(40) .height(40) .borderRadius(20) .objectFit(ImageFit.Cover) .margin({ right: 8 }) Column({ space: 4 }) { Text(item.name) .fontSize(12) .fontColor('#888888') .padding({ left: 4 }) Text(item.text) .fontSize(16) .padding(12) .borderRadius(12) .backgroundColor('#E5E5EA') .fontColor(Color.Black) .constraintSize({ maxWidth: '70%' }) } } } .width('100%') .padding({ left: 12, right: 12, top: 6, bottom: 6 }) .alignItems(VerticalAlign.Top) } }, (item: ChatModel, index: number) => index.toString()) } .layoutWeight(1) .backgroundColor('#FAFAFA') // ========== 底部输入区域 ========== Row({ space: 10 }) { TextInput({ placeholder: '输入消息...', text: this.inputText }) .layoutWeight(1) .height(44) .padding({ left: 12, right: 12 }) .backgroundColor('#FFFFFF') .borderRadius(22) .border({ width: 1, color: '#E0E0E0' }) .onChange((value: string) => { this.inputText = value; }) Button('发送') .height(44) .padding({ left: 16, right: 16 }) .borderRadius(22) .backgroundColor('#007AFF') .fontColor(Color.White) .fontSize(14) .onClick(() => { if (this.inputText.trim() !== '') { this.viewModel.sendMessage(this.inputText.trim()); // 更新列表 this.chatList = this.viewModel.list; this.inputText = ''; this.scroller.scrollEdge(Edge.Bottom); } }) } .width('100%') .padding({ left: 12, right: 12, top: 8, bottom: 8 }) .backgroundColor('#F5F5F5') } .width('100%') .height('100%') } }

ChatWidgetCard:

@Entry @Component struct ChatWidgetCard { /* * The title. */ readonly title: string = '局域网多人聊天'; /* * The action type. */ readonly actionType: string = 'router'; /* * The ability name. */ readonly abilityName: string = 'EntryAbility'; /* * The message. */ readonly message: string = 'add detail'; /* * The width percentage setting. */ readonly fullWidthPercent: string = '100%'; /* * The height percentage setting. */ readonly fullHeightPercent: string = '100%'; build() { Row() { Column() { Text(this.title) .fontSize($r('app.float.font_size')) .fontWeight(FontWeight.Medium) .fontColor($r('sys.color.font')) } .width(this.fullWidthPercent) } .height(this.fullHeightPercent) .backgroundColor($r('sys.color.comp_background_primary')) .onClick(() => { postCardAction(this, { action: this.actionType, abilityName: this.abilityName, params: { targetPage: 'pages/Index' } }); }) } }

Index:

import { authentication } from '@kit.AccountKit'; import { BusinessError } from '@kit.BasicServicesKit'; import { hilog } from '@kit.PerformanceAnalysisKit'; import router from '@ohos.router'; const DOMAIN = 0x0000; @Entry @ComponentV2 struct Index { @Local inputIP: string = '192.168.3.237'; @Local userName: string = ''; build() { Column({ space: 30 }) { Text('局域网聊天室') .fontSize(32) .fontWeight(FontWeight.Bold) .fontColor('#333333') .margin({ top: 80, bottom: 20 }) // 用户昵称 Column({ space: 8 }) { Text('你的昵称') .fontSize(14) .fontColor('#888888') .alignSelf(ItemAlign.Start) .padding({ left: 5 }) TextInput({ placeholder: '请输入昵称', text: this.userName }) .width('75%') .height(48) .fontSize(16) .borderRadius(12) .backgroundColor('#F5F5F5') .padding({ left: 16 }) .onChange((value: string) => { this.userName = value; }) } // 服务器IP Column({ space: 8 }) { Text('服务器IP地址') .fontSize(14) .fontColor('#888888') .alignSelf(ItemAlign.Start) .padding({ left: 5 }) TextInput({ placeholder: '请输入服务器IP', text: this.inputIP }) .width('75%') .height(48) .fontSize(16) .borderRadius(12) .backgroundColor('#F5F5F5') .padding({ left: 16 }) .onChange((value: string) => { this.inputIP = value; }) } // 加入按钮 Button('加入聊天室') .width('60%') .height(50) .fontSize(18) .fontWeight(FontWeight.Medium) .backgroundColor('#007AFF') .fontColor(Color.White) .borderRadius(25) .margin({ top: 20 }) .onClick(() => { const name: string = this.userName.trim() || '用户' + Math.floor(Math.random() * 1000); const ip: string = this.inputIP.trim() || '192.168.3.237'; router.pushUrl({ url: 'View/ChatView', params: { userName: name, userID: 'user_' + Date.now(), serverIP: ip } }).catch((err: BusinessError) => { hilog.error(DOMAIN, 'testTag', '跳转失败: %{public}s', JSON.stringify(err)); }); }) Text('提示：手机和电脑需连接同一WiFi。') .fontSize(12) .fontColor('#BBBBBB') .margin({ top: 20 }) Text('需在终端安装依赖 npm install ws') .fontSize(12) .fontColor('#BBBBBB') .margin({ top: 5 }) Text('需在终端开启服务端 node server.js。') .fontSize(12) .fontColor('#BBBBBB') .margin({ top: 5 }) Text('房主可在终端输入 ipconfig 查看IPv4地址') .fontSize(12) .fontColor('#BBBBBB') .margin({ top: 5 }) } .width('100%') .height('100%') .alignItems(HorizontalAlign.Center) } aboutToAppear(): void { hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onCreate'); this.loginWithHuaweiID(); } private loginWithHuaweiID(): void { const loginRequest: authentication.HuaweiIDProvider = new authentication.HuaweiIDProvider(); const request: authentication.LoginWithHuaweiIDRequest = loginRequest.createLoginWithHuaweiIDRequest(); request.forceLogin = false; const controller: authentication.AuthenticationController = new authentication.AuthenticationController(); controller.executeRequest(request).then((data: authentication.LoginWithHuaweiIDResponse) => { const authCode: string = data.data?.authorizationCode || ''; // 用华为账号信息作为用户名 if (authCode) { this.userName = 'HW_' + authCode.substring(0, 6); } hilog.info(DOMAIN, 'testTag', '登录成功'); }).catch((error: BusinessError) => { hilog.error(DOMAIN, 'testTag', 'error: %{public}s', JSON.stringify(error)); // 登录失败用默认昵称 this.userName = '用户' + Math.floor(Math.random() * 1000); }); } }

EntryFormAbility:

import { formBindingData, FormExtensionAbility, formInfo } from '@kit.FormKit'; import { Want } from '@kit.AbilityKit'; export default class EntryFormAbility extends FormExtensionAbility { onAddForm(want: Want) { // Called to return a FormBindingData object. const formData = ''; return formBindingData.createFormBindingData(formData); } onCastToNormalForm(formId: string) { // Called when the form provider is notified that a temporary form is successfully // converted to a normal form. } onUpdateForm(formId: string) { // Called to notify the form provider to update a specified form. } onFormEvent(formId: string, message: string) { // Called when a specified message event defined by the form provider is triggered. } onRemoveForm(formId: string) { // Called to notify the form provider that a specified form has been destroyed. } onAcquireFormState(want: Want) { // Called to return a {@link FormState} object. return formInfo.FormState.READY; } }

小结

本项目实现了一个基于鸿蒙元服务的局域网多人聊天室，采用ArkTS + ArkUI构建客户端，通过WebSocket与Node.js服务端实时通信。

核心成果

• 实现了用户登录、房间加入、消息收发、界面刷新等完整聊天流程

• 采用 MVVM 架构分离视图与逻辑，代码结构清晰

• 通过 senderID 去重机制避免消息重复显示

• 支持华为账号认证获取用户身份

存在问题

• 端口配置不统一（服务端3000 / 客户端8080）

• 缺少连接状态提示、自动重连、心跳保活

• 服务端广播包含发送者自身，浪费带宽

• 我没有其它手机验证能不能连成功

改进方向

• 统一端口配置并增加连接状态UI

• 添加断线重连与心跳机制

• 优化服务端广播逻辑，排除发送者