返回

让 Websocket 开发更轻松：全套 SpringBoot 模板指南

后端

前言

WebSocket 是一种全双工的通信协议，能够实现客户端和服务器之间的实时双向通信，广泛应用于各种实时交互场景。本文将介绍如何使用 SpringBoot 构建一个 WebSocket 应用，提供一个完整的代码模板，包含后端和前端的实现，帮助你快速入门。

后端搭建

  1. 引入依赖
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
  1. 创建 WebSocket 配置类
@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {

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

}
  1. 实现 WebSocket 消息处理器
public class MyWebSocketHandler implements WebSocketHandler {

    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        System.out.println("连接已建立");
    }

    @Override
    public void handleMessage(WebSocketSession session, WebSocketMessage<?> message) throws Exception {
        String payload = (String) message.getPayload();
        System.out.println("收到消息: " + payload);
        session.sendMessage(new TextMessage("已收到消息: " + payload));
    }

    @Override
    public void handleTransportError(WebSocketSession session, Throwable exception) throws Exception {
        System.out.println("连接出现异常");
    }

    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus closeStatus) throws Exception {
        System.out.println("连接已关闭");
    }

}

前端测试

  1. 引入依赖
<script src="https://cdn.jsdelivr.net/npm/sockjs-client@1.5.1/dist/sockjs.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/stompjs@latest/lib/stomp.min.js"></script>
  1. 创建 WebSocket 连接
var socket = new SockJS('/websocket');
var stompClient = Stomp.over(socket);
stompClient.connect({}, function () {
    console.log('已连接');
});
  1. 发送消息
stompClient.send("/app/send", {}, JSON.stringify({message: 'Hello WebSocket!'}));

运行测试

在启动 SpringBoot 应用后，打开浏览器，访问 http://localhost:8080/websocket.html，即可进行 WebSocket 测试。在输入框中输入消息并点击发送按钮，即可向服务器发送消息。

结语

本指南提供了完整的 SpringBoot WebSocket 模板，包含后端和前端的实现，帮助你快速搭建 WebSocket 应用。你可以在此基础上进一步扩展和定制，满足你的实际需求。持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第22天，点击查看活动详情