spring boot 集成websocket demo 实现对话功能
时间: 2023-10-29 10:17:39 浏览: 114
Spring boot整合websocket实现即时通讯demo(适合新手或者开发人员学习)
5星 · 资源好评率100%
好的,以下是一个简单的 Spring Boot 集成 WebSocket 的 Demo,可以实现简单的对话功能:
1. 首先,在 pom.xml 中引入 Spring Boot 和 WebSocket 的依赖:
```xml
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
```
2. 创建一个 WebSocket 配置类,用于配置 WebSocket 相关的内容:
```java
@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
@Override
public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
registry.addHandler(new WebSocketHandler(), "/chat");
}
}
```
3. 创建一个 WebSocketHandler 类,用于处理 WebSocket 的连接和消息:
```java
public class WebSocketHandler extends TextWebSocketHandler {
private final List<WebSocketSession> sessions = new ArrayList<>();
@Override
public void afterConnectionEstablished(WebSocketSession session) {
sessions.add(session);
}
@Override
protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
for (WebSocketSession s : sessions) {
s.sendMessage(message);
}
}
}
```
4. 在 Controller 中添加一个映射,用于返回聊天页面:
```java
@Controller
public class ChatController {
@GetMapping("/")
public String index() {
return "chat";
}
}
```
5. 创建一个 HTML 页面,用于展示聊天界面和发送消息:
```html
<!DOCTYPE html>
<html>
<head>
<title>Chat</title>
</head>
<body>
<div id="messages"></div>
<form id="message-form">
<input type="text" id="message-input">
<button type="submit">Send</button>
</form>
<script src="/webjars/jquery/jquery.min.js"></script>
<script src="/webjars/sockjs-client/sockjs.min.js"></script>
<script src="/webjars/stomp-websocket/stomp.min.js"></script>
<script>
var stompClient = Stomp.over(new SockJS("/chat"));
stompClient.connect({}, function() {
stompClient.subscribe("/chat", function(message) {
$("#messages").append("<p>" + message.body + "</p>");
});
});
$("#message-form").submit(function(event) {
event.preventDefault();
var message = $("#message-input").val();
stompClient.send("/chat", {}, message);
$("#message-input").val("");
});
</script>
</body>
</html>
```
这个 Demo 中,前端使用了 SockJS 和 STOMP.js 这两个库来实现 WebSocket 的连接和消息发送。后端使用了 Spring Boot 的 WebSocket 功能来处理 WebSocket 的连接和消息。前端和后端通过 /chat 这个 URL 进行连接。
这个 Demo 可以在本地启动后,通过访问 http://localhost:8080/ 来进入聊天界面。多个浏览器窗口之间可以进行简单的对话。
阅读全文