Spring Boot整合WebSocket：实现实时前后端交互

最新推荐文章于 2024-09-12 11:16:58 发布

小馬锅

最新推荐文章于 2024-09-12 11:16:58 发布

阅读量1k

点赞数 15

本文链接：https://blog.csdn.net/weixin_42513209/article/details/141593944

版权

本文还有配套的精品资源，点击获取 menu-r.4af5f7ec.gif

简介：Spring Boot和WebSocket的结合，为Spring Boot应用提供了实时通信能力。通过添加WebSocket依赖、配置端点、处理连接和消息发送，开发者可以轻松实现前后端数据交换。前端使用JavaScript库连接WebSocket服务并订阅消息，后端通过注解处理连接请求和消息发送。此整合在实时聊天、股票交易等场景中广泛应用。

1. Spring Boot整合WebSocket概述

WebSocket是一种全双工的通信协议，它允许客户端和服务器之间进行实时双向通信。Spring Boot提供了对WebSocket的支持，使开发人员能够轻松地将WebSocket集成到他们的应用程序中。通过使用Spring Boot整合WebSocket，可以实现诸如即时消息、在线游戏和协作编辑等实时交互功能。

2. WebSocket依赖添加

WebSocket依赖的添加方式主要分为两种：Maven依赖添加和Gradle依赖添加。

2.1 Maven依赖添加

在pom.xml文件中添加以下依赖：

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

2.2 Gradle依赖添加

在build.gradle文件中添加以下依赖：

dependencies {
    implementation 'org.springframework.boot:spring-boot-starter-websocket'
}

添加依赖后，需要在Spring Boot应用程序中启用WebSocket支持。可以在application.properties文件中添加以下配置：

spring.websocket.enabled=true

3. WebSocket端点配置

3.1 WebSocket端点注解

WebSocket端点是WebSocket服务器处理客户端请求的入口，Spring Boot提供了 @WebSocket 注解来标识一个类为WebSocket端点。 @WebSocket 注解有以下几个属性：

value ：指定WebSocket端点的路径，客户端通过该路径连接到服务器。
path ：与 value 属性相同，指定WebSocket端点的路径。
subprotocols ：指定WebSocket端点支持的子协议，客户端在连接时可以指定要使用的子协议。
maxTextMessageBufferSize ：指定WebSocket端点接收的最大文本消息大小，单位为字节。
maxBinaryMessageBufferSize ：指定WebSocket端点接收的最大二进制消息大小，单位为字节。

@WebSocket("/websocket")
public class WebSocketEndpoint {

    // 省略代码

}

3.2 WebSocket端点方法

WebSocket端点类中可以定义以下几个方法来处理客户端连接和消息：

onOpen ：当客户端连接到服务器时调用。
onClose ：当客户端断开连接时调用。
onMessage ：当客户端发送消息到服务器时调用。
onError ：当WebSocket连接发生错误时调用。

@WebSocket("/websocket")
public class WebSocketEndpoint {

    @OnOpen
    public void onOpen(Session session) {
        // 省略代码
    }

    @OnClose
    public void onClose(Session session) {
        // 省略代码
    }

    @OnMessage
    public void onMessage(Session session, String message) {
        // 省略代码
    }

    @OnError
    public void onError(Session session, Throwable throwable) {
        // 省略代码
    }

}

4. WebSocket连接处理

4.1 WebSocket连接建立

当客户端发起WebSocket连接请求时，Spring Boot会自动创建WebSocketSession对象，并调用WebSocket端点中带有@OnOpen注解的方法。该方法负责处理连接建立后的操作，例如发送欢迎消息或初始化会话数据。

@OnOpen
public void onOpen(WebSocketSession session) {
    // 发送欢迎消息
    session.sendMessage(new TextMessage("欢迎加入WebSocket聊天室！"));
    // 初始化会话数据
    session.getAttributes().put("username", "匿名用户");
}

4.2 WebSocket连接关闭

当客户端关闭WebSocket连接或连接异常中断时，Spring Boot会自动调用WebSocket端点中带有@OnClose注解的方法。该方法负责处理连接关闭后的操作，例如清理会话数据或发送关闭通知。

@OnClose
public void onClose(WebSocketSession session) {
    // 清理会话数据
    session.getAttributes().remove("username");
    // 发送关闭通知
    session.sendMessage(new TextMessage("您已退出WebSocket聊天室。"));
}

5. WebSocket消息发送

5.1 WebSocket消息类型

WebSocket消息类型主要分为以下三种：

文本消息（Text Message）： 以文本形式发送的消息，可以使用 String 类型表示。
二进制消息（Binary Message）： 以二进制形式发送的消息，可以使用 byte[] 类型表示。
Pong消息（Pong Message）： 服务器端用于响应客户端的Ping消息，用于保持连接的存活。

5.2 WebSocket消息发送方式

Spring Boot中发送WebSocket消息有两种主要方式：

5.2.1 使用 `SimpMessagingTemplate` 发送消息

SimpMessagingTemplate 是Spring Boot提供的用于发送WebSocket消息的模板类。它提供了以下方法：

public void convertAndSend(String destination, Object payload);
public void convertAndSendToUser(String user, String destination, Object payload);

convertAndSend(String destination, Object payload) ：向所有订阅指定 destination 的客户端发送消息。
convertAndSendToUser(String user, String destination, Object payload) ：向指定用户订阅的 destination 发送消息。

5.2.2 使用 `WebSocketSession` 发送消息

WebSocketSession 代表了一个WebSocket连接，它提供了以下方法：

public void sendMessage(WebSocketMessage<?> message);

sendMessage(WebSocketMessage<?> message) ：向当前连接的客户端发送消息。

代码块：

// 使用SimpMessagingTemplate发送文本消息
SimpMessagingTemplate template = ...;
template.convertAndSend("/topic/greetings", "Hello, world!");

// 使用WebSocketSession发送二进制消息
WebSocketSession session = ...;
byte[] data = ...;
WebSocketMessage<byte[]> message = new BinaryMessage(data);
session.sendMessage(message);

逻辑分析：

第一个代码块使用 SimpMessagingTemplate 向所有订阅 /topic/greetings 的客户端发送文本消息。
第二个代码块使用 WebSocketSession 向当前连接的客户端发送二进制消息。

6. 前端WebSocket交互

6.1 WebSocket客户端连接

前端WebSocket客户端连接步骤如下：

创建WebSocket对象 ：使用 WebSocket 类创建WebSocket对象，并指定WebSocket服务器的URL。

var websocket = new WebSocket("ws://localhost:8080/websocket");

监听WebSocket事件 ：为WebSocket对象添加事件监听器，监听WebSocket连接的建立、关闭、消息接收等事件。

websocket.onopen = function() {
    console.log("WebSocket连接已建立");
};

websocket.onclose = function() {
    console.log("WebSocket连接已关闭");
};

websocket.onmessage = function(event) {
    console.log("收到WebSocket消息：" + event.data);
};

建立WebSocket连接 ：调用WebSocket对象的 open() 方法建立WebSocket连接。

websocket.open();

6.2 WebSocket客户端消息发送和接收

消息发送

准备消息数据 ：准备要发送的消息数据，可以是文本、二进制数据或JSON对象。
发送消息 ：调用WebSocket对象的 send() 方法发送消息。

websocket.send("Hello WebSocket");

消息接收

监听消息接收事件 ：在WebSocket客户端中添加消息接收事件监听器。
处理消息 ：在消息接收事件监听器中处理接收到的消息。

websocket.onmessage = function(event) {
    console.log("收到WebSocket消息：" + event.data);
};

7. Spring Boot整合WebSocket实战

7.1 WebSocket服务器端实现

在Spring Boot中，我们可以使用WebSocket注解和方法来配置WebSocket端点。下面是一个简单的WebSocket服务器端实现：

@SpringBootApplication
public class WebSocketServerApplication {

    public static void main(String[] args) {
        SpringApplication.run(WebSocketServerApplication.class, args);
    }

    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }

    @Endpoint
    @ServerEndpoint("/websocket")
    public static class WebSocketServerEndpoint {

        @OnOpen
        public void onOpen(Session session) {
            System.out.println("WebSocket连接已建立：" + session.getId());
        }

        @OnMessage
        public void onMessage(String message, Session session) {
            System.out.println("收到WebSocket消息：" + message);
            session.getBasicRemote().sendText("服务端已收到消息：" + message);
        }

        @OnClose
        public void onClose(Session session) {
            System.out.println("WebSocket连接已关闭：" + session.getId());
        }

        @OnError
        public void onError(Throwable t) {
            System.out.println("WebSocket连接发生错误：" + t.getMessage());
        }
    }
}

7.2 WebSocket客户端实现

在前端，我们可以使用WebSocket API来连接WebSocket服务器端。下面是一个简单的WebSocket客户端实现：

const socket = new WebSocket("ws://localhost:8080/websocket");

socket.onopen = function() {
    console.log("WebSocket连接已建立");
};

socket.onmessage = function(event) {
    console.log("收到WebSocket消息：" + event.data);
};

socket.onclose = function() {
    console.log("WebSocket连接已关闭");
};

socket.onerror = function(error) {
    console.log("WebSocket连接发生错误：" + error.message);
};

document.getElementById("send-button").onclick = function() {
    const message = document.getElementById("message-input").value;
    socket.send(message);
};

本文还有配套的精品资源，点击获取 menu-r.4af5f7ec.gif