SpringBoot＋WebSocket实现在线聊天（二）

本文是vhr系列第15篇，项目地址：https://github.com/lenve/vhr

在线聊天使用了SpringBoot+WebSocket实现，为了保证用户隐私，所有的聊天数据都保存在系统本地，服务器只进行了数据转发。OK，那接下来，我们来看下大致的实现步骤。

服务端

服务端首先加入websocket依赖，如下：

创建WebSocket的配置类，如下：

这里我并未使用原生的websocket协议，而是使用了websocket的子协议stomp，方便一些。消息代理既使用了,又使用了，主要是因为我这里既有点对点的单聊(queue)，也有发送系统消息的群聊(topic)。

创建websocket处理类Controller，如下：

消息协议很简单：发送来的消息，最后一个后面跟的是该条消息要发送到哪个用户，这里通过字符串截取将之提取出来。响应消息包含两个字段，一个是消息内容，一个是该条消息由谁发送。

OK，如此之后，我们的服务端就写好了，很简单。

前端

前端代码稍微复杂，我这里主要和小伙伴介绍下我的大致思路和核心代码，具体代码小伙伴可以star源码进行研究。

首先，当用户登录成功之后，我就发起websocket的连接，将ws连接起来，ws的代码我主要写在了store中，如下：

连接成功之后，就可以准备接收服务端的消息了，接收到服务端的消息后，数据保存在localStorage中，保存格式是 ，注意后面的是一个json数组，整个存储的key之所以用是为了避免同一个浏览器多个用户登录所产生的数据紊乱，OK，这样两个人的聊天记录都将保存在这个数组中。在聊天展示页面，当数组中的数据发生变化时，自动更新。

在聊天页面，通过stomp发送消息，如下：

注意每条消息的内容除了内容本身外，还要加上当前发送者的名字。

每次发送成功后更新聊天页面即可。更新聊天页面代码如下：

如果消息中的from字段的值，就是当前聊天的用户名，则是发送来的消息，否则就是发出去的消息，不同的消息设置不同的样式即可。

核心代码基本如此，但是琐碎的细节其实是比较多的，小伙伴可以star源码进行研究。

关注公众号，可以及时接收到最新文章: