鸿蒙APP接纳WebSocket实现在线实时聊天

1. 案例情况：

• 鸿蒙APP接纳ArkTS语法编写，API14情况，DevEco Studio 5.0.7.210编辑器开发
  
• 后台接口基于SpringBoot，后台前端基于Vue开发
  
• 核心技能接纳 WebSocket 举行通讯
  

2. 主要实现功能：

• 实时聊天
  
• 在线实时状态检测（后台断线，APP端可实时显示状态）
  

3. 运行实测结果图如下：

分析：

• APP端和后台客服可以举行实时聊天
  
• APP端顶部[在线客服]旁边有个绿色图标，表示连接正常，如果后台关闭了，则连接不正常，这个图标会立马变成灰色，后台服务规复正常后，该图标会立马变成绿色状态
  
• 后台客服可以主动连接和断开连接
  

4. APP端代码如下：

1. import webSocket from '@ohos.net.webSocket';
2. import CommonConstants from '../../common/CommonConstants';
3. import { tokenUtils } from '../../common/TokenUtils';
4. import Logger from '../../common/utils/Logger';
5. import { myTools } from '../../common/utils/MyTools';
6. import { Header } from '../../component/Header';
7. import { ChatModel } from '../../model/chat/ChatModel';
9. //执行websocket通讯的对象
10. let wsSocket = webSocket.createWebSocket()
12. /**
13. * 在线客服-页面
14. */
15. @Entry
16. @Component
17. struct ChatPage {
18.   //当前登录人的用户ID
19.   @State userId: number = -1;
20.   //要发送的信息
21.   @State sendMsg: string = ''
22.   //ws服务端地址
23.   @State wsServerUrl: string = "ws://" + CommonConstants.SERVER_IP + ":" + CommonConstants.SERVER_PORT + "/webSocket/"
24.   //与后台 WebSocket 的连接状态
25.   @State connectStatus: boolean = false
26.   scroller: Scroller = new Scroller()
27.   //是否绑定了事件处理程序
28.   eventHandleBinded: boolean = false
29.   @State intervalID: number = 0;
30.   //消息集合
31.   @State messageList: Array<ChatModel> = [];
33.   //检查连接状态
34.   checkStatus() {
35.     if (!this.connectStatus) {
36.       wsSocket.connect(this.wsServerUrl + this.userId)
37.         .then((value) => {
38.         })
39.         .catch((e: Error) => {
40.           this.connectStatus = false; //连接状态不可用
41.         });
42.     }
43.     wsSocket.send('heartbeat')
44.       .then((value) => {
45.       })
46.       .catch((e: Error) => {
47.         this.connectStatus = false; //连接状态不可用
48.       })
49.   }
51.   aboutToAppear(): void {
52.     this.userId = tokenUtils.getUserInfo().id as number;
53.     this.connect2Server();
54.     //重复执行(此处注意：setInterval里面如果需要使用this的话，就必须使用匿名函数的写法，否则取不到值)
55.     this.intervalID = setInterval(() => {
56.       this.checkStatus();
57.       Logger.debug('WebSocket连接状态=' + this.connectStatus)
58.     }, 2000);
59.   }
61.   build() {
62.     Row() {
63.       Column() {
64.         Stack() {
65.           Header({ title: '在线客服', showBack: true, backgroundColorValue: '#ffffff' })
66.           Image($r('app.media.svg_connectStatus'))
67.             .fillColor(this.connectStatus ? '#1afa29' : '#cccccc')
68.             .width(20)
69.             .offset({ x: -75 })
70.         }
72.         //展示消息区域
73.         Scroll(this.scroller) {
74.           //展示消息
75.           Column({ space: 30 }) {
76.             ForEach(this.messageList, (item: ChatModel) => {
77.               if (item.role == 'ai') {
78.                 //客服展示在左侧
79.                 Column({ space: 10 }) {
80.                   //消息时间
81.                   Row() {
82.                     Text(item.createTime)
83.                       .fontSize(11)
84.                       .fontColor('#cccccc')
85.                   }
86.                   .padding({ left: 13 })
87.                   .justifyContent(FlexAlign.Center)
88.                   .width('100%')
90.                   //消息和头像
91.                   Row({ space: 5 }) {
92.                     //头像
93.                     Image(item.avatar)
94.                       .width(45)
95.                       .height(45)
96.                       .borderRadius(3)
97.                     //消息
98.                     Text(item.text)
99.                       .fontSize(14)
100.                       .width('60%')
101.                       .padding(12)
102.                       .backgroundColor('#2c2c2c')
103.                       .fontColor('#ffffff')
104.                       .borderRadius(6)
105.                   }
106.                   .padding({ left: 13 })
107.                   .justifyContent(FlexAlign.Start)
108.                   .width('100%')
109.                 }
110.                 .width('100%')
111.               } else {
112.                 //用户自己展示在右侧
113.                 Column({ space: 10 }) {
114.                   //消息时间
115.                   Row() {
116.                     Text(item.createTime)
117.                       .fontSize(11)
118.                       .fontColor('#cccccc')
119.                   }
120.                   .padding({ right: 13 })
121.                   .justifyContent(FlexAlign.Center)
122.                   .width('100%')
124.                   //消息和头像
125.                   Row({ space: 5 }) {
126.                     //消息
127.                     Text(item.text)
128.                       .fontSize(14)
129.                       .width('60%')
130.                       .padding(12)
131.                       .backgroundColor('#1afa29')
132.                       .fontColor('#141007')
133.                       .borderRadius(6)
134.                     //头像
135.                     Image(item.avatar)
136.                       .width(45)
137.                       .height(45)
138.                       .borderRadius(3)
139.                   }
140.                   .padding({ right: 13 })
141.                   .justifyContent(FlexAlign.End)
142.                   .width('100%')
143.                 }
144.                 .width('100%')
145.               }
146.             })
147.           }
148.           .width('100%')
149.           .padding({ top: 20, bottom: 20 })
151.         }
152.         .align(Alignment.Top)
153.         .layoutWeight(1)
154.         .flexGrow(1)
155.         .scrollable(ScrollDirection.Vertical)
156.         .scrollBar(BarState.On)
157.         .scrollBarWidth(5)
159.         //发送消息输入框
160.         Flex({ justifyContent: FlexAlign.End, alignItems: ItemAlign.Center }) {
161.           TextInput({ text: this.sendMsg, placeholder: "请输入消息..." })
162.             .flexGrow(1)
163.             .borderRadius(1)
164.             .onChange((value) => {
165.               this.sendMsg = value
166.             })
168.           Button("发送", { type: ButtonType.Normal, stateEffect: true })
169.             .enabled(this.connectStatus)
170.             .width(90)
171.             .fontSize(17)
172.             .margin({ left: 5 })
173.             .flexGrow(0)
174.             .onClick(() => {
175.               if (!this.sendMsg) {
176.                 myTools.alertMsg('发送消息不能为空！');
177.                 return;
178.               }
179.               this.sendMsg2Server()
180.             })
181.         }
182.         .width('100%')
183.         .padding(3)
184.       }
185.       .width('100%')
186.       .justifyContent(FlexAlign.Start)
187.       .height('100%')
188.     }
189.     .height('100%')
190.     .padding({ top: CommonConstants.TOP_PADDING, bottom: CommonConstants.BOTTOM_PADDING })
191.   }
193.   //发送消息到服务端
194.   sendMsg2Server() {
195.     wsSocket.send(this.sendMsg)
196.       .then((value) => {
197.       })
198.       .catch((e: Error) => {
199.         this.connectStatus = false; //连接状态不可用
200.       })
201.     this.scroller.scrollEdge(Edge.Bottom);
202.     this.sendMsg = ''; //清空消息
203.   }
205.   //连接服务端
206.   connect2Server() {
207.     this.bindEventHandle()
208.     wsSocket.connect(this.wsServerUrl + this.userId)
209.       .then((value) => {
210.       })
211.       .catch((e: Error) => {
212.         this.connectStatus = false; //连接状态不可用
213.       });
214.   }
215. }

复制代码

5. 后台接口核心代码如下：

1. package cn.wujiangbo.WebSocket.server;
3. import cn.hutool.core.util.ObjectUtil;
4. import cn.wujiangbo.WebSocket.config.GetHttpSessionConfig;
5. import cn.wujiangbo.WebSocket.pojo.ClientInfoEntity;
6. import cn.wujiangbo.WebSocket.pojo.IM;
7. import cn.wujiangbo.domain.app.AppUser;
8. import cn.wujiangbo.service.app.AppUserService;
9. import cn.wujiangbo.util.DateUtils;
10. import cn.wujiangbo.util.SpringContextUtil;
11. import com.aliyun.oss.ServiceException;
12. import com.fasterxml.jackson.databind.ObjectMapper;
13. import lombok.extern.slf4j.Slf4j;
14. import org.springframework.stereotype.Component;
15. import org.springframework.web.bind.annotation.CrossOrigin;
16. import javax.annotation.PostConstruct;
17. import javax.websocket.*;
18. import javax.websocket.server.PathParam;
19. import javax.websocket.server.ServerEndpoint;
20. import java.io.IOException;
21. import java.text.SimpleDateFormat;
22. import java.time.LocalDateTime;
23. import java.util.Date;
24. import java.util.Iterator;
25. import java.util.Map;
26. import java.util.concurrent.ConcurrentHashMap;
28. /**
29. * <p>该类负责监听客户端的连接、断开连接、接收消息、发送消息等操作。</p>
30. */
31. @Slf4j
32. @Component
33. @CrossOrigin(origins = "*")
34. @ServerEndpoint(value = "/webSocket/{userId}", configurator = GetHttpSessionConfig.class)
35. public class WebSocketServer {
37.     /**
38.      * key：客户端连接唯一标识(用户ID)
39.      * value：ClientInfoEntity
40.      */
41.     private static final Map<Long, ClientInfoEntity> uavWebSocketInfoMap = new ConcurrentHashMap<Long, ClientInfoEntity>();
43.     //默认连接2小时
44.     private static final int EXIST_TIME_HOUR = 2;
46.     AppUserService appUserService;
48.     //客服头像地址(替换成网络可访问的图片地址即可)
49.     private String CUSTOMER_IAMGE = "";
51.     /**
52.      * 连接建立成功调用的方法
53.      *
54.      * @param session 第一个参数必须是session
55.      * @param sec
56.      * @param userId  代表客户端的唯一标识
57.      */
58.     @OnOpen
59.     public void onOpen(Session session, EndpointConfig sec, @PathParam("userId") Long userId) {
60.         if (uavWebSocketInfoMap.containsKey(userId)) {
61.             throw new ServiceException("token已建立连接");
62.         }
63.         //把成功建立连接的会话在实体类中保存
64.         ClientInfoEntity entity = new ClientInfoEntity();
65.         entity.setUserId(userId);
66.         entity.setSession(session);
67.         //默认连接N个小时
68.         entity.setExistTime(LocalDateTime.now().plusHours(EXIST_TIME_HOUR));
69.         uavWebSocketInfoMap.put(userId, entity);
70.         //之所以获取http session 是为了获取获取 httpsession 中的数据 (用户名/账号/信息)
71.         System.out.println("WebSocket 连接建立成功，userId=: " + userId);
72.     }
74.     /**
75.      * 当断开连接时调用该方法
76.      */
77.     @OnClose
78.     public void onClose(Session session, @PathParam("userId") Long userId) {
79.         // 找到关闭会话对应的用户 ID 并从 uavWebSocketInfoMap 中移除
80.         if (ObjectUtil.isNotEmpty(userId) && uavWebSocketInfoMap.containsKey(userId)) {
81.             uavWebSocketInfoMap.remove(userId);
82.             System.out.println("WebSocket 连接关闭成功，userId=: " + userId);
83.         }
84.     }
86.     /**
87.      * 接受消息
88.      * 这是接收和处理来自用户的消息的地方。我们需要在这里处理消息逻辑，可能包括广播消息给所有连接的用户。
89.      */
90.     @OnMessage
91.     public void onMessage(Session session, @PathParam("userId") Long userId, String message) throws IOException {
92.         log.info("接收到来自 [" + userId + "] 的消息：" + message);
94.         //如果是心跳检测的话，直接返回success即可表示，后台服务是正常状态
95.         if ("heartbeat".equals(message)) {
96.             this.sendUserMessage(userId, "success");
97.             return;
98.         }
100.         ClientInfoEntity entity = uavWebSocketInfoMap.get(userId);
101.         if (entity == null) {
102.             this.sendUserMessage(userId, "用户在线信息错误！");
103.             return;
104.         }
106.         IM im = new IM();
107.         if (userId != -1) {
108.             appUserService = SpringContextUtil.getBean(AppUserService.class);
109.             AppUser user = appUserService.getById(userId);
110.             if (user == null) {
111.                 this.sendUserMessage(userId, "用户信息不存在！");
112.                 return;
113.             }
114.             im.setRole("user");//user表示APP用户发的消息
115.             im.setUsername(user.getNickName());
116.             im.setAvatar(user.getUserImg());
117.         } else {
118.             im.setRole("ai");//ai表示后台客服发的消息
119.             im.setUsername("人工客服");
120.             im.setAvatar(CUSTOMER_IAMGE);
121.         }
123.         im.setUid(userId);
124.         im.setCreateTime(DateUtils.getCurrentDateString());
125.         im.setText(message);
127.         //只要接受到客户端的消息就进行续命(时间)
128.         entity.setExistTime(LocalDateTime.now().plusHours(EXIST_TIME_HOUR));
129.         uavWebSocketInfoMap.put(userId, entity);
131.         String jsonStr = new ObjectMapper().writeValueAsString(im);  // 处理后的消息体
132.         this.sendMessage(jsonStr);
133.     }
135.     /**
136.      * 处理WebSocket中发生的任何异常。可以记录这些错误或尝试恢复。
137.      */
138.     @OnError
139.     public void onError(Throwable error) {
140.         log.error("报错信息：" + error.getMessage());
141.         error.printStackTrace();
143.     }
145.     private static final SimpleDateFormat FORMAT = new SimpleDateFormat("yyyy:MM:dd hh:mm:ss");
147.     /**
148.      * 发送消息定时器
149.      * 开启定时任务，每隔N秒向前台发送一次时间
150.      */
151.     @PostConstruct
152. //    @Scheduled(cron = "0/59 * *  * * ? ")
153.     public void refreshDate() {
154.         //当没有客户端连接时阻塞等待
155.         if (!uavWebSocketInfoMap.isEmpty()) {
156.             //超过存活时间进行删除
157.             Iterator<Map.Entry<Long, ClientInfoEntity>> iterator = uavWebSocketInfoMap.entrySet().iterator();
158.             while (iterator.hasNext()) {
159.                 Map.Entry<Long, ClientInfoEntity> entry = iterator.next();
160.                 if (entry.getValue().getExistTime().compareTo(LocalDateTime.now()) <= 0) {
161.                     log.info("WebSocket " + entry.getKey() + " 已到存活时间，自动断开连接");
162.                     try {
163.                         entry.getValue().getSession().close();
164.                     } catch (IOException e) {
165.                         log.error("WebSocket 连接关闭失败: " + entry.getKey() + " - " + e.getMessage());
166.                     }
167.                     //过期则进行移除
168.                     iterator.remove();
169.                 }
170.             }
171.             sendMessage(FORMAT.format(new Date()));
172.         }
173.     }
175.     /**
176.      * 群发信息的方法
177.      *
178.      * @param message 消息
179.      */
180.     public void sendMessage(String message) {
181.         System.out.println("给所有APP用户发送消息:" + message + "，时间：" + DateUtils.getCurrentDateString());
182.         //循环客户端map发送消息
183.         uavWebSocketInfoMap.values().forEach(item -> {
184.             //向每个用户发送文本信息。这里getAsyncRemote()解释一下，向用户发送文本信息有两种方式，
185.             // 一种是getBasicRemote，一种是getAsyncRemote
186.             //区别：getAsyncRemote是异步的，不会阻塞，而getBasicRemote是同步的，会阻塞，由于同步特性，第二行的消息必须等待第一行的发送完成才能进行。
187.             // 而第一行的剩余部分消息要等第二行发送完才能继续发送，所以在第二行会抛出IllegalStateException异常。所以如果要使用getBasicRemote()同步发送消息
188.             // 则避免尽量一次发送全部消息，使用部分消息来发送
189.             item.getSession().getAsyncRemote().sendText(message);
190.         });
191.     }
193.     /**
194.      * 给指定用户发送消息
195.      */
196.     public void sendUserMessage(Long userId, String message) throws IOException {
197.         System.out.println("给APP用户 [" + userId + "] 发送消息:" + message + "，时间：" + DateUtils.getCurrentDateString());
198.         ClientInfoEntity clientInfoEntity = uavWebSocketInfoMap.get(userId);
199.         if (clientInfoEntity != null && clientInfoEntity.getSession() != null) {
200.             if (clientInfoEntity.getSession().isOpen()) {
201.                 clientInfoEntity.getSession().getBasicRemote().sendText(message);
202.             }
203.         }
204.     }
206. }

复制代码

6. 规划

目前实现的功能非常有限，仅仅是一个基础的Demo，后面会基于这个出版，做一些迭代开发，规划如下：

• 后台客服聊天页面，做一个APP端用户列表，可以选择和指定的用户聊天
  
• APP端做一个好友列表，然后好友之间可以互相聊天
  
• 支持发送基本的表情
  

有爱好的可以加入！


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。