Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-stompjs with all npm packages installed. Try it out:

var reactStompjs = require("react-stompjs")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-stompjs v0.5.3

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

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

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()

Example ( React-Native )

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)
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free