React websocket High Order Component with @stomp/stompjs (V5) over SockJS
I need an updated STOMP client to work with latest version of React Native, it probably works in Browser as well.
It exposed the global STOMP client to the react components with HOC
It makes use of the great @stomp/stompjs for STOMP, check it's doc on how to use the Client
npm install react-stompjs --save
Import
import {StompEventTypes, withStomp} from 'react-stompjs'Connect your component withStomp(), it'll add stompContext into your component properties
withStomp(App)Now you can listen / remove the Stomp Events, ( check EventEmitter3 for emitted, context )
const StompEventTypes = {
Connect: 0,
Disconnect: 1,
Error: 2,
WebSocketClose: 3,
WebSocketError: 4,
}
this.props.stompContext.addStompEventListener(eventType: StompEventTypes, emitted: function, context, isOnce)
this.props.stompContext.removeStompEventListener(eventType: StompEventTypes, emitted: function, context)And create/destroy the client
this.props.stompContext.newStompClient(server_path, username, passcode, host)
this.props.stompContext.removeStompClient()You could access the Client directly ( Subscribe and unsubscribe etc )
let rootSubscribed = this.props.stompContext.getStompClient().subscribe('/', (message) => {console.log(message.body)})
rootSubscribed.unsubscribe()import React, {Component} from 'react'
import {Platform, StyleSheet, Text, View} from 'react-native'
import {StompEventTypes, withStomp} from 'react-stompjs'
class App extends Component {
constructor(props) {
super(props)
this.state = {
status: 'Not Connected',
}
}
componentDidMount(): void {
this.props.stompContext.addStompEventListener(
StompEventTypes.Connect,
() => {this.setState({status: 'Connected'})}
)
this.props.stompContext.addStompEventListener(
StompEventTypes.Disconnect,
() => {this.setState({status: 'Disconnected'})}
)
this.props.stompContext.addStompEventListener(
StompEventTypes.WebSocketClose,
() => {this.setState({status: 'Disconnected (not graceful)'})}
)
this.props.stompContext.newStompClient(
{your_server_and_path}, // https://www.example.com/stomp
{username}, // loming
{passcode}, // 12345678
{host}) // it's '/' most likely
}
render() {
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#ffffff'}}>
<View><Text>Status: {this.state.status}</Text></View>
</View>
)
}
}
export default withStomp(App)