Skip to content

This repo shows how to connect crossbar.io with ReactJS product.

License

Notifications You must be signed in to change notification settings

hassantauqeer/react-crossbar

Repository files navigation

react boilerplate banner react boilerplate banner

Start your next project with react-boilerplate and crossbar
React-boilerplate doesn't need any introduction credit goes to mxstbr, this repo is to describe implementation of crossbar in react-boilerplate

Crossbar Implementation

npm install --save autobahn-react
browserInitialize: function browserInitialize(port, path, realm) {
  return this.initialize('ws://' + document.location.hostname + ':' + port + '/' + path,   realm);

change this line

   return this.initialize('ws://' + document.location.hostname + ':' + port + '/' + path, realm);

with your crossbar (localhoat)

       return this.initialize('ws://localhost:' + port + '/' + path, realm);
  1. then go to app.js in app
  2. Import Autobahn
  3. Create connection & dispatch the connected event(Autobahn Object) to App(Main) Store
  4. Then use that dispatched Autobahn Object wherever you want to subscribe in app like i did in HomePage container

Collaborations

A little work by me to help others, although there will be plenty of mistakes, thats why collaborations are highly Welcome. Thanks!