Popularity
2.1
Growing
Activity
1.6
Declining
302
12
83

Description

React websocket listenner

Monthly Downloads: 0
Programming language: JavaScript
License: MIT License
Tags: Data Structure     Data     WebSockets     Live     Stream     React     Event Stream     Reactjs     Component     JSON     websocket     Connection    
Latest version: v2.0.1

react-websocket alternatives and similar libraries

Based on the "Data Structure" category

Do you think we are missing an alternative of react-websocket or a related project?

Add another 'Data Structure' Library

README

react-websocket contributions welcome FOSSA Status

react-websocket is a easy-to-use React component for websocket communications.

Help Wanted

Things here are running very slowly as I have a lot of other stuff to take care at the moment so please don't be upset if I don't answer your question or if a PR sits unreviewed for a few days or weeks. Anyone interested in helping it move faster can help by submitting or reviewing PR's and answering each other's questions.

Installing

npm install --save react-websocket

Usage

  import React from 'react';
  import Websocket from 'react-websocket';

  class ProductDetail extends React.Component {

    constructor(props) {
      super(props);
      this.state = {
        count: 90
      };
    }

    handleData(data) {
      let result = JSON.parse(data);
      this.setState({count: this.state.count + result.movement});
    }

    render() {
      return (
        <div>
          Count: <strong>{this.state.count}</strong>

          <Websocket url='ws://localhost:8888/live/product/12345/'
              onMessage={this.handleData.bind(this)}/>
        </div>
      );
    }
  }

  export default ProductDetail;

Properties

url

required The url the websocket connection is listening to.

onMessage

required The callback called when data is received. Data is JSON.parse'd

onOpen

The callback called when the connection is successfully opened.

onClose

The callback called when the connection is closed either due to server disconnect or network error.

debug

default: false Set to true to see console logging

reconnect

default: true

accelerated reconnection time

License

FOSSA Status


*Note that all licence references and agreements mentioned in the react-websocket README section above are relevant to that project's source code only.