react-socket

1.0.0-beta.0 • Public • Published

react-socket

Build Status Dependency Status NPM version

A React wrapper for Socket.IO

Usage

Just mount a socket on one of your components:

var React  = require('react'),
    Socket = require('react-socket').Socket;
 
module.exports = module.exports = React.createClass({
    render: function () {
 
        return (
            <div>
                <Socket url="your-socket-endpoint:port?"/>
            </div>
        );
    }
});

and then start listening to it:

var React       = require('react'),
    SocketEvent = require('react-socket').Event;
 
module.exports = module.exports = React.createClass({
    onSocketMessage: function (message) {
 
        ...
    },
    render: function () {
 
        return (
            <div>
                <SocketEvent name="your-socket-event" callback={ this.onSocketMessage }/>
            </div>
        );
    }
});

Use the name property to mount more than one socket:

var React  = require('react'),
    Socket = require('react-socket');
 
module.exports = module.exports = React.createClass({
    render: function () {
 
        return (
            <div>
                <Socket.Socket url="/a" name="a"/>
                <Socket.Socket url="/b" name="b"/>
                <Socket.Event socket="a" name="foo" callback={ this.onA }/>
                <Socket.Event socket="b" name="foo" callback={ this.onB }/>
            </div>
        );
    }
});

Every mounted socket gets disconnect before its component gets unmounted and the same goes to the events.

Package Sidebar

Install

npm i react-socket

Weekly Downloads

2

Version

1.0.0-beta.0

License

MIT

Last publish

Collaborators

  • coma