在线聊天使用了 SpringBoot+WebSocket 实现，为了保证用户隐私，所有的聊天数据都保存在系统本地，服务器只进行了数据转发。OK，那接下来，我们来看下大致的实现步骤。
32.1 服务端
服务端首先加入 websocket 依赖，如下：
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
创建 WebSocket 的配置类，如下：
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {
@Override
public void registerStompEndpoints(StompEndpointRegistry stompEndpointRegistry) {
stompEndpointRegistry.addEndpoint("/ws/endpointChat").withSockJS();
}
@Override
public void configureMessageBroker(MessageBrokerRegistry registry) {
registry.enableSimpleBroker("/queue","/topic");
}
}
这里我并未使用原生的 websocket 协议，而是使用了 websocket 的子协议 stomp，方便一些。消息代理既使用了 /queue ,又使用了 /topic ，主要是因为我这里既有点对点的单聊，也有发送系统消息的群聊。
创建 websocket 处理类 controller，如下：
@Controller
public class WsController {
@Autowired
SimpMessagingTemplate messagingTemplate;
@MessageMapping("/ws/chat")
public void handleChat(Principal principal, String msg) {
String destUser = msg.substring(msg.lastIndexOf(";") + 1, msg.length());
String message = msg.substring(0, msg.lastIndexOf(";"));
messagingTemplate.convertAndSendToUser(destUser, "/queue/chat", new ChatResp(message, principal.getName()));
}
}
消息协议很简单：发送来的消息，最后一个 ; 后面跟的是该条消息要发送到哪个用户，响应消息包含两个字段，一个是消息内容，一个是该条消息由谁发送。
OK，如此之后，我们的服务端就写好了，很简单。
32.2 前端
前端代码稍微复杂，我这里主要和小伙伴介绍下我的大致思路和核心代码，具体代码小伙伴可以 star 源码进行研究。
首先，当用户登录成功之后，我就发起 websocket 的连接，将 ws 连接起来，ws 的代码我主要写在了 store 中，如下：
connect(context){
context.state.stomp = Stomp.over(new SockJS("/ws/endpointChat"));
context.state.stomp.connect({}, frame=> {
context.state.stomp.subscribe("/user/queue/chat", message=> {
var msg = JSON.parse(message.body);
var oldMsg = window.localStorage.getItem(context.state.user.username + "#" + msg.from);
if (oldMsg == null) {
oldMsg = [];
oldMsg.push(msg);
window.localStorage.setItem(context.state.user.username + "#" + msg.from, JSON.stringify(oldMsg))
} else {
var oldMsgJson = JSON.parse(oldMsg);
oldMsgJson.push(msg);
window.localStorage.setItem(context.state.user.username + "#" + msg.from, JSON.stringify(oldMsgJson))
}
if (msg.from != context.state.currentFriend.username) {
context.commit("addValue2DotMap", "isDot#" + context.state.user.username + "#" + msg.from);
}
//更新msgList
var oldMsg2 = window.localStorage.getItem(context.state.user.username + "#" + context.state.currentFriend.username);
if (oldMsg2 == null) {
context.commit('updateMsgList', []);
} else {
context.commit('updateMsgList', JSON.parse(oldMsg2));
}
});
}, failedMsg=> {
});
}
连接成功之后，就可以准备接收服务端的消息了，接收到服务端的消息后，数据保存在 localStorage 中，保存格式是 当前用户名#消息发送方用户名:[{from:'消息发送方',msg:'消息内容'}] ，注意后面的是一个 json 数组，这两个人的聊天记录都将保存在这个数组中。在聊天展示页面，当数组中的数据发生变化时，自动更新。
在聊天页面，通过 stomp 发送消息，如下：
this.$store.state.stomp.send("/ws/chat", {}, this.msg + ";" + this.currentFriend.username);
每次发送成功后更新聊天页面即可。
核心代码基本如此，其他细节小伙伴可以 star 源码进行研究。
扫码关注微信公众号 江南一点雨，回复 2TB，获取超 2TB Java 学习教程~