校易淘实时私信聊天完整前后端代码实现

一、业务需求

1. 商品详情点击私信卖家，自动建立双方聊天会话；
2. 实时收发文字消息，消息气泡区分发送方 / 接收方；
3. 打开聊天窗口加载双方历史聊天记录；
4. 关闭页面断开连接，刷新页面自动重连，历史消息永久保存。

二、后端核心代码

1. ChatServer 服务端点，ConcurrentHashMap 保存在线用户会话
3. 历史消息查询接口，根据双方用户 id 分页查询聊天记录

三、前端聊天页面实现

1. 封装 ws 工具，页面加载初始化连接，携带当前登录用户 id；
2. 聊天窗口左侧展示对方信息、关联商品，右侧消息气泡；
3. 输入框回车发送消息，消息列表自动滚动到底部；
4. 页面挂载时调用接口加载历史聊天记录。

核心逻辑讲解

1. 点对点通讯：通过用户 id 匹配接收人，仅目标用户收到消息，不会全员广播；
2. 消息持久化：无论用户是否在线，消息全部存入数据库，上线后可查看历史记录；
3. 心跳重连解决页面刷新、网络波动导致的连接中断问题。