基于 WebSocket 的在线聊天系统

Github 源码：boot-chat 欢迎 star，fork 支持

由于本人也在学习，技术有限。如果项目有问题，可以反馈、如果你有更好的解决方案请尽快联系我，谢谢~

线上地址

Chat

注意！注意！注意！

当前版本中，使用 HTTPSession 储存的 WebSocket 会话消息（包括登录用户信息），因此就不可避免的会遇到 Session 不能被共享导致的数据丢失。

因此，在我部署的线上地址上可能出现数据丢失。如果是测试学习，请使用同一个浏览器换用不同用户登录，就不会产生上述问题了。

SO，后续我会使用 Redis 储存 WebSocket 的会话消息（当前版本的优点就是开箱即用，只需要 JDK 环境即可运行项目打包 jar ）。

正在开发中，欢迎 star、fork 关注哦~~

介绍

基于 SpringBoot-2.1.5、SpringBoot-Starter-Websocket 构建，前端使用 Vue.js 、ElementUI 框架。

实现了：

• HttpSession 消息储存
• 单窗口消息推送
• 群发消息推送
• 上线提醒
• 实时刷新用户列表、消息列表

找 虫子 无聊之余，可以来耍一耍！

特点

因为 WebSocket 的特性，虽然能实时接收到消息，但每次刷新浏览器，之前发送过的消息都会丢失，因此这里实现了消息储存功能。

利用 HttpSession，将每次会话，用户推送的消息都储存到 HttpSession 中。前端利用 Vue 的 created() 钩子函数，每次刷新页面时都先请求获取 HTTPSession 中已储存的消息列表。

因为涉及到单窗口推送消息、群发消息的限定：

这里规定了 HttpSession 中会话消息的前缀标识，以此来区分不同的消息，具体参看：CommonConstant.java

• CHAT_COMMON_PREFIX = "CHAT_COMMON_": 群发消息 Session Key 前缀标识

• CHAT_FROM_PREFIX = "CHAT_FROM_": 推送方 Session Key 前缀标识

• CHAT_TO_PREFIX = "_TO_": 接收方 Session Key 前缀标识

文档

看了上图你大概知道了 HTTPSession 中储存的消息格式，下面 Debug 看下具体的消息内容，供大家学习参考：

群发消息

这里使用一个固定的官方群组窗口，展示每个用户群发的消息。

消息特点：

• 多个用户发送
• 每个用户发送多条消息

So，HTTPSession 中储存的群发消息应该有以下约定：

• Session Key 中包含用户的 ID 标识
• Session Value 应该储存着该 Key 用户的所有消息（可使用 List 集合储存）

栗子：

单窗口消息推送

对于给指定窗口消息，需要考虑以下几点：

• 推送方是谁？接收方是谁？
• 推送方可能会推送多条消息，并且推送方可能会给多个窗口推送消息。
• 如何区分是公共消息还是指定窗口消息？

So，HTTPSession 中储存的但窗口消息应该有以下约定：

• Session Key 应该包含推送方 ID 标识和接收方 ID 标识，以此区分给多个窗口推送
• Session Value 应该储存着该推送方给该接受方推送的所有消息（ List 集合）

栗子：

运行&&部署

# 运行

$ git clone https://github.com/TyCoding/boot-chat
-- use idea & eclipse run

# 部署

$ mvn clean package
$ cd taget
$ java -jar boot-chat-0.0.1-SNAPSHOT.jar

Access http://localhost:8080 using Chrome

关于我

传送门

预览