无法使用 @stomp/stompjs 订阅主题

Posted 2023-02-16

【中文标题】无法使用 @stomp/stompjs 订阅主题

【英文标题】：Unable to subscribe on topic using @stomp/stompjs

【发布时间】：2018-10-23 04:19:44

【问题描述】：

这是我的 React 组件的一部分：

import React from 'react';
import  Client  from '@stomp/stompjs';

class Balance extends React.Component 

    componentDidMount() 
        const client = new Client(
            brokerURL: 'ws://localhost:8080/stomp',
            debug: (str) => 
                console.log(str);
            ,
        );

        client.onConnect(() => 
            console.log('onConnect');
            client.subscribe('/topic/balance', message => 
                console.log(message);
            )
        );

        client.activate();
    
...

根据调试输出到浏览器控制台，连接似乎已建立：

Opening Web Socket...
Web Socket Opened...
>>> CONNECT
accept-version:1.0,1.1,1.2
heart-beat:10000,10000
Received data
<<< CONNECTED
heart-beat:0,0
version:1.2
content-length:0
connected to server undefined

但是，我在控制台中没有看到消息“onConnect”，这意味着 client.onConnect 从未被解雇。

因此我无法订阅主题。

这里可能有什么问题？

更新：

【问题讨论】：

能否在浏览器网络控制台中查看WebSocket连接是否真的建立了？

@vijaykrishna 是的，我从我的网络标签中添加了一个屏幕截图

【参考方案1】：

根据库语法中的to author it was a mix up。

我的问题中的更正代码如下所示：

import React from 'react';
import  Client  from '@stomp/stompjs';

class Balance extends React.Component 
  componentDidMount() 
    // The compat mode syntax is totally different, converting to v5 syntax
    // Client is imported from '@stomp/stompjs'
    this.client = new Client();

    this.client.configure(
      brokerURL: 'ws://localhost:8080/stomp',
      onConnect: () => 
        console.log('onConnect');

        client.subscribe('/topic/balance', message => 
            console.log(message);
        )
      ,
      // Helps during debugging, remove in production
      debug: (str) => 
        console.log(new Date(), str);
      
    );

    this.client.activate();
  
...

我在repo 中创建了一个完整的工作示例。