type
status
date
slug
summary
tags
category
icon
password
最近在项目中需要用到 WebSocket 进行通信。于是简单学习了一下，并且搭建了一个简易的聊天室，在此记录下并分享。
后端使用了 SpringBoot 集成的 WebSocket，前端使用了 Next.js。
PS：每一步都贴了详细的代码和注释，复制到项目里就能跑起来～
什么是 WebSocket
WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，它使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
Websocket 的优点在于：
- 可以与任何 Web 浏览器一起使用
- 传递二进制数据支持 JSON，XML 等格式
- 具有较低的延迟，从而可以实现更快的通信
- 在客户端和服务器之间保持长时间的连接，从而可以减少 HTTP 请求的数量。
SpringBoot 整合 WebSocket
话不多说，直接上代码。
首先创建 SpringBoot 项目，引入 WebSocket 依赖。
创建 WebSocketConfig：
定义 Message 类和 MessageType，用来表示消息类型。
创建 Controller：
创建一个事件监听器，用来处理会话断开连接的事件。
服务端就创建完成了，接下来创建前端。
前端连接 WebSocket
创建一个 Next.js 项目，然后安装
@stomp/stompjs 包。前端代码比较简单，为了演示，我把代码放在了同一个文件中：
测试运行效果
启动项目，访问
http://localhost:3000/chat?username=xxx。这里依次打开三个浏览器窗口：
通过查看浏览器的控制台，可以看到输出信息，主要是 STOMP 打印的 debug 日志，说明连接成功了。
下面是运行效果：
通过最左侧的窗口可以看到，每当有新用户加入，每个窗口都会显示出一条信息。之后在任意窗口中发送信息，也会广播给所有用户。
最后，因为我们实现了
handleWebSocketDisconnectListener，在用户断开连接时，也会向所有用户发送消息，效果如下：
总结
Spring Boot 整合 WebSocket 还是比较简单的，只需要引入 Spring Boot 的 WebSocket 依赖，并创建 WebSocketConfig 和 ChatController 类，一个最基本的功能就实现了。
客户端可以使用
@stomp/stompjs 包来连接 WebSocket 服务，通过订阅和发布消息实现前后端的实时通信。当然本文中的实例只是一个很简单的版本，并不支持消息存储、私聊等功能，如果大家有兴趣，可以点赞或留言，我会弄个 v2 版本出来。感谢 🙏
- Author:大胖猫
- URL:http://preview.tangly1024.com/article/223f4632-e87d-8057-a298-df99d9d22aca
- Copyright:All articles in this blog, except for special statements, adopt BY-NC-SA agreement. Please indicate the source!
