SpringBoot+websocket 实现web聊天功能（单聊、保存消息）

一、前言

这篇文章主要是分享一次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 的主要区别：

三、websocket API介绍

（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私信功能）

1. 在一个web网站中，实际上大多数情况下时通过搜索该用户，查看其个人信息页面，然后对其进行私信或者是通过浏览该用户发布的内容，进行私信联系。点击按钮之后，会跳转到聊天列表页面。
2. 在聊天列表页面中，会展示与曾经交流过的用户列表，在每一列中会出现的数据是用户名、用户头像、最后一条消息内容、最后一条消息的发送时间、未读数。当点击了私信按钮之后，跳转到聊天列表页面中，在第一列会是当前私信的对象，若是第一次聊天，没有数据返回；若不是第一次聊天，则会返回近期的聊天记录。
3. 点击某个聊天列时，进入到聊天窗口，获取对应的聊天记录，将当前用户的聊天列表的记录的状态改为在线。

（二）表的设计

在简单的需求分析之后，开始对表的字段以及表之间的关系进行设计。（其他博主的设计的基础上）

1. 用户聊天关系表（chat_user_link）

   link_id（主键id）
   from_user（发送方用户名，用户表主键）
   to_user（接收方用户名，用户表主键）
   create_time（创建时间）

2. 聊天列表表（chat_list）

   list_id（主键id，自增）
   link_id（用户聊天关系表主键）
   from_user（发送方用户名）
   to_user（接收方用户名）
   from_window（发送方是否在窗口）
   to_window（接收方是否在窗口）
   unread（未读数）
   status（列表状态，是否删除）

3. 聊天内容详情表（chat_message）

   message_id（主键id，自增）
   link_id（用户聊天关系表主键）
   from_user（发送方用户名）
   to_user（接收方用户名）
   content（消息内容）
   send_time（发送时间）
   type（类型）
   is_latest（是否是最后一条消息）

这个表结构的设计是最终版本的设计，所以看到从开头看到这里的小伙伴会有点懵懵的，不要紧，你先试着先去了解一下，后面会对某些字段进行说明。（注：每个系统的表的设计是按照其需求去设计的，不同的需求会有不同的设计，如当前系统的用户表的主键是用户名，所以我用了用户名作为聊天关系表的外键与用户表进行一个关联。）欸，很多小伙伴就会说了，你为什么会在三个表中都出现了link_id，from_user，to_user这三个字段呢？简单说明一下就是为了简化数据表的查询，有意地进行数据的冗余，不必要去过多去多表查询。

（三）聊天逻辑

1. 点击私信按钮
   判断是不是第一次聊天，如果是会在主表生成一条记录返回用户聊天关系表id，并在聊天列表表分别插入两条记录，如果不是第一次聊天进入下一步

2. 进入聊天对话框
   获取近期几条聊天记录，将用户在此对话的窗口（from_window）改为1，即表示在线

3. 发送聊天信息

   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 `fk_list_user1`(`fr