基于SpringBoot WebSocket模块实现消息的即时推送

liangxiny

于 2025-04-17 23:01:24 发布

阅读量1.1k

点赞数 21

CC 4.0 BY-SA版权

分类专栏： websocket 文章标签： websocket springboot

本文链接：https://blog.youkuaiyun.com/liangjiyong/article/details/147187949

websocket 专栏收录该内容

1 篇文章

订阅专栏

前言

在现代Web应用中，实时消息推送已经成为基础需求。相比传统的轮询方式，WebSocket提供了真正的全双工通信能力。本文将演示如何在SpringBoot中通过集成WebSocket来实现服务端向前端推送通知消息。

一、WebSocket简介

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。它使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。WebSocket 的出现解决了传统 HTTP 协议在实时通信方面的不足，广泛应用于实时聊天、在线游戏、股票行情推送等场景。

1. WebSocket 的核心特点

全双工通信：客户端和服务端可以同时发送和接收数据，无需等待对方响应。
低延迟：避免了传统 HTTP 协议中频繁的请求-响应开销，显著降低延迟。
节省带宽：WebSocket 使用帧格式传输数据，比传统的 HTTP 请求更高效，节省了带宽
简化开发：WebSocket 提供了简单的 API，使得开发实时应用变得更加容易。
跨域支持：需服务端配置 Origin 白名单。

2. WebSocket 与其他技术对比

技术	实时性	资源消耗	兼容性	适用场景
WebSocket	高	中等	较好	实时通知、聊天
HTTP轮询	低（延迟高）	高	极好	简单状态更新
长轮询	中等	中等	较好	小型实时应用
Server-Sent Events (SSE)	单向推送	低	较好	单向通知

3. WebSocket 的局限性

复杂性：比 RESTful API 更难调试和维护。
兼容性：部分老旧浏览器不支持 WebSocket。
资源消耗：长时间保持连接可能增加服务器负载，会话过多导致内存泄露。
分布式环境：会话分散问题、消息同步问题、状态一致性问题。
安全性：需额外配置（如 WSS 加密）以防止中间人攻击。

二、WebSocket后台实现

1. 环境准备

组件	版本
JDK	>=17
Spring Boot	3.x
Maven	3.9.9

2. 添加pom依赖

引入spring-boot-starter-web、spring-boot-starter-websocket两个依赖

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

spring-boot-starter-web：快速构建web应用‌、支持restful服务‌、内嵌servlet容器如tomcat等。
spring-boot-starter-websocket：提供WebSocket的支持。

3. 添加配置类

package com.example.websocket.config;

import com.example.websocket.handler.MyWebSocketHandler;
import org.springframework.context.annotation.Bean;
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(notificationHandler(), "/ws/notifications")
                .setAllowedOriginPatterns("*");
    }

    @Bean
    public MyWebSocketHandler notificationHandler() {
        return new MyWebSocketHandler();
    }
}

@EnableWebSocket注解启用原生 WebSocket功能。
registerWebSocketHandlers方法主要干了两件事，一是配置websocket访问端点 ws://localhost:8080/ws/notifications。二是跨域问题处理，*允许所有域访问，也可以指定具体域名，并支持通配符。

4. 添加消息处理类

package com.example.websocket.handler;

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

import java.io.IOException;
import java.util.concurrent.CopyOnWriteArrayList;

public class MyWebSocketHandler extends TextWebSocketHandler {
    
    private final CopyOnWriteArrayList<WebSocketSession> sessions = new CopyOnWriteArrayList<>();

    @Override
    public void afterConnectionEstablished(WebSocketSession session) {
        sessions.add(session);
        System.out.println("客户端连接成功: " + session.getId());
    }

    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) {
        // 处理客户端发来的消息（可选）
        String payload = message.getPayload();
        System.out.println("收到客户端消息: " + payload);
    }

    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) {
        sessions.remove(session);
        System.out.println("客户端断开连接: " + session.getId());
    }

    // 向单个客户端发送消息
    private void sendMessage(WebSocketSession session, String message) {
        try {
            if (session.isOpen()) {
                session.sendMessage(new TextMessage(message));
            }
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    // 向所有客户端广播消息
    public void broadcast(String message) {
        sessions.forEach(session -> sendMessage(session, message));
    }
}

TextWebSocketHandler：处理文本消息的核心类，可重写方法，处理连接建立、关闭、错误等事件。

afterConnectionEstablished：连接成功时触发。
afterConnectionClosed：连接关闭时触发。
handleTransportError：传输错误时触发。
handleTextMessage：处理客户端发送的数据。

BinaryWebSocketHandler：处理二进制数据如图片、文件等。

5. 添加controller模拟发送数据

package com.example.websocket.controller;

import com.example.websocket.handler.MyWebSocketHandler;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class MessageController {
    
    @Autowired
    private MyWebSocketHandler simpleWebSocketHandler;

    @GetMapping("/msg")
    public void sendMsg() {
        simpleWebSocketHandler.broadcast("您有新的订单，请及时查收");
    }
}

三、WebSocket前台实现

1. 环境准备

组件	版本
Node.js	v22.14.0
Vue	3.5.13
Vite	6.2.0

2. 创建Vue项目
npm create vite@latest vue3-websocket --template vue

3. 创建Websocket.vue文件

<template>
  <div>
    <div>Connection Status: {{ isConnected ? 'Connected' : 'Disconnected' }}</div>
    <input
        v-model="message"
        @keyup.enter="sendMessage"
        placeholder="Type message..."
    />
    <button @click="sendMessage" :disabled="!isConnected">Send</button>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'
const wsUrl = 'ws://localhost:8080/ws/notifications'
let socket: WebSocket | null = null
// 响应式状态
const isConnected = ref(false)
const messages = ref<string[]>([])
const message = ref('')
// 初始化连接
const connect = () => {
  socket = new WebSocket(wsUrl)
  socket.onopen = () => {
    isConnected.value = true
    messages.value.push("连接成功")
  }
  socket.onmessage = (event) => {
    console.log("收到服务端消息:" + event.data)
  }
  socket.onerror = (error) => {
    console.error('连接错误:', error)
  }
  socket.onclose = () => {
    isConnected.value = false
    messages.value.push("连接关闭")
  }
}
// 发送消息
const sendMessage = () => {
  if (message.value.trim() && socket) {
    socket.send(message.value)
  }
}
// 生命周期钩子
onMounted(() => {
  connect()
})
onBeforeUnmount(() => {
  if (socket) {
    socket.close()
  }
})
</script>
<style scoped>
.messages {
  margin: 20px 0;
  padding: 10px;
  border: 1px solid #ccc;
  height: 300px;
  overflow-y: auto;
}
.message {
  padding: 5px;
  margin: 5px 0;
  background-color: #f0f0f0;
}
input {
  margin-right: 10px;
  padding: 5px;
}
button {
  padding: 5px 15px;
  cursor: pointer;
}
</style>