Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    react-websocket-viewpublic

    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.

    install

    npm i react-websocket-view

    Downloadslast 7 days

    14

    version

    0.0.3

    license

    none

    repository

    github.com

    last publish

    collaborators

    • avatar