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()实现状态的检测和数据的传输。

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

用户登录界面

WebSocket实现及时通信

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

一对一消息推送

WebSocket实现及时通信

用户接收消息界面

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

WebSocket实现及时通信

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

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

WebSocket实现及时通信

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

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

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

版权声明:程序员胖胖胖虎阿 发表于 2022年9月1日 上午3:24。
转载请注明:WebSocket实现及时通信 | 胖虎的工具箱-编程导航

相关文章

暂无评论

暂无评论...