RSocket vs WebSocket：Spring Boot 3.3 中的两大实时通信利器-阿里云开发者社区

RSocket vs WebSocket：Spring Boot 3.3 中的两大实时通信利器

2024-10-23 110

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 本文介绍了在 Spring Boot 3.3 中使用 RSocket 和 WebSocket 实现实时通信的方法。RSocket 是一种高效的网络通信协议，支持多种通信模式，适用于微服务和流式数据传输。WebSocket 则是一种标准协议，支持全双工通信，适合实时数据更新场景。文章通过一个完整的示例，展示了如何配置项目、实现前后端交互和消息传递，并提供了详细的代码示例。通过这些技术，可以大幅提升系统的响应速度和处理效率。

RSocket vs WebSocket：Spring Boot 3.3 中的两大实时通信利器

随着现代互联网应用的不断发展，实时通信已经成为许多应用程序不可或缺的功能。无论是社交网络、在线游戏还是数据监控系统，实时通信都能提供快速、无缝的信息交换。而实现实时通信的两种主要协议是 RSocket 和 WebSocket。

RSocket 是一种新的、先进的应用层协议，旨在提供高效的网络通信。与传统的请求/响应模式不同，RSocket 支持请求-响应、请求-流、流-流等多种模式，从而在微服务和流式数据传输中表现得更加灵活和高效。RSocket 的优势在于它可以在 TCP、WebSocket 等多种传输协议上运行，支持背压机制和多路复用，从而避免了资源的浪费，并保证了消息传递的可靠性。

WebSocket 是一种标准协议，允许客户端和服务器之间建立持久连接，客户端和服务器都可以主动发送消息。相较于传统的 HTTP 请求-响应模型，WebSocket 是全双工通信，即服务器可以实时向客户端推送数据，而不需要等待客户端发起请求，尤其适合实时数据更新场景。WebSocket 的使用场景广泛，涵盖了即时通讯、实时数据展示和多人在线游戏等。

运行效果：

若想获取项目完整代码以及其他文章的项目源码，且在代码编写时遇到问题需要咨询交流，欢迎加入下方的知识星球。

本文将结合 Spring Boot 3.3，详细讲解如何使用 RSocket 和 WebSocket 实现实时通信。我们将通过一个完整的示例，展示前后端交互、消息传递和双向通信的实际应用。文章还将结合具体的代码示例，演示如何从前端向后端发送消息，并在点击按钮时与服务器进行交互。

项目配置

项目依赖配置（pom.xml）

在 pom.xml 中引入 RSocket、WebSocket 以及其他必要的依赖。

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>3.3.3</version>
    <relativePath/> <!-- lookup parent from repository -->
  </parent>
  <groupId>com.icoderoad</groupId>
  <artifactId>rsocket-websocket-demo</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <name>rsocket-websocket-demo</name>
  <description>Demo project for Spring Boot</description>
  
  <properties>
    <java.version>17</java.version>
  </properties>
  <dependencies>
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter</artifactId>
    </dependency><!-- Spring Boot Web -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!-- RSocket 支持 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-rsocket</artifactId>
        </dependency>
        <!-- WebSocket 支持 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>
        <!-- Thymeleaf 模板引擎 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <!-- Lombok 支持 -->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <scope>provided</scope>
        </dependency>
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-test</artifactId>
      <scope>test</scope>
    </dependency>
  </dependencies>
  <build>
    <plugins>
      <plugin>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-maven-plugin</artifactId>
      </plugin>
    </plugins>
  </build>
</project>

应用配置（application.yml）

server:
  port: 8080
spring:
  rsocket:
    server:
      port: 7000
      transport: websocket
      mapping-path: /rsocket
  websocket:
    enabled: true
    mapping: /ws
app:
  rsocket-message: "这是来自 RSocket 的消息"
  websocket-message: "这是来自 WebSocket 的消息"

读取配置类 (RSocket 和 WebSocket 配置类)

我们使用 @ConfigurationProperties 注解读取配置文件中的 app 节点。这里使用 Lombok 来简化实体类的代码实现。

package com.icoderoad.rwebsocket.config;
import lombok.Data;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.stereotype.Component;
@Data
@Component
@ConfigurationProperties(prefix = "app")
public class AppProperties {
    
    private String rsocketMessage;
    
    private String websocketMessage;
    
}

RSocket 服务端实现

RSocket 提供了灵活的通信模型，允许服务端和客户端以流的方式交换数据。我们通过 @MessageMapping 来定义接收和处理客户端消息的方法。

package com.icoderoad.rwebsocket.controller;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.stereotype.Controller;
import com.icoderoad.rwebsocket.config.AppProperties;
import reactor.core.publisher.Mono;
@Controller
public class RSocketController {
    @Autowired
    private AppProperties appProperties;
    @MessageMapping("rsocket.message")
    public Mono<String> sendMessage(String input) {
        return Mono.just("RSocket服务端响应: " + input + " | " + appProperties.getRsocketMessage());
    }
}

WebSocket 服务端实现

WebSocket 服务端使用 Spring 提供的 TextWebSocketHandler 来处理消息。我们在收到客户端消息后，通过会话对象将响应发送回客户端。

package com.icoderoad.rwebsocket.controller;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;
import com.icoderoad.rwebsocket.config.AppProperties;
@Controller
public class WebSocketController extends TextWebSocketHandler {
    @Autowired
    private AppProperties appProperties;
    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
        String clientMessage = message.getPayload();
        String responseMessage = "WebSocket服务端响应: " + clientMessage + " | " + appProperties.getWebsocketMessage();
        session.sendMessage(new TextMessage(responseMessage));
    }
}

WebSocket 配置类

使用 WebSocketConfigurer 来注册 WebSocket 的处理器，并允许跨域访问。

package com.icoderoad.rwebsocket.config;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;
import com.icoderoad.rwebsocket.controller.WebSocketController;
@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
    private final WebSocketController webSocketController;
    public WebSocketConfig(WebSocketController webSocketController) {
        this.webSocketController = webSocketController;
    }
    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(webSocketController, "/ws")
                .setAllowedOrigins("*");
    }
}

前端实现

前端使用 Thymeleaf 渲染，并通过 jQuery 与后端的 RSocket 和 WebSocket 进行交互。用户可以输入消息，通过点击按钮发送到后端，并接收后端的响应。

在 src/main/resources/templates 目录下创建 index.html 文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RSocket & WebSocket Demo</title>
    
    <!-- 引入 Bootstrap 样式 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- 引入 jQuery 和 Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <!-- 引入 RSocket 库 -->
    <script src="/js/rsocket-core.min.js"></script>
    <script src="/js/rsocket-websocket-client.min.js"></script>
    <style>
        .message-box {
            max-height: 300px;
            overflow-y: auto;
            border: 1px solid #dee2e6;
            padding: 10px;
            border-radius: 0.25rem;
            background-color: #f8f9fa;
        }
        .message-box p {
            margin-bottom: 0.5rem;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="mt-5">RSocket & WebSocket Demo</h1>
        <!-- WebSocket 区域 -->
        <div class="mt-5">
            <h3>WebSocket 消息</h3>
            <div class="input-group mb-3">
                <input type="text" id="websocket-input" class="form-control" placeholder="输入 WebSocket 消息">
                <button id="send-websocket" class="btn btn-primary">发送 WebSocket 消息</button>
            </div>
            <div id="websocket-messages" class="message-box"></div>
        </div>
        <!-- RSocket 区域 -->
        <div class="mt-5">
            <h3>RSocket 消息</h3>
            <div class="input-group mb-3">
                <input type="text" id="rsocket-input" class="form-control" placeholder="输入 RSocket 消息">
                <button id="send-rsocket" class="btn btn-success">发送 RSocket 消息</button>
            </div>
            <div id="rsocket-messages" class="message-box"></div>
        </div>
    </div>
    <script>
        $(document).ready(function () {
            // WebSocket 连接
            const ws = new WebSocket("ws://localhost:8080/ws");
            ws.onmessage = function (event) {
                $("#websocket-messages").append(`<p>${event.data}</p>`);
            };
            // 发送 WebSocket 消息
            $("#send-websocket").click(function () {
                const message = $("#websocket-input").val();
                if (message.trim()) {
                    ws.send(message);
                    $("#websocket-input").val('');
                }
            });
            const { RSocketClient } = window['rsocket-core'];
            const { default: RSocketWebSocketClient } = window['rsocket-websocket-client'];
            // RSocket 客户端创建和连接
            async function createRSocketClient() {
                const transportOptions = {
                    url: 'ws://localhost:7001/rsocket',
                };
                const setupOptions = {
                    keepAlive: 60000,
                    lifetime: 180000,
                    dataMimeType: 'application/json',
                    metadataMimeType: 'message/x.rsocket.routing.v0',
                };
                const transport = new RSocketWebSocketClient(transportOptions);
                const client = new RSocketClient({
                    setup: setupOptions,
                    transport
                });
                try {
                    return await client.connect();
                } catch (error) {
                    console.error("RSocket 连接错误: ", error);
                    throw error;
                }
            }
            // 处理 RSocket 消息
            async function setupRSocket() {
                try {
                    const socket = await createRSocketClient();
                    $("#send-rsocket").click(function () {
                        const message = $("#rsocket-input").val();
                        if (message.trim()) {
                            socket.requestResponse({
                                data: message,
                                metadata: String.fromCharCode('rsocket.message'.length) + 'rsocket.message'
                            }).subscribe({
                                onComplete: (response) => {
                                    $("#rsocket-messages").append(`<p>${response.data}</p>`);
                                    $("#rsocket-input").val('');
                                },
                                onError: (error) => {
                                    console.error("RSocket 错误: ", error);
                                }
                            });
                        }
                    });
                } catch (error) {
                    console.error("启动 RSocket 客户端失败: ", error);
                }
            }
            setupRSocket();
        });
    </script>
</body>
</html>

总结

通过结合 RSocket 和 WebSocket，我们可以在 Spring Boot 3.3 中轻松实现高效的实时通信。RSocket 通过其多种通信模型和背压机制，为流式数据传输提供了强大的支持；WebSocket 则在全双工实时通信方面表现出色，适合需要即时数据更新的场景。通过本文的实例，读者可以在项目中灵活应用这两种技术，实现高效的消息交互。在前端，我们使用简单的输入框和按钮，演示了如何与服务器进行消息通信。这种方式不仅提升了用户体验，还能大幅提高系统的响应速度和处理效率。

RSocket vs WebSocket：Spring Boot 3.3 中的两大实时通信利器

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

RSocket vs WebSocket：Spring Boot 3.3 中的两大实时通信利器

热门文章

最新文章

相关课程

相关电子书

相关实验场景