spring websocket未接收来自react的消息

Question

我有一个 Spring 应用程序，需要使用 websocket 接收消息。

Config.java

@Configuration
@EnableWebSocketMessageBroker
public class Config implements WebSocketMessageBrokerConfigurer {

@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
    registry.addEndpoint("/simulator").setAllowedOrigins("http://localhost:3000").withSockJS();
}

@Override
public void configureMessageBroker(MessageBrokerRegistry registry) {
    registry.enableSimpleBroker("/endpoint");
    registry.setApplicationDestinationPrefixes("/app");
}
}

MessageController.java

@Controller
public class MessageController {


@MessageMapping("/hello")
@SendTo("/endpoint/greeting")
public ResponseEntity<?> getContent(@RequestBody Message message) {
        JsonObject jo = new JsonObject();
        jo.put("isLiked", "Yes");
        System.out.println("here");
        System.out.println(message.getName());
        return new ResponseEntity<>(jo, HttpStatus.BAD_REQUEST);
    }

}

消息.java

public class Message {

    private String name;

    public Message(String name) {
        this.name = name;
    }


    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

}

我还有一个简单的 React.js 应用程序，它有两个按钮“连接”和“发送”。 当您单击“连接”时，将与 Spring 建立连接并且连接成功（我在控制台中获取有关成功连接的数据）。 但是当我点击“发送”时，我得到的信息是json已经发送，但是Spring没有以任何方式注册它（既不向控制台显示消息，也不发送响应，也不将数据输入到“端点/问候语”中）频道）

App.js

import './index.css';
import SockJS from "sockjs-client"
import Stomp from 'stompjs'
import React, { useState, useRef, useEffect, useCallback } from "react";

function App() {

let stompClient;

      const connect = () => {
      const socket = new SockJS("http://localhost:8080/simulator");
      stompClient = Stomp.over(socket);
      stompClient.connect({}, function (frame) {
      console.log("Connected " + frame);
      stompClient.subscribe("http://localhost:8080/endpoint/greeting", function (greeting) {
      console.log("hi" + JSON.parse(greeting.body).content);
      });
      });
      };

      const sendSomething = () => {
      stompClient.send("http://localhost:8080/hello",{}, JSON.stringify({"name":"John"}));
      };

return (
      <>
      <button onClick={connect}>Connect</button>
      <button onClick={sendSomething}>Send</button>
      </>

);
}

export default App;

这个问题我已经困扰好几天了。但我还是找不到答案 我做错了什么？

Answer 1

在您的

App.js

文件（客户端）中，

stompClient.send

和

stompClient.subscribe

应该没有主机，而只有相对路径。

还值得一提的是，

stompClient.send

路径应以

ApplicationDestinationPrefixes

中设置的

Config.java

为前缀。 （在您的情况下为“

app

”）

修改后的代码将是这样的：

import './index.css';
import SockJS from "sockjs-client"
import Stomp from 'stompjs'
import React, { useState, useRef, useEffect, useCallback } from "react";

function App() {

let stompClient;

      const connect = () => {
      const socket = new SockJS("http://localhost:8080/simulator");
      stompClient = Stomp.over(socket);
      stompClient.connect({}, function (frame) {
      console.log("Connected " + frame);
      // modified part
      stompClient.subscribe("/endpoint/greeting", function (greeting) {
      console.log("hi" + JSON.parse(greeting.body).content);
      });
      });
      };

      const sendSomething = () => {
      // modified part
      stompClient.send("/app/hello",{}, JSON.stringify({"name":"John"}));
      };

return (
      <>
      <button onClick={connect}>Connect</button>
      <button onClick={sendSomething}>Send</button>
      </>

);
}

export default App;