WebSocket实现及时通信

使用WebSocket实现及时通信

简单的WebSocket及时通讯Demo地址
WebSocket实现聊天功能

https://blog.csdn.net/qq_51076413/article/details/124644500

技术栈：

后端主要使用的是：SpringBoot-2.1.x ＋ WebSocket + Redis + Mysql + Mybatis-Plus + Thymeleaf

前端主要使用的是：HTML5 + JQuery + emoji表情包

描述：该即时通讯功能采用的是WebSocket技术实现长连接的消息推送功能，该功能简单模仿了QQ的聊天窗口，支持emoji表情包的发送，支持一对一的消息推送，支持群发的功能。

简介：
该功能通过用户输入账号和密码，后台去MySQL中获取数据并返回给前台，前台对数据进行展示，表示登录成功
登录成功后，后台使用RedisTemplate模板 将必要数据放到Redis中缓存
用户登录成功后，跳转到聊天界面，在聊天界面通过let webSocket = new WebSocket(``ws://${host}/webSocket/${userId}``);建立连接
前台通过ws.onopen()、ws.onmessage()、ws.onclose()、ws.onerror()实现状态的检测和数据的传输。

下面通过图片简单看下效果把。。。。

用户登录界面

登录成功后的聊天界面（发送消息给指定用户）

一对一消息推送

用户接收消息界面

用户接收到消息后会显示接收到的并且未读消息条数（未查看才会有）

当点击查看了消息，未读条数将会消失

此时便实现了一对一消息的发送和接收
右下角通过群发的模式，将消息推送给所有在线的用户

该Demo的代码暂未贴出来，可以去看下下面的Demo代码，实现原理是一样的

简单的WebSocket及时通讯Demo地址
WebSocket实现聊天功能

https://blog.csdn.net/qq_51076413/article/details/124644500