react-socket

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.