https://github.com/mehmetkose/react-websocket

Easy-to-use React component for websocket communications.
https://github.com/mehmetkose/react-websocket

react websocket

Last synced: 3 days ago
JSON representation

Easy-to-use React component for websocket communications.

• Host: GitHub
• URL: https://github.com/mehmetkose/react-websocket
• Owner: mehmetkose
• License: mit
• Created: 2015-07-29T14:02:29.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2022-03-10T19:34:04.000Z (over 2 years ago)
• Last Synced: 2024-05-17T21:46:11.689Z (6 months ago)
• Topics: react, websocket
• Language: JavaScript
• Homepage:
• Size: 1.25 MB
• Stars: 351
• Watchers: 14
• Forks: 83
• Open Issues: 16
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-websocket [![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/mehmetkose/react-websocket/edit/master/README.md) [![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fmehmetkose%2Freact-websocket.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Fmehmetkose%2Freact-websocket?ref=badge_shield)

`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

```js

  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 (

        


          Count: {this.state.count}


          

        

      );

    }

  }


  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](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fmehmetkose%2Freact-websocket.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2Fmehmetkose%2Freact-websocket?ref=badge_large)