WebSocket实战，玩转前后端通信！Spring Boot带你轻松搞定！

后端

2023-10-01 15:04:14

Spring Boot + WebSocket：实现实时通信的终极指南

在当今互联网应用中，实时通信已成为必不可少的元素。从社交聊天到协作工具，它贯穿于各种应用场景。WebSocket技术应运而生，为我们提供了突破性的解决方案。

什么是WebSocket？

WebSocket是一种双向通信协议，允许客户端和服务器在建立连接后持续通信，无需不断地发送HTTP请求和响应。它特别适用于需要实时数据传输的应用，如聊天室、在线游戏和协作平台。

Spring Boot集成WebSocket

Spring Boot是一个轻量级的微服务开发框架，它简化了各种技术的集成。对于WebSocket，只需几个简单的步骤即可：

1. 创建Spring Boot项目

使用Spring Boot CLI或Initializr网站创建一个新的项目。

2. 引入WebSocket依赖

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

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

3. 创建WebSocket控制器

继承WebSocketHttpHeadersHandler类创建一个控制器，处理客户端连接和消息。

public class MyWebSocketHandler extends WebSocketHttpHeadersHandler {

    @Override
    public void afterConnectionEstablished(WebSocketSession session) { ... }

    @Override
    public void handleMessage(WebSocketSession session, WebSocketMessage<?> message) { ... }

    @Override
    public void handleTransportError(WebSocketSession session, Throwable exception) { ... }

}

4. 配置WebSocket端点

在application.properties中配置WebSocket端点：

spring.websocket.base-path=/websocket

其中/websocket是端点路径。

5. 创建客户端

使用Stomp.js等WebSocket库建立客户端连接：

var socket = new SockJS('/websocket');
var stompClient = Stomp.over(socket);

发送和接收消息：

stompClient.connect({}, function(frame) {
    stompClient.subscribe('/topic/chat', function(message) { ... });
    stompClient.send('/app/chat', {}, 'Hello WebSocket!');
});

代码示例

我们以一个简单的聊天室为例，展示WebSocket的使用：

// Spring Boot WebSocket控制器
@Controller
public class ChatController {

    @Autowired
    private SimpMessagingTemplate messagingTemplate;

    @MessageMapping("/chat")
    public void handleChat(Message message) {
        messagingTemplate.convertAndSend("/topic/chat", message);
    }

}

// 客户端Stomp.js
var stompClient = Stomp.over(new SockJS('/websocket'));
stompClient.connect({}, function(frame) {
    stompClient.subscribe('/topic/chat', function(message) {
        console.log(message.body);
    });
    stompClient.send('/app/chat', {}, 'Hello!');
});