在 Spring Boot 中实现 WebSocket 通信

WebSockets 是一种功能强大的技术，可实现客户端与服务器之间的实时双向通信。它们广泛应用于聊天系统、实时更新和在线游戏等应用中。Spring Boot 通过提供对 WebSocket API 的内置支持，可以轻松实现 WebSocket 通信。在本文中，我们将探讨如何在 Spring Boot 应用程序中设置 WebSocket 通信，并以创建一个简单的聊天应用程序为例进行说明。

设置项目

使用 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