1. 添加依赖
首先，在 `pom.xml` 文件中添加 `spring-boot-starter-
websocket` 依赖：
```
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-
websocket</artifactId>
</dependency>
```
2. 配置
WebSocket
在 `Application` 类中，添加 `@Enable
WebSocket` 注解开启
WebSocket支持，并实现 `
WebSocketConfigurer` 接口：
```
@SpringBootApplication
@Enable
WebSocket
public class Application implements
WebSocketConfigurer {
public static void main(String[] args) {
SpringApplication.run(Application.class, args);
}
@Override
public void register
WebSocketHandlers(
WebSocketHandlerRegistry registry) {
registry.addHandler(new
WebSocketHandler(), "/chat").setAllowedOrigins("*");
}
}
```
这里创建了一个名为 `chat` 的
WebSocket处理器，并指定允许所有来源的连接。
3. 编写
WebSocketHandler
创建 `
WebSocketHandler` 类，并实现 `
WebSocketHandler` 接口：
```
public class
WebSocketHandler implements org.springframework.web.socket.
WebSocketHandler {
private static final Logger logger = LoggerFactory.getLogger(
WebSocketHandler.class);
private final List<
WebSocketSession> sessions = new CopyOnWriteArrayList<>();
@Override
public void afterConnectionEstablished(
WebSocketSession session) throws Exception {
logger.info("New session connected: " + session.getId());
sessions.add(session);
}
@Override
public void handleMessage(
WebSocketSession session,
WebSocketMessage<?> message) throws Exception {
logger.info("Received message: " + message.getPayload());
for (
WebSocketSession s : sessions) {
s.sendMessage(message);
}
}
@Override
public void handleTransportError(
WebSocketSession session, Throwable exception) throws Exception {
logger.error("Error in transport", exception);
}
@Override
public void afterConnectionClosed(
WebSocketSession session, CloseStatus closeStatus) throws Exception {
logger.info("Session closed: " + session.getId());
sessions.remove(session);
}
@Override
public boolean supportsPartialMessages() {
return false;
}
}
```
这里定义了一个静态的 `sessions` 列表，用于保存所有连接的
WebSocket会话。在 `afterConnectionEstablished` 方法中，将新建立的会话添加到 `sessions` 列表中。在 `handleMessage` 方法中，遍历所有
WebSocket会话，将接收到的消息发送给所有客户端。
4. 编写前端页面
在 `resources/static` 目录下创建一个 `index.html` 文件，用于展示聊天室页面，并实现
WebSocket的连接和发送消息功能：
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
WebSocket Chat</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
var ws;
function connect() {
var username = $("#username").val();
if (!username) {
alert("Please enter your username!");
return;
}
ws = new
WebSocket("ws://" + location.host + "/chat");
ws.onopen = function(event) {
console.log("
WebSocket opened: " + event);
ws.send(username + " joined the chat.");
};
ws.onmessage = function(event) {
console.log("
WebSocket message received: " + event.data);
$("#messages").append($("<li>").text(event.data));
};
ws.onerror = function(event) {
console.error("
WebSocket error: " + event);
};
ws.onclose = function(event) {
console.log("
WebSocket closed: " + event);
$("#messages").append($("<li>").text("
WebSocket connection closed."));
};
}
function send() {
var message = $("#message").val();
if (!message) {
alert("Please enter your message!");
return;
}
ws.send($("#username").val() + ": " + message);
$("#message").val("");
}
</script>
</head>
<body>
<h1>
WebSocket Chat</h1>
<div>
<label>Username:</label>
<input type="text" id="username">
<button onclick="connect()">Connect</button>
</div>
<div>
<label>Message:</label>
<input type="text" id="message">
<button onclick="send()">Send</button>
</div>
<ul id="messages"></ul>
</body>
</html>
```
在页面加载时，通过 `
WebSocket` 构造函数创建一个
WebSocket对象，并指定连接的URL。在连接建立后，通过 `send` 方法向服务器发送消息。在接收到消息时，在页面上显示消息内容。
5. 启动应用
最后，运行 `Application` 类的 `main` 方法启动应用。
访问 `http://localhost:8080`，即可进入聊天室页面。输入用户名后点击 `Connect` 按钮连接
WebSocket服务器，即可开始聊天。
本文介绍了在Spring Boot项目中使用WebSocket时遇到404错误的解决过程。错误出现在前端尝试访问WebSocket时，尝试了引入jar包、配置WebSocketConfig，但问题仍未解决。最终发现是因为缺少了在WebSocket的实现类上添加@Component注解，以便让Spring管理该类。添加注解后，连接成功。
最低0.47元/天 解锁文章
3119
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
