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.

    Install

    npm i react-socket

    DownloadsWeekly Downloads

    49

    Version

    1.0.0-beta.0

    License

    MIT

    Last publish

    Collaborators

    • coma