代码之家 › 专栏 › 技术社区 › raed abu sada

在react TS中未接收到spring-boot和react使用websocket消息

websocket spring-boot reactjs

raed abu sada · 技术社区 · 3 年前

我使用带有WebSocket的spring-boot向react TS应用程序发送消息。

弹簧引导代码=>

@Service
@EnableScheduling
@RequiredArgsConstructor
public class MessageService {

    private final SimpMessagingTemplate messagingTemplate;

    @Scheduled(fixedRate = 5000L)
    public void send(){

        System.out.println("message sent");
        messagingTemplate.convertAndSend("/topic/message", "message from spring server...");
    }
}

==============================

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {

    registry.addEndpoint("/ws").setAllowedOriginPatterns("*");
    registry.addEndpoint("/ws").setAllowedOriginPatterns("*").withSockJS();
}

@Override
public void configureMessageBroker(MessageBrokerRegistry registry) {

    registry.enableSimpleBroker("/topic");
    registry.setApplicationDestinationPrefixes("/app");
}

}

在react中,我使用了=>npm我反应使用websocket

此处的代码=>

    import { useCallback, useEffect, useState } from "react";
import useWebSocket, { ReadyState } from "react-use-websocket";

const url = "ws:localhost:8080/ws";

const Web = () => {
  const [message, setMessage] = useState(null);

  const handleMessage = (msg: any) => {
    console.log("message: " + msg);
  };

  const { lastMessage, readyState, sendMessage } = useWebSocket(url, {
    onOpen: () => console.log("web socket opened"),
    onClose: () => console.log("connection closed"),
    shouldReconnect: (closeEvent) => true,
    onMessage: (event: any) => handleMessage(event),
  });

  const handleSend = () => {
    useCallback(() => sendMessage("message hello"), []);
  };

  const connectionStatus = {
    [ReadyState.CONNECTING]: "Connecting",
    [ReadyState.OPEN]: "Open",
    [ReadyState.CLOSING]: "Closing",
    [ReadyState.CLOSED]: "Closed",
    [ReadyState.UNINSTANTIATED]: "Uninstantiated",
  }[readyState];

  useEffect(() => {
    console.log("received");
    setMessage(lastMessage?.data);
  }, [lastMessage]);

  return (
    <>
      <div>Web Socket Application</div>
      <p>message received: {lastMessage?.data}</p>
      <p>{readyState}</p>
      <p>{connectionStatus}</p>
      <button onClick={handleSend}>send message</button>
    </>
  );
};

export default Web;

从react use websocket提供的ReadyState可以看出,连接是打开的,但我没有收到消息。

请告知。提前感谢