node package manager

react-websocket-view

React/Flux application over Websocket.

Install

To setup the package.

npm install react-websocket-view --save

Usage

  1. Import WebsocketView from react-websocket-view

  2. Use <WebsocketView /> as the parent component, and put Websocket server URI to server props.

  3. Add onMessage callback to your components.

Quickstart

The following sample connects to wss://wot.city/object/testman/viewer, and <p> will receive real-time data with onMessage callback.

import React from 'react';
import { render } from 'react-dom';
import { WebsocketView } from 'react-websocket-view';
 
render(
    <WebsocketView 
     server="wss://wot.city/object/testman/viewer">
     <p onMessage={function(data) {console.log(data)}}></p>
    </WebsocketView>,
    document.getElementById('content')
);

Examples

  • Two <p> elements receive real-time data from the same server.
<WebsocketView 
  server="wss://wot.city/object/testman/viewer">
  <p onMessage={function(data) {console.log(data)}}></p>
  <p onMessage={function(data) {console.log(data)}}></p>
</WebsocketView>
  • Two <p> elements receive real-time data from different servers.
<div>
  <WebsocketView 
    server="wss://wot.city/object/room1/viewer">
    <p onMessage={function(data) {console.log(data)}}></p>
  </WebsocketView>
  <WebsocketView 
    server="wss://wot.city/object/room2/viewer">
    <p onMessage={function(data) {console.log(data)}}></p>
  </WebsocketView>
</div>

License

The MIT License (MIT). See LICENSE.md.