<think>我们正在讨论使用WebSocket
实现实时站内通知功能。根据用户的需求，我们需要构建一个基于WebSocket的实时消息推送系统，用于站内通知。参考已有的引用内容，我们可以了解到：1. WebSocket是一种在单个TCP连接上进行全双工通信的协议，可以
实现服务器和客户端之间的实时双向通信。2.在Spring Boot中，我们可以通过配置WebSocket来启用消息代理，并使用STOMP协议（一种简单的消息传递协议）来简化开发。3.前端（如Vue）可以通过建立WebSocket连接来接收服务器推送的消息，并处理各种事件（如onopen,onmessage, onclose等）。
实现步骤大致如下：一、后端（SpringBoot）配置WebSocket1.添加依赖：在pom.xml中添加WebSocket和STOMP的依赖。2.创建配置类：启用WebSocket消息代理，并注册STOMP端点。3.创建消息控制器：用于处理客户端发送的消息和向特定目的地推送消息。二、前端（Vue）
实现WebSocket连接1.建立连接：使用WebSocketAPI或SockJS客户端连接到后端注册的STOMP端点。2.订阅目的地：订阅服务器端配置的消息代理目的地（如/topic/notifications）。3.处理消息：在接收到消息时更新前端状态，显示通知。4.关闭连接：在组件卸载时关闭连接。下面我们分别详细说明。###后端
实现首先，添加依赖（以Maven为例）：```xml<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId>
</dependency>```然后，创建WebSocket配置类：```javaimportorg.springframework.context.annotation.Configuration;import org.springframework.messaging.simp.config.MessageBrokerRegistry;import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
importorg.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;
@Configuration@EnableWebSocketMessageBrokerpublic classWebSocketConfig implementsWebSocketMessageBrokerConfigurer {@Overridepublicvoid registerStompEndpoints(StompEndpointRegistry registry) {//注册一个STOMP端点，客户端将使用它连接到我们的WebSocket服务器registry.addEndpoint("/ws") //端点路径.setAllowedOriginPatterns("*")//允许跨域，生产环境应指定具体域名.withSockJS(); //支持SockJS，以应对浏览器不支持WebSocket的情况}@Overridepublic voidconfigureMessageBroker(MessageBrokerRegistry registry) {//配置消息代理，设置消息代理的前缀，即客户端订阅地址的前缀registry.enableSimpleBroker("/topic"); //表示客户端可以订阅以/topic开头的主题//设置应用程序目的地的前缀，即客户端发送消息到服务器的前缀registry.setApplicationDestinationPrefixes("/app");//客户端发送消息到服务器需要以/app开头}
}```接着，创建一个消息控制器，用于接收客户端发送的消息，并向客户端推送通知：```javaimportorg.springframework.messaging.handler.annotation.MessageMapping;
importorg.springframework.messaging.handler.annotation.SendTo;
importorg.springframework.stereotype.Controller;
@Controllerpublic classNotificationController{//当客户端向/app/notify发送消息时，会调用此方法//然后此方法将返回的消息转发到/topic/notifications@MessageMapping("/notify")@SendTo("/topic/notifications")publicString sendNotification(Stringmessage){//这里可以处理消息，比如保存到数据库等return message; //将消息推送给所有订阅了/topic/notifications的客户端}}
```注意：实际应用中，我们可能不会让客户端直接触发通知，而是由服务器在某个事件（如新消息到达）时主动推送。这时，我们可以使用`SimpMessagingTemplate`来主动发送消息。例如，在服务层中：```javaimportorg.springframework.beans.factory.annotation.Autowired;
importorg.springframework.messaging.simp.SimpMessagingTemplate;
importorg.springframework.stereotype.Service;
@Servicepublic classNotificationService{@Autowiredprivate SimpMessagingTemplatemessagingTemplate;public voidsendNotification(String userId, Stringmessage){//发送给指定用户，这里假设用户订阅了/user/{userId}/notifications//注意：需要配置用户目的地（默认已启用）messagingTemplate.convertAndSendToUser(userId,"/notifications",message);//或者广播给所有用户// messagingTemplate.convertAndSend("/topic/notifications", message);}
}```为了支持发送给指定用户，我们需要在配置中启用用户目的地（默认已启用，无需额外配置）。然后，前端用户订阅时使用`/user/{userId}/notifications`。###前端
实现（Vue）在Vue组件中，我们可以使用`SockJS`和`stompjs`来建立连接。首先，安装sockjs-client和stompjs：```bashnpminstall sockjs-clientstompjs```然后，在Vue组件中：```vue<template><div><ul><li v-for="(notification, index) innotifications":key="index">{{ notification}}</li></ul></div>
</template><script>
importSockJS from'sockjs-client';import Stomp from'stompjs';
exportdefault {data() {return{notifications:[],stompClient:null};},mounted() {this.connect();},beforeDestroy(){this.disconnect();},methods:{connect(){//建立SockJS连接constsocket =new SockJS('http://localhost:8080/ws');this.stompClient =Stomp.over(socket);//连接服务器this.stompClient.connect({}, (frame)=> {console.log('Connected:' +frame);//订阅通知目的地（广播
方式）this.stompClient.subscribe('/topic/notifications',(notification) =>{//收到通知，添加到列表中this.notifications.push(JSON.parse(notification.body));});//如果按用户订阅，假设当前用户id为123//this.stompClient.subscribe(`/user/123/notifications`, (notification)=> {//this.notifications.push(JSON.parse(notification.body));//});});},disconnect(){if (this.stompClient!== null) {this.stompClient.disconnect();}console.log("Disconnected");}}};
</script>```注意：在实际应用中，用户ID应该是动态获取的（比如从登录用户信息中获取）。此外，为了安全考虑，我们可能需要验证用户身份。可以在连接时传递认证信息（如JWT令牌），并在后端进行验证。但此示例中未包含认证部分。
###心跳机制为了保持连接，WebSocket通常需要心跳机制。STOMP协议自身支持心跳，可以在连接时配置心跳参数。例如：在客户端连接时：
```jsthis.stompClient.connect({},(frame) =>{ ...}, {heartbeat:{ outgoing:10000, incoming:10000} });```服务器端也可以配置心跳，在`WebSocketConfig`中可以通过`configureMessageBroker`方法配置：```java@Overridepublic voidconfigureMessageBroker(MessageBrokerRegistry registry) {registry.enableSimpleBroker("/topic").setHeartbeatValue(new long[]{10000,10000});//设置心跳间隔（毫秒）registry.setApplicationDestinationPrefixes("/app");}
```###重连机制当连接断开时，客户端可以尝试重连。可以在断开连接的回调中设置重连逻辑：
```jsconnect(){// ...同上const socket= newSockJS('http://localhost:8080/ws');this.stompClient= Stomp.over(socket);this.stompClient.connect({},(frame) =>{// ...订阅},(error) =>{//连接失败，尝试重连setTimeout(()=> {this.connect();},5000);});}
```注意：重连时可能需要考虑重连次数限制。以上是一个基本的WebSocket实时站内通知的
实现。实际应用中，还需要考虑消息的持久化、离线消息处理、安全性（如认证和授权）等问题。
§§相关问题§§1.如何保证WebSocket连接的安全性（如身份验证）？2.WebSocket与HTTP长轮询有什么区别？在什么情况下选择WebSocket？3.如何处理离线用户的消息通知？4.WebSocket在分布式环境下如何
实现消息广播？5.如何对WebSocket进行性能测试和优化？</think>### WebSocket
实现站内实时消息通知方案
以下是使用 WebSocket
实现站内实时通知的完整解决方案，包含前后端核心
实现步骤：
#### 一、后端
实现（Spring Boot）
1. **添加依赖**
```xml
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
```
2. **WebSocket 配置类**
```java
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint("/ws-notify") // 客户端连接端点
.setAllowedOriginPatterns("*")
.withSockJS(); // 支持SockJS回退
}
@Override
public void configureMessageBroker(MessageBrokerRegistry registry) {
registry.enableSimpleBroker("/topic", "/user"); // 消息代理前缀
registry.setApplicationDestinationPrefixes("/app"); // 应用目标前缀
}
}
```
3. **通知服务层**
```java
@Service
public class NotificationService {
@Autowired
private SimpMessagingTemplate messagingTemplate;
// 发送广播通知
public void sendGlobalNotification(String message) {
messagingTemplate.convertAndSend("/topic/global", message);
}
// 发送私信通知
public void sendPrivateNotification(String userId, String message) {
messagingTemplate.convertAndSendToUser(userId, "/private", message);
}
}
```
#### 二、前端
实现（Vue.js）
1. **建立 WebSocket 连接**
```javascript
import SockJS from 'sockjs-client';
import Stomp from 'webstomp-client';
export default {
data() {
return {
notifications: [],
stompClient: null
}
},
mounted() {
this.initWebSocket();
},
methods: {
initWebSocket() {
const socket = new SockJS('/ws-notify');
this.stompClient = Stomp.over(socket);
this.stompClient.connect({}, (frame) => {
// 订阅全局通知
this.stompClient.subscribe('/topic/global', (message) => {
this.notifications.push(JSON.parse(message.body));
});
// 订阅个人通知（假设用户ID存在store中）
const userId = this.$store.state.user.id;
this.stompClient.subscribe(`/user/${userId}/private`, (message) => {
this.notifications.push(JSON.parse(message.body));
});
});
},
disconnect() {
if (this.stompClient) {
this.stompClient.disconnect();
}
}
},
beforeDestroy() {
this.disconnect();
}
}
```
#### 三、关键功能
实现
1. **心跳机制**（防止连接断开）
```javascript
// 前端定时发送心跳
setInterval(() => {
if (this.stompClient && this.stompClient.connected) {
this.stompClient.send("/app/heartbeat", "ping");
}
}, 30000);
```
2. **断线重连**
```javascript
// 前端重连逻辑
reconnect() {
setTimeout(() => {
if (!this.stompClient || !this.stompClient.connected) {
this.initWebSocket();
}
}, 5000);
}
```
3. **消息格式设计**
```json
{
"type": "NEW_MESSAGE", // 通知类型
"sender": "系统管理员",
"content": "您有新的待办事项",
"timestamp": 1654070400000,
"link": "/tasks/123" // 跳转链接
}
```
#### 四、安全增强措施
1. **JWT 认证**
```java
// 在WebSocket握手时验证token
@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint("/ws-notify")
.setHandshakeHandler(new JwtHandshakeHandler())
.withSockJS();
}
```
2. **消息持久化**（应对离线用户）
```java
// 存储未送达通知
@Async
public void persistIfOffline(String userId, Notification notification) {
if (!userOnlineService.isUserOnline(userId)) {
notificationRepository.save(notification);
}
}
```
#### 五、性能优化
1. **消息压缩**
```java
messagingTemplate.setMessageConverter(new GsonMessageConverter());
```
2. **连接数监控**
```java
@EventListener
public void handleSessionConnected(SessionConnectedEvent event) {
metricsService.incrementConnectionCount();
}
```
###
实现效果
1. 用户登录后自动建立 WebSocket 连接
2. 系统触发事件时实时推送通知（如新消息、审批提醒）
3. 通知气泡显示在页面右上角，点击可跳转
4. 离线消息在下次登录时自动补发
[^1]: WebSocket
实现消息实时推送的基本原理
[^2]: Spring Boot 中 WebSocket 的配置方法
[^3]: Vue.js 前端
实现 WebSocket 连接的完整流程
[^4]: 实时通知系统的安全设计和性能优化策略
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
