一、技术介绍
线上演示地址:http://chat.breez.work
实时通信
(Instant Messaging,简称IM)是一个实时
通信系统,允许两人或多人使用网络实时的传递文字消息
、文件
、语音
与视频交流
。[4]
场景再现:
- 微信聊天
- QQ聊天
- 网站在线客服
1.1 客户端WebSocket
WebSocket
对象提供了用于创建和管理 WebSocket 连接,以及可以通过该连接发送
和接收数据
的 API。使用 WebSocket() 构造函数来构造一个 WebSocket。[1]
构造函数如下所示:
const webSocket = WebSocket(url[, protocols])
例子如下:
const webSocket = new WebSocket("ws://42.193.120.86:3688/ws/小明/翠花")
1.1.1 函数
1、 webSocket.send()
该函数用于向服务端发送一条消息,例子如下:
webSocket.send("Hello server!");
2、 webSocket.close()
该函数用于关闭客户端与服务端的连接,例子如下:
webSocket.close();
1.1.2 事件
1、webSocket.onopen
该事件用于监听客户端与服务端的连接状态,如果客户端与服务端连接成功
则该事件触发,例子如下:
webSocket.onopen = function(event) { console.log("连接已经建立,可以进行通信"); };
2、webSocket.onclose
如果服务端与客户端连接断开,那么此事件出发,例子如下:
webSocket.onclose = function(event) { console.log("连接已经关闭"); };
3、webSocket: message event
该事件用于监听服务端向客户端发送的消息,例子如下:
webSocket.addEventListener('message', function (event) { console.log('来自服务端的消息:', event.data); });
4、webSocket:error event
如果客户端与服务端发生错误时,那么此事件将会触发,例子如下:
webSocket.addEventListener('error', function (event) { console.log('连接出现错误', event); });
1.2 服务端WebSocket
@ServerEndpoint
用于声明一个socket服务,例子如下:
@ServerEndpoint(value = "/ws/{userId}/{targetId}")
几个重要的方法
注解:
@OnOpen
打开连接@OnClose
监听关闭@OnMessage
发送消息@OnError
监听错误
二、实战
2.1、服务端
2.1.1引入maven依赖
org.springframework.boot spring-boot-starter-websocket
2.1.2 编写配置类
@Configuration public class WebSocketConfig { @Bean public ServerEndpointExporter serverEndpointExporter() { return new ServerEndpointExporter(); } }
2.1.3 编写WebSocketService服务类
下面的userId
代表发送者
的ID号,target
代表发送目标
ID号。
@Component @ServerEndpoint(value = "/ws/{userId}/{target}") public class WebSocketService { //用于保存连接的用户信息 private static ConcurrentHashMapSESSION = new ConcurrentHashMap<>(); //原子递增递减,用于统计在线用户数 private static AtomicInteger count = new AtomicInteger(); //消息队列,用于保存待发送的信息 private Queue queue = new LinkedBlockingDeque<>(); //onOpen() //onClose() //onMessage() //onError() }
2.1.4 建立连接
建立连接之前,判断用户是否已经连接,如果没有连接,那么将用户session信息保存到集合,然后计数器递增。
@OnOpen public void onOpen(Session session, @PathParam("userId") String userId) { if (!SESSION.containsKey(userId)) { SESSION.put(userId, session); count.incrementAndGet(); } }
2.1.5 关闭连接
关闭连接的时候,将用户session删除和计数器递减。
@OnClose public void onClose(@PathParam("userId") String userId) { SESSION.remove(userId); count.decrementAndGet(); }
2.1.6 发送消息
发送采用的方法是:session.getBasicRemote().sendText("你好");
@OnMessage public void onMessage(String message, @PathParam("userId") String userId, @PathParam("target") String target) throws IOException { queue.add(message); Session s = SESSION.get(target); if (s == null) { Session b = SESSION.get(userId); b.getBasicRemote().sendText("对方不在线"); } else { for (int i = 0; i < queue.size(); i++) { String msg = queue.poll(); Message m = new Message(); m.setUserId(userId); s.getBasicRemote().sendText(msg); } } }
2.1.7 监听错误
出现错误,删除用户session信息和计数器递减
@OnError public void onError(Throwable error, @PathParam("userId") String userId) { SESSION.remove(userId); count.decrementAndGet(); error.printStackTrace(); }
2.2 客户端
本案例中客户端采用Nuxt编写,相关代码如下
2.2.1 主页面
运行截图如图所示:
欢迎使用喵喵号聊天聊一下
2.2.1 聊天页面
运行截图如下:
小明
翠花
我的喵喵号:{{user.userId}} 对方喵喵号:{{user.targetId}} 清空消息 {{m.msg}} {{m.msg}} 系统消息:{{m.msg}}发送
三、开源地址
Gitee:https://gitee.com/BreezAm/websocket
演示地址:http://chat.breez.work
四、参考文献
[1]MDN:WebSocket
[2]Nuxt:https://nuxtjs.org
[3]Vue:https://cn.vuejs.org
[4]百度百科:及时通信
到此这篇关于SpringBoot整合websocket实现即时通信聊天的文章就介绍到这了,更多相关SpringBoot websocket即时通信内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!