Here is a part of my React ponent:
import React from 'react';
import { Client } from '@stomp/stompjs';
class Balance extends React.Component {
ponentDidMount() {
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();
}
...
It looks like connection was established according to the debug output to browser's console:
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
However, I don't see a message 'onConnect' in console, which means client.onConnect was never fired.
Therefore I can't subscribe to a topic.
What could be a problem here?
UPDATE:
Here is a part of my React ponent:
import React from 'react';
import { Client } from '@stomp/stompjs';
class Balance extends React.Component {
ponentDidMount() {
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();
}
...
It looks like connection was established according to the debug output to browser's console:
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
However, I don't see a message 'onConnect' in console, which means client.onConnect was never fired.
Therefore I can't subscribe to a topic.
What could be a problem here?
UPDATE:
Share Improve this question edited Oct 23, 2018 at 5:04 Alex Karasev asked Oct 23, 2018 at 4:19 Alex KarasevAlex Karasev 1,1382 gold badges13 silver badges25 bronze badges 2- Can you check in browser network console if WebSocket connection is actually established? – vijay krishna Commented Oct 23, 2018 at 4:43
- @vijaykrishna yes, I added a screenshot from my Network tab – Alex Karasev Commented Oct 23, 2018 at 5:04
1 Answer
Reset to default 3According to author it was a mix up in syntax of the library.
The corrected code from my question look as the following:
import React from 'react';
import { Client } from '@stomp/stompjs';
class Balance extends React.Component {
ponentDidMount() {
// The pat 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();
}
...
I created a full working example in my repo.