SimpMessagingTemplate无法推送消息至React前端WebSocket问题

1. 核对后端消息发送路径 #

得确认DummyService里发消息的目标是完整的/topic/dummy，别写错或漏了前缀。示例：

// 正确写法
simpMessagingTemplate.convertAndSend("/topic/dummy", messageContent);
// 错误示范（缺少/topic前缀）
simpMessagingTemplate.convertAndSend("/dummy", messageContent);

2. 检查前端订阅后的消息监听逻辑 #

虽然浏览器日志显示订阅正常，但要确认真的绑定了消息接收回调。用原生WebSocket的话，必须监听message事件；如果后端用了Stomp代理，还得手动发送Stomp订阅帧：

const socket = new WebSocket('ws://localhost:5001/socket');

socket.onopen = () => {
  console.log('Connected');
  // 发送Stomp订阅帧，id填唯一值即可
  const subscribeMsg = JSON.stringify({
    command: 'SUBSCRIBE',
    destination: '/topic/dummy',
    id: 'sub-1'
  });
  socket.send(subscribeMsg);
};

// 核心：别遗漏message事件监听
socket.onmessage = (event) => {
  console.log('收到消息:', event.data);
  // 这里写消息处理逻辑，比如更新页面UI
};

socket.onerror = (err) => {
  console.error('WebSocket出错:', err);
};

要是前端没处理Stomp帧，可能收到的是未解析的字符串/二进制数据，看起来就像没收到消息。

3. 确认后端WebSocket配置正确性 #

确保配置类同时启用Stomp代理和SockJS端点，跨域规则也得配对：

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

  @Override
  public void configureMessageBroker(MessageBrokerRegistry config) {
    // 启用简单消息代理，处理/topic前缀的消息
    config.enableSimpleBroker("/topic");
    // 应用前缀仅用于@MessageMapping接口，推送场景可忽略
    config.setApplicationDestinationPrefixes("/app");
  }

  @Override
  public void registerStompEndpoints(StompEndpointRegistry registry) {
    registry.addEndpoint("/socket")
            .setAllowedOriginPatterns("*") // 开发环境临时放开，生产环境需指定具体域名
            .withSockJS();
  }
}

跨域必须注意：如果React运行在3000端口，后端没允许该端口的请求，消息会被浏览器拦截。

4. 验证后端消息发送实例的有效性 #

DummyService中的SimpMessagingTemplate必须是Spring依赖注入的实例，不能手动new：

@Service
public class DummyService {

  private final SimpMessagingTemplate messagingTemplate;

  // 构造注入，确保拿到Spring管理的有效实例
  public DummyService(SimpMessagingTemplate messagingTemplate) {
    this.messagingTemplate = messagingTemplate;
  }

  public void dummyCall() {
    String msg = "后端推送消息";
    messagingTemplate.convertAndSend("/topic/dummy", msg);
    System.out.println("Message sent!");
  }
}

手动new的SimpMessagingTemplate无法连接到消息代理，消息发出去也推不到客户端。

5. 用浏览器抓包验证消息流转 #

打开浏览器开发者工具的Network面板，找到类型为ws的连接，查看Frames标签：

• 检查客户端发送的SUBSCRIBE帧，destination是否为/topic/dummy
• 确认服务端是否发送了MESSAGE帧
  如果服务端确实发了消息，但前端没触发onmessage，就是前端解析问题——比如Stomp帧需要先解析为JSON，原生WebSocket直接拿到的是字符串，需自行处理。

6. 排除网络拦截问题 #

本地开发时，确认5001端口未被防火墙拦截，也未被代理工具（如nginx）中断WebSocket连接。

内容的提问来源于stack exchange，提问作者Pavle Ilic