React websocket High Order Component with @stomp/stompjs (V5) over SockJS
npm install react-stompjsIt 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
$xslt
npm install react-stompjs --save
`Usage
Import
`javascript
import {StompEventTypes, withStomp} from 'react-stompjs'
`Connect your component withStomp(), it'll add stompContext into your component properties
`javascript
withStomp(App)
``
Now you can listen / remove the Stomp Events, ( check EventEmitter3 for emitted, context )
`javascript
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
`javascript
this.props.stompContext.newStompClient(server_path, username, passcode, host)
this.props.stompContext.removeStompClient()
`
You could access the Client directly ( Subscribe and unsubscribe etc )
`javascript
let rootSubscribed = this.props.stompContext.getStompClient().subscribe('/', (message) => {console.log(message.body)})
rootSubscribed.unsubscribe()
`Example ( React-Native )
`javascript
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 (
Status: {this.state.status}
)
}
}
export default withStomp(App)
``