1. 首页
  2. 软件开发
  3. Spring Boot——如何使用WebSocket实现实时的双向通信

Spring Boot——如何使用WebSocket实现实时的双向通信

  • 发布于 2024-08-17
  • 0 次阅读

Spring Boot提供了对WebSocket的支持,使得实现实时的双向通信变得更加容易。

详细步骤如下:

1. 添加WebSocket依赖

在 pom.xml 文件中添加Spring WebSocket的依赖:

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

2. 创建WebSocket配置类

创建一个WebSocket配置类,用于注册WebSocket端点和消息处理器:

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;

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
   

    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
   
        registry.addHandler(new MyWebSocketHandler(), "/ws").setAllowedOrigins("*");
    }
}

3. 创建WebSocket处理器

创建一个WebSocket处理器来处理WebSocket消息:

import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;

public class MyWebSocketHandler extends TextWebSocketHandler {
   

    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
   
        // 处理收到的消息
        String payload = message.getPayload();
        session.sendMessage(new TextMessage("Received: " + payload));
    }
}

4. 在前端页面使用WebSocket

在前端页面中使用JavaScript来连接WebSocket并发送/接收消息:

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

socket.onopen = function() {
   
    console.log("WebSocket connection established.");
};

socket.onmessage = function(event) {
   
    console.log("Message received: " + event.data);
};

function sendMessage() {
   
    var message = "Hello, WebSocket!";
    socket.send(message);
}

通过以上步骤,可以实现基本的WebSocket支持。WebSocket使得在Web应用中实现实时的双向通信变得更加简单和高效。

原文链接: https://blog.csdn.net/2401_82884096/article/details/138335181