SpringBoot+websocket 实现web聊天功能（单聊、保存消息） |
您所在的位置：网站首页 › 在线客服聊天记录 › SpringBoot+websocket 实现web聊天功能（单聊、保存消息） |
SpringBoot+websocket 实现web聊天功能（单聊、保存消息）
|
目录
一、前言
二、什么是websocket？
三、websocket API介绍
四、数据库表设计
（一）需求分析（参考csdn私信功能）
（二）表的设计
（三）聊天逻辑
（四）Sql语句
五、前端页面
（一）简单前端代码
（二）页面展示
（三）页面说明
六、后端业务处理
（一）引入依赖
（二）websocket配置类
（三）websocket监听器
（四）chatMessage实体类
（五）websocket实现类
（六）chatService业务层接口
七、开发中遇到的bug
一、前言
这篇文章主要是分享一次web聊天功能开发的过程。在文章中首先会简单介绍什么是websocket和websocket的API；然后再详细地介绍功能的实现，其中包括了数据库表的设计、简单前端页面的编写、接口的编写等。从基本的页面前端到后端一体式地开发分享。如果你已经对websocket有所了解，你可以直接跳到对应的编码部分进行阅读。 二、什么是websocket？问题思考：在你们没有了解到在web端通信时要使用websocket之前，你们是通过什么方式来进行web端之间的通信的？ 在我没有了解到websocket的时候，我想到的是站内信，即延时通信。欸，到这里很多小伙伴就会问，什么是站内信呢？其实就是客户端发一个请求然后服务器端响应一个请求（BS模型）。在实际的聊天中，可以理解为客户端A发送一条消息给客户端B，消息通过请求提交给服务器，然后服务器进行一个数据库的存储。这时候，服务器端是不会自动将这条消息转发给客户端B的，必须是要客户端B向服务器发送请求是否存在未读消息，服务器才会响应这条未读消息。客户端B会对服务器轮询，不间断地发送请求，看是否存在着未读消息，消耗服务器的资源和带宽。 websocket是一个管道式的编程，建立一条客户端与服务器之间的通道，持续连接。 websocket protocol 是HTML5的一种协议。它实现了浏览器与服务器全双工通信(full-duplex)。通过第一次HTTP Request成功建立了连接通道（握手连接）之后，后续的数据传送都不用再重新发送HTTP Request。 HTTP 与 WebSocket 的主要区别： （1）new webSocket(target); 创建websocket对象，客户端与服务器建立连接通道。 var ws = new WebSocket(‘ws://localhost:8080/websocket’);（2）webSocket.readyState readyState属性返回实例对象的当前状态，共有四种。CONNECTING：值为0，表示正在连接。OPEN：值为1，表示连接成功，可以通信了。CLOSING：值为2，表示连接正在关闭。CLOSED：值为3，表示连接已经关闭，或者打开连接失败。 （3）webSocket.onopen 实例对象的onopen属性，用于指定连接成功后的回调函数。 ws.onopen = function(){ }（4）webSocket.onclose 实例对象的onclose属性，用于指定连接关闭后的回调函数。 （5）webSocket.onmessage 实例对象的onmessage属性，用于指定收到服务器数据后的回调函数。 注意，服务器数据可能是文本，也可能是二进制数据（blob对象或Arraybuffer对象） （6）webSocket.send() 实例对象的send()方法用于向服务器发送数据。 （7）webSocket.bufferedAmount 实例对象的bufferedAmount属性，表示还有多少字节的二进制数据没有发送出去，它可以用来判断发送是否结束。 （8）webSocket.onerror 实例对象的onerror属性，用于指定报错时的回调函数。 四、数据库表设计在数据库表的设计中，我参考了其他博主的文章，也对其设计进行了一点改动。 博主文章：实现类似微信聊天功能的mysql表设计 （一）需求分析（参考csdn私信功能） 在一个web网站中，实际上大多数情况下时通过搜索该用户，查看其个人信息页面，然后对其进行私信或者是通过浏览该用户发布的内容，进行私信联系。点击按钮之后，会跳转到聊天列表页面。 在聊天列表页面中，会展示与曾经交流过的用户列表，在每一列中会出现的数据是用户名、用户头像、最后一条消息内容、最后一条消息的发送时间、未读数。当点击了私信按钮之后，跳转到聊天列表页面中，在第一列会是当前私信的对象，若是第一次聊天，没有数据返回；若不是第一次聊天，则会返回近期的聊天记录。 点击某个聊天列时，进入到聊天窗口，获取对应的聊天记录，将当前用户的聊天列表的记录的状态改为在线。
在简单的需求分析之后，开始对表的字段以及表之间的关系进行设计。（其他博主的设计的基础上） 用户聊天关系表（chat_user_link） link_id（主键id） from_user（发送方用户名，用户表主键） to_user（接收方用户名，用户表主键） create_time（创建时间） 聊天列表表（chat_list） list_id（主键id，自增） link_id（用户聊天关系表主键） from_user（发送方用户名） to_user（接收方用户名） from_window（发送方是否在窗口） to_window（接收方是否在窗口） unread（未读数） status（列表状态，是否删除） 聊天内容详情表（chat_message） message_id（主键id，自增） link_id（用户聊天关系表主键） from_user（发送方用户名） to_user（接收方用户名） content（消息内容） send_time（发送时间） type（类型） is_latest（是否是最后一条消息） 这个表结构的设计是最终版本的设计，所以看到从开头看到这里的小伙伴会有点懵懵的，不要紧，你先试着先去了解一下，后面会对某些字段进行说明。（注：每个系统的表的设计是按照其需求去设计的，不同的需求会有不同的设计，如当前系统的用户表的主键是用户名，所以我用了用户名作为聊天关系表的外键与用户表进行一个关联。）欸，很多小伙伴就会说了，你为什么会在三个表中都出现了link_id，from_user，to_user这三个字段呢？简单说明一下就是为了简化数据表的查询，有意地进行数据的冗余，不必要去过多去多表查询。 （三）聊天逻辑点击私信按钮 判断是不是第一次聊天，如果是会在主表生成一条记录返回用户聊天关系表id，并在聊天列表表分别插入两条记录，如果不是第一次聊天进入下一步 进入聊天对话框 获取近期几条聊天记录，将用户在此对话的窗口（from_window）改为1，即表示在线 发送聊天信息 3.1、先判断对方是否在线，不在线的话对方未读数+1 3.2、将上一条最后一条消息状态改为否 3.3、往聊天详情表插入聊天信息数据 （四）Sql语句 CREATE TABLE `chat_user_link` ( `link_id` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '聊天主表id', `from_user` varchar(30) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '发送者', `to_user` varchar(30) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '接收者', `create_time` datetime(0) NULL DEFAULT NULL COMMENT '创建关联时间', PRIMARY KEY (`link_id`) USING BTREE, INDEX `fk_link_user1`(`from_user`) USING BTREE, INDEX `fk_link_user2`(`to_user`) USING BTREE, CONSTRAINT `fk_link_user1` FOREIGN KEY (`from_user`) REFERENCES `user` (`username`) ON DELETE RESTRICT ON UPDATE RESTRICT, CONSTRAINT `fk_link_user2` FOREIGN KEY (`to_user`) REFERENCES `user` (`username`) ON DELETE RESTRICT ON UPDATE RESTRICT ) ENGINE = InnoDB CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic; -- ---------------------------- CREATE TABLE `chat_list` ( `list_id` int(0) NOT NULL AUTO_INCREMENT COMMENT '聊天列表主键', `link_id` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '聊天主表id', `from_user` varchar(30) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '发送者', `to_user` varchar(30) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '接收者', `from_window` tinyint(0) NULL DEFAULT NULL COMMENT '发送方是否在窗口', `to_window` tinyint(0) NULL DEFAULT NULL COMMENT '接收方是否在窗口', `unread` int(0) NULL DEFAULT NULL COMMENT '未读数', `status` tinyint(0) NULL DEFAULT NULL COMMENT '是否删除', PRIMARY KEY (`list_id`) USING BTREE, INDEX `fk_list_link`(`link_id`) USING BTREE, INDEX |
【本文地址】
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |