WebSockets 是一种功能强大的技术,可实现客户端与服务器之间的实时双向通信。它们广泛应用于聊天系统、实时更新和在线游戏等应用中。Spring Boot 通过提供对 WebSocket API 的内置支持,可以轻松实现 WebSocket 通信。在本文中,我们将探讨如何在 Spring Boot 应用程序中设置 WebSocket 通信,并以创建一个简单的聊天应用程序为例进行说明。
![在 Spring Boot 中实现 WebSocket 通信](https://www.nxrte.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
设置项目
使用 Spring Initializr 创建一个新的 Spring Boot 项目,其中包含以下依赖项:
- Spring Web
- Spring Boot WebSocket
添加依赖项
将必要的依赖项添加到 pom.xml
(适用于 Maven)或 build.gradle
(适用于 Gradle)文件中。
pom.xml:
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
build.gradle:
dependencies {
implementation 'org.springframework.boot:spring-boot-starter-web'
implementation 'org.springframework.boot:spring-boot-starter-websocket'
}
配置 WebSocket
创建一个 WebSocket 配置类,用于注册 WebSocket 端点和配置消息处理。
WebSocketConfig.java:
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
@Override
public void configureMessageBroker(MessageBrokerRegistry config) {
config.enableSimpleBroker("/topic");
config.setApplicationDestinationPrefixes("/app");
}
@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint("/ws").withSockJS();
}
}
在此配置中
@EnableWebSocketMessageBroker
启用由消息代理支持的 WebSocket 消息处理。configureMessageBroker
(配置消息代理)为传出消息配置/topic 目的地前缀,为传入消息配置/app 前缀。registerStompEndpoints
使用 SockJS 回退选项注册 WebSocket 端点 /ws。
创建消息模型
为客户端和服务器之间交换的消息定义一个模型类。
请使用 ChatMessage.java:
public class ChatMessage {
private String content;
private String sender;
private MessageType type;
public enum MessageType {
CHAT, JOIN, LEAVE
}
// Getters and setters
}
创建 WebSocket 控制器
创建一个控制器来处理传入的 WebSocket 消息并将其广播给已连接的客户端。
ChatController.java:
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.messaging.simp.SimpMessageHeaderAccessor;
import org.springframework.stereotype.Controller;
@Controller
public class ChatController {
@MessageMapping("/chat.sendMessage")
@SendTo("/topic/public")
public ChatMessage sendMessage(ChatMessage chatMessage) {
return chatMessage;
}
@MessageMapping("/chat.addUser")
@SendTo("/topic/public")
public ChatMessage addUser(ChatMessage chatMessage, SimpMessageHeaderAccessor headerAccessor) {
headerAccessor.getSessionAttributes().put("username", chatMessage.getSender());
return chatMessage;
}
}
在此控制器中:
@MessageMapping 将收到的消息映射到 /app/chat.sendMessage 和 /app/chat.addUser 目标地址。
@SendTo 将返回的消息发送到 /topic/public 目的地,并广播给所有连接的客户端。
创建前端
创建一个带有 JavaScript 的 HTML 文件,用于连接到 WebSocket 服务器并处理消息。
index.html:
<!DOCTYPE html>
<html>
<head>
<title>WebSocket Chat</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.4.0/sockjs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>
<script>
var stompClient = null;
function connect() {
var socket = new SockJS('/ws');
stompClient = Stomp.over(socket);
stompClient.connect({}, function (frame) {
console.log('Connected: ' + frame);
stompClient.subscribe('/topic/public', function (message) {
showMessage(JSON.parse(message.body));
});
});
}
function sendMessage() {
var messageContent = document.getElementById("message").value;
if(messageContent && stompClient) {
var chatMessage = {
sender: document.getElementById("username").value,
content: messageContent,
type: 'CHAT'
};
stompClient.send("/app/chat.sendMessage", {}, JSON.stringify(chatMessage));
document.getElementById("message").value = '';
}
}
function showMessage(message) {
var messageElement = document.createElement('li');
messageElement.appendChild(document.createTextNode(message.sender + ": " + message.content));
document.getElementById('messages').appendChild(messageElement);
}
window.onload = function() {
connect();
};
</script>
</head>
<body>
<div>
<input type="text" id="username" placeholder="Enter your name"/>
<input type="text" id="message" placeholder="Enter your message"/>
<button onclick="sendMessage()">Send</button>
</div>
<ul id="messages"></ul>
</body>
</html>
在本例中:
- 使用 SockJS 和 Stomp.js 连接到 WebSocket 服务器。
- connect 建立 WebSocket 连接并订阅 /topic/public 目的地。
- sendMessage 向服务器发送消息。
- showMessage 显示收到的信息。
运行应用程序
创建主应用程序类并运行应用程序。
请参见 DemoApplication.java:
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class DemoApplication {
public static void main(String[] args) {
SpringApplication.run(DemoApplication.class, args);
}
}
启动 Spring Boot 应用程序,在Web浏览器中打开 index.html 文件。输入用户名和信息,加入聊天并与其他已连接的客户端进行实时交流。
结论
WebSockets 为在网络应用程序中实现实时双向通信提供了一种强大的方式。Spring Boot 内置 WebSocket 支持,可以轻松创建和管理 WebSocket 连接。通过本教程,您可以建立一个基本的 WebSocket 聊天应用程序,并探索进一步的增强功能,以构建更复杂的实时应用程序。
本教程使用 ChatGPT(具体来说是 Master Spring TER 模型)生成。
作者:Spring Ter
本文来自作者投稿,版权归原作者所有。如需转载,请注明出处:https://www.nxrte.com/jishu/im/49426.html