2025年网页聊天源码（web聊天源码）

大家好，我是讯享网，很高兴认识大家。

 <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg>

讯享网

首先了解Mapper

在MyBatis中，Mapper用于定义与数据库交互的方法。这些方法通常用于执行CRUD（创建、读取、更新、删除）操作和其他与数据库相关的任务。
在MyBatis中，Mapper接口使用Java定义，其中包含与您要对数据库执行的SQL语句或查询相对应的方法签名。这些方法可以使用MyBatis的基于XML或注解的配置来将SQL语句映射到方法调用。
Mapper的主要目的是以一种清晰和有组织的方式定义应用程序中的数据库操作。它有助于将数据库访问逻辑与应用程序的其他业务逻辑分离，从而更容易管理和维护代码库。通过使用Mapper，您可以以声明性和类型安全的方式编写与数据库相关的代码，这是使用MyBatis作为对象-关系映射（ORM）框架的主要优势之一。
websocket的步骤
建立连接请求、服务器响应握手请求、WebSocket 连接建立、数据交换、保持连接以及连接关闭
websocket的特点

实现会话列表和好友列表的切换

讯享网

实现注册登录

在UserMapper.xml里实现对于数据库中的查找操作

讯享网

在通过UserMapper和数据库进行连接查询操作时，是可以对数据库中要查询的#{username} 和#{password} 进行一个取别名的操作的，然后方便的是，在进行UserController里面，可以使用取的别名来作为参数，也可以使用User类中的属性名作为参数（如果参数是myUsername也可以使用）

利用的是DuplicateKeyException 这个异常，来进行防止用户名重复的注册

实现获取用户登录信息

先设定一下请求和响应
请求：请求类型是get
路径是 userinfo
响应：body里面应该有
当前登录用户的userId
username（用户名）
密码可能也会返回，但是此时的密码要设置为空，否则在客户端抓包的时候就能抓到了
UserController里面实现的

讯享网

客户端代码

讯享网

1、先判断一下，返回响应中的body里的 userId是不是一个空值
2、定位到需要设置的username的地方，代码里面叫做userDiv
3、把userDiv的值给设置为body里面的username
4、把当前登录用户的userId 给设置到userDiv 的属性中

5、如果用户没有登录的话，就跳转到登录页面

实现获取好友列表

先进行friend表的设计
好友是多对多的，所以一个用户可以对应很多个好友

所以friend表设计如上
进行前后端交互的设计
定义Friend类

讯享网

Mapper中定义和数据库交互的方法

数据库操作
● 这里因为在friend表中，只有两个字段，friendId和userId 所以在查询的时候，要从friend表中查询到和当前登录信息相同userId的的friend,体现在friendId上面
● 就是要查询到与userId对应的friendId，此处的friendId就相当于user表中的userId 根据在user表中查到的userId可以在 user表中获取到friend的friendName，后面可以使用

讯享网

获取到好友列表
● 因为好友有很多，是一个列表，返回时候采用list进行返回
● 先从请求中的session中获取到当前登录的用户，如果获取不到session或者获取不到用户就返回空的列表
● 通过从user中获取到的userId来进行查找好友

客户端实现
1、先选中好友列表，把好友列表刷新清空
2、从返回的响应中读取到每个对象中的内容
3、把响应中读取到的friendId设置到li的属性中，以备后用
4、把当前的标签添加到好友列表中

讯享网

★★★要实现的功能
1、点击会话，变为高亮状态
2、点击好友列表中的好友，如果会话存在，置顶会话，并设置为高亮状态
会话不存在，就创建会话，置顶会话，并设置为高亮状态

实现获取会话列表

前后端交互的设计：

实现数据库设计：

在message_session 数据库中，有sessionId和lastTime
在message_session_user 数据库中，有sessionId和userId

创建MessageSession
考虑到在客户端界面上要显示
好友名称最近一条消息如图显示

MessageSessionItem类来表示数据库中的一条记录

讯享网

在Mapper中定义与数据库交互的方法
● 首先要通过当前登录的用户id 来找到userId所在的所有sessionId
● 再根据这些sessionId来找到所有会话列表

讯享网

1、先从请求的session中获取到session 根据session中获取到user
2、messageSessionMapper来调用查找方法，找到登录的userId中所有的sessionId
3、遍历这个列表，列表中的每个元素都是一个sessionId
4、根据每个sessionId可以查出对应的抛除登录用户的好友名称
5、这是消息传输模块需要完成的，获取历史消息

客户端
1、选中会话列表，进行清空操作
2、创建li标签，里面对应的是会话中好友的名称和消息
3、把响应中的sessionId 添加到当前的li标签的属性中
4、把会话添加到会话列表中

讯享网

添加点击事件

客户端

1、点击某个好友，先在findSessionByName 中查询friend对应的会话是否存在
这是因为在前面的获取friendlist里面注册了一个friend的点击事件

2、在findSessionByName内，选择session-list中的所有的li标签，如果session中的username和点击的好友的名字相同，就返回这个会话，表示这个会话存在，否则就返回空
3、接下来，根据sessionLi是否为空来进入条件语句,不为空直接把这个sessionLi添加到好友列表的第一位，并且置为选中状态
4、如果不存在，就要创建新的会话，再把friend的名称给设置到会话列表的会话中，再把这条会话给设置到会话列表的第一个位置，然后状态是被选中状态，因为新添加的会话没有注册点击事件，所以要先添加点击事件
5、之后就是进行往数据库中添加这条会话，是creatSession
6、创建会话需要进行前后端交互的设计

讯享网

实现创建会话

前后端交互设计

服务器

讯享网

MessageSessionMapper：

MessageSessionMapper.xml

讯享网

实现的功能：
1、获取到历史消息，历史消息的内容不能超过100条，并且按照会话创建的时间进行排序
会话过多的时候，要自动滚动到最下方
先设计message表

现在就是构造消息，往message表中去添加一些消息
我们想要获取到历史最近的一条消息，放到会话列表中进行显示

实现获取到指定会话最近一条消息

MessageMapper中：

讯享网

实现获取到会话历史消息

在之前的clickSession中，我们想要做到点击会话，设置为高亮选中状态，并且在右侧的消息主界面上面显示到所有的历史消息

设计前后端交互：

首先根据message的设计，当前发送者的fromName不知道是谁，名字在user表中有，
所以要把user表和message表进行一个联合查询，使用fromId和userId作为连接条件
MessageMapper.xml

讯享网

MessageMapper

讯享网

客户端

WebSocket是一种在单个TCP连接上进行全双工通信的协议，它允许浏览器与服务器之间进行实时的双向数据传输。与传统的HTTP请求-响应模式不同，WebSocket允许服务器主动向客户端推送数据，而不需要客户端发起请求。

用户a通过自己的WebSocket连接发送消息给服务器。
服务器收到a发送的消息，并识别出目标用户是b。
服务器找到与用户b关联的WebSocket连接。
服务器将a的消息直接发送给用户b的WebSocket连接。
用户b的WebSocket连接接收到服务器发送的消息。

在进行客户端和服务器通信时，如下图

请求和响应也略有不同

1、先实现客户端发送消息

a) ● 先获取到发送按钮和输入框
● 给发送按钮注册一个点击事件，当输入框中的值不存在时
● 获取到当前选中标签的sessionId（在之前创建会话的时候已经保存了），
也有可能当前标签没有被选中（刚登录的时候）
● 构造req的请求，当前的req是一个js对象，但是websocket中发送的应该是一个JSON格式的字符串，所以用JSON.stringify来把js对象转换成json格式的字符串
● 通过websocket来发送这个json字符串
●把输入框中的内容置为空

讯享网

2、实现服务器接收/转发消息

首先，该类使用了 @Configuration 注解，表示它是一个 Spring 的配置类，会被 Spring 容器扫描并加载。
@EnableWebSocket 注解用于启用 WebSocket 功能。
WebSocketConfigurer 接口是 Spring 提供的用于配置 WebSocket 的接口，通过实现该接口，可以注册 WebSocket 处理器和配置 WebSocket 相关信息。
在这个配置类中，注入了两个 WebSocket 处理器：TestWebSocketController 和 WebSocketController。
在 registerWebSocketHandlers 方法中，通过 WebSocketHandlerRegistry 对象注册了 WebSocketController 作为处理器，同时指定了 WebSocket 的请求路径为 “/WebSocketMessage”。
使用 addInterceptors 方法注册了 HttpSessionHandshakeInterceptor 拦截器，这个拦截器的作用是将用户的 HttpSession 中添加的 Attribute 键值对也添加到 WebSocketSession 中。这样在 WebSocketController 中的 afterConnectionEstablished 方法中可以通过 session.getAttributes().get(“user”) 来获取到用户的信息，包括 HttpSession 中的信息

讯享网

● 当客户端连接到服务器的时候，因为之前在http的session.setAttribute(“user”)中存储了，所以可以拿到userId 就会从httpsession中获取到 userId
然后把这个userId用onlineUserManager.online(user.getUserId(),session)添加到websocketsession中去
●当一个客户端请求消息发过来后，因为是一个json格式的字符串，所以通过jackson工具把这个字符串转换为java对象
如果载荷中的类型是message 的话就要进行下面的转发
●然后把这个请求给重新构造，准备发送给别的客户端，因为构造出来的是一个响应的对象，所以通过jackson库工具进行了转换，转成了json字符串
●然后要根据这个会话的会话id来获取到这个会话中的所有的用户，因为在req中已经知道了这个会话的sessionId，但是此时前面的实现中获取到好友列表是不能获取到自己的，所以就要把自己添加到好友列表中，
●循环获取到的好友列表，进行消息的发送，通过webSocketSession.sendMessage 中把respJson构造成一个文本对象，发送给其他客户端

3、实现客户端接收消息

一、在右侧的消息列表中显示（必须保证当前是被选中状态才可以）
二、在左侧的会话预览区域要显示
1.如果会话存在，要把会话设置为置顶状态
2.如果会话不存在，要创建会话，把会话加入到会话列表中，设置为置顶状态
3.把新的消息设置到会话的预览区域，如果消息太长要进行截断
4.如果当前收到消息的会话处于被选中状态，则把当前的消息给放到右侧消息列表中
新增消息的同时，注意调整滚动条的位置，保证新消息虽然在底部，但是能被直接看到

讯享网

源码保存在： 网页聊天程序 https://gitee.com/duan-duan-wang/chatroom