前端连接WebSocket成功但无法触发后端STOMP端点方法求助

1. 后端@MessageMapping路径配置错误 #

你的WebSocket配置中已设置registry.setApplicationDestinationPrefixes("/app")，这意味着所有发送到后端应用端点的消息会自动带上/app前缀。但控制器的@MessageMapping里重复写了/app前缀，导致实际目标路径变为/app/app/sendMessage/{id}/{chatId}，前端无法匹配到正确端点。

修改控制器代码：

// 移除@MessageMapping中的/app前缀
@MessageMapping("/sendMessage/{id}/{chatId}")
@SendTo("/topic/chat/{chatId}")
public Chat saveMessage(@RequestHeader("auth-token") String authToken, @PathVariable String chatId, @PathVariable String id, @RequestBody Chat chat){
    return sendMessage(authToken, chatId, id, chat);
}

2. 前端缺少发送消息的核心逻辑 #

你提供的前端代码仅完成了WebSocket连接和空订阅，没有实际发送消息到后端端点的逻辑，这是控制器方法未触发的直接原因。需添加发送逻辑，正确传递路径变量、请求头和消息体。

添加前端发送消息方法：

// 需确保stompClient已在state中可用
const sendChatMessage = (id, chatId, authToken, chatContent) => {
  if (!stompClient) return;
  
  // 构造目标路径，替换路径变量
  const destination = `/app/sendMessage/${id}/${chatId}`;
  // 构造符合Chat实体结构的消息体
  const chat = { content: chatContent /* 根据实际实体补充其他字段 */ };
  
  // 发送消息并携带auth-token请求头
  stompClient.publish({
    destination: destination,
    body: JSON.stringify(chat),
    headers: {
      'auth-token': authToken
    }
  });
};

3. 前端订阅路径为空，无法接收推送消息 #

前端订阅代码中的目标路径是空字符串，需替换为正确的订阅路径/topic/chat/{chatId}（将{chatId}替换为实际聊天ID）。

修正订阅代码：

// 假设chatId为已知变量
const subscription = stomp.subscribe(`/topic/chat/${chatId}`, (message) => {
  const chat = JSON.parse(message.body);
  setPreviousMessages((prevMessage) => [...prevMessage, chat]);
});

验证步骤 #

1. 重启后端服务，确保修改后的控制器代码生效。
2. 前端连接WebSocket后，调用sendChatMessage方法，传入正确的id、chatId、authToken和消息内容。
3. 查看后端控制台是否打印Hello，若打印则说明控制器方法已触发。

内容的提问来源于stack exchange，提问作者Heni Mehta