Spring boot 结合websocket实现聊天功能
时间: 2024-03-15 17:36:23 浏览: 13
1. 添加依赖
首先,在 `pom.xml` 文件中添加 `spring-boot-starter-websocket` 依赖:
```
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
```
2. 配置WebSocket
在 `Application` 类中,添加 `@EnableWebSocket` 注解开启WebSocket支持,并实现 `WebSocketConfigurer` 接口:
```
@SpringBootApplication
@EnableWebSocket
public class Application implements WebSocketConfigurer {
public static void main(String[] args) {
SpringApplication.run(Application.class, args);
}
@Override
public void registerWebSocketHandlers(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服务器,即可开始聊天。