react-stompjs

React websocket High Order Component with @stomp/stompjs (V5) over SockJS

Introduction

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

Installation

npm install react-stompjs --save

Usage

Import

1import {StompEventTypes, withStomp} from 'react-stompjs'

Connect your component withStomp(), it'll add stompContext into your component properties

1withStomp(App)

Now you can listen / remove the Stomp Events, ( check EventEmitter3 for emitted, context )

1const StompEventTypes = {
2    Connect: 0,
3    Disconnect: 1,
4    Error: 2,
5    WebSocketClose: 3,
6    WebSocketError: 4,
7}
8
9this.props.stompContext.addStompEventListener(eventType: StompEventTypes, emitted: function, context, isOnce)
10this.props.stompContext.removeStompEventListener(eventType: StompEventTypes, emitted: function, context)

And create/destroy the client

1this.props.stompContext.newStompClient(server_path, username, passcode, host)
2this.props.stompContext.removeStompClient()

You could access the Client directly ( Subscribe and unsubscribe etc )

1let rootSubscribed = this.props.stompContext.getStompClient().subscribe('/', (message) => {console.log(message.body)})
2rootSubscribed.unsubscribe()

Example ( React-Native )

1import React, {Component} from 'react'
2import {Platform, StyleSheet, Text, View} from 'react-native'
3import {StompEventTypes, withStomp} from 'react-stompjs'
4
5class App extends Component {
6  constructor(props) {
7    super(props)
8
9    this.state = {
10      status: 'Not Connected',
11    }
12  }
13
14  componentDidMount(): void {
15    this.props.stompContext.addStompEventListener(
16        StompEventTypes.Connect,
17        () => {this.setState({status: 'Connected'})}
18    )
19    this.props.stompContext.addStompEventListener(
20        StompEventTypes.Disconnect,
21        () => {this.setState({status: 'Disconnected'})}
22    )
23    this.props.stompContext.addStompEventListener(
24        StompEventTypes.WebSocketClose,
25        () => {this.setState({status: 'Disconnected (not graceful)'})}
26    )
27    this.props.stompContext.newStompClient(
28        {your_server_and_path},  // https://www.example.com/stomp
29        {username},  // loming
30        {passcode},  // 12345678
31        {host})  // it's '/' most likely
32  }
33
34  render() {
35    return (
36      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#ffffff'}}>
37        <View><Text>Status: {this.state.status}</Text></View>
38      </View>
39    )
40  }
41}
42
43export default withStomp(App)