在 SockJsClient (React) 中握手后无法发送消息

Posted

技术标签:

【中文标题】在 SockJsClient (React) 中握手后无法发送消息【英文标题】:Cannot send message after handshake in SockJsClient (React) 【发布时间】:2021-11-18 15:59:37 【问题描述】:

我正在使用 Spring Boot-React JS 并尝试通过 WebSocket 发送消息。握手很好,我可以毫无问题地订阅。当我尝试将数据发送到主题时,不起作用。 onMessage 没有被触发。

WebSocket配置

   @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) 

        // prefix for server to client message destination
        registry.enableSimpleBroker("/ws-push-notification"); 
    

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) 

        // SockJS connection endpoint
        registry.addEndpoint("/ws-push-notifications").setAllowedOrigins(allowedOrigin).withSockJS();
    

WebSocketDispatcher

 public void pushNotification(String pushToken, PushNotificationDto notificationDto) 

        SimpMessageHeaderAccessor headerAccessor = SimpMessageHeaderAccessor.create(SimpMessageType.MESSAGE);
        headerAccessor.setSessionId(pushToken);
        headerAccessor.setLeaveMutable(true);

        template.convertAndSendToUser(pushToken, "/ws-push-notification/item/" + pushToken,
                notificationDto, headerAccessor.getMessageHeaders());
    

我检查了数据和令牌,它是匹配的。

反应部分:

 const Client = (
                              props,
                              autoReconnect = true
                          ) => 
    
        const url = "http://localhost:8080/ws-push-notifications?access_token=" + localStorage.getItem(STORAGE_KEY_AT);
        
       const topic = "ws-push-notification/item/" + props.pushToken;
   
        const headers = 
            "Content-Type": CONTENT_TYPE_JSON,
            Authorization: "Bearer " + localStorage.getItem(STORAGE_KEY_AT)
        ;
    
        const onConnect = () => 
            props.changeSocketConnectionStatus(true);
            console.info(`Subscribed to socket $SUDate.toISOLocalDateTime(new Date())`);
        ;
    
        const onMessage = (data) => 
            console.log("This part not getting triggered!!!")
        ;

        return (
            <SockJsClient
                url=url
                topics=[topic]
                headers=headers
                subscribeHeaders=headers
                onConnect=onConnect
                onMessage=onMessage
                onDisconnect=onDisconnect
                onConnectFailure=onConnectFailure
                autoReconnect=autoReconnect
            />
        );
    ;
    
    export default Client;

template.convertAndSendToUser(pushToken, "/ws-push-notification/item/" + pushToken, notificationDto, headerAccessor.getMessageHeaders());

这会将 dto 发送到: /ws-push-notification/item/771063a4-fcea-454f-9673-dedc842290bb905557640

这部分在这里是一样的。 const topic = "ws-push-notification/item/" + props.pushToken;

为什么不工作?

【问题讨论】:

【参考方案1】:

问题是没有接收到数据。它正在发送它。

template.convertAndSend("/ws-push-notification/item/" + pushToken, notificationDto);

解决了我的问题。

【讨论】:

以上是关于在 SockJsClient (React) 中握手后无法发送消息的主要内容,如果未能解决你的问题,请参考以下文章

Web Socket - Spring:确认收到的消息

“使用 JSX 时,React 必须在范围内”(react/react-in-jsx-scope 与 index.js 上的“window.React = React”)

react怎么在render里面写style

在React 中使用 react-i18next 国际化

如何修复 React.Children.only 期望在 react.js 中接收单个 React 元素子项?

是否可以在 React 中使用 React.useState(() => )?