使用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