Swivelgames/chat.js

## chat.js
var Chat = React.createClass({
	getInitialState: function() {
		return { messages: {} };
	},
	getLatestMessages: function() {
		if(this.getAjaxReq) this.getAjaxReq.abort();

		this.getAjaxReq = new XMLHttpRequest();

		this.getAjaxReq.onreadystatechange = function(){
			if(this.getAjaxReq.readyState == 4 && this.getAjaxReq.status == 200) {
				var resObj = {};
				try { resObj = JSON.parse(this.getAjaxReq.responseText); } catch(e) {};

				this.setState({ messages: resObj });
				this.getLatestMessages();
			}
		}.bind(this);

		this.getAjaxReq.open("get", "socket");
		this.getAjaxReq.send();
	},
	typeMessage: function(msgAjaxReq) {
		return msgAjaxReq = new XMLHttpRequest(), msgAjaxReq.open("get", "post?"+(
			"id=" + encodeURIComponent(this.msgId) + "&" +
			"name=" + encodeURIComponent(this.refs.name.getDOMNode().value) + "&" +
			"message=" + encodeURIComponent(this.refs.message.getDOMNode().value)
		)), msgAjaxReq.send();
	},
	generateNewMessageId: function(e) {
		if(e && e.preventDefault) e.preventDefault();
		function s4() { // @see http://stackoverflow.com/a/105074/253870
			return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
		}
		this.msgId = s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
		this.refs.message.getDOMNode().value = "";
	},
	componentDidMount: function() {
		this.generateNewMessageId();
		this.getLatestMessages();
	},
	componentWillUnmount: function() {
		this.getAjaxReq.abort();
	},
	render: function() {
		var msgDisp = [];
		Object.keys(this.state.messages).map(function(value, index) {
			msgDisp.push(
				<p><b>{this.state.messages[value].name}</b>: {this.state.messages[value].message}</p>
			)
		},this);
		return (
			<div>
				<div>{msgDisp}</div>
				<form onSubmit={this.generateNewMessageId}>
					<input type="text" ref="name" placeholder="Name" />
					<input type="text" ref="message" placeholder="Say something..." onKeyUp={this.typeMessage} onKeyDown={this.typeMessage} onKeyPress={this.typeMessage} />
					<button>Save</button>
				</form>
			</div>
		);
	}
});

React.render(<Chat />, document.getElementById("chatComponent"));

## index.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Hello React!</title>
		<script src="build/react.js"></script>
		<script src="build/JSXTransformer.js"></script>
	</head>
	<body>
		<div id="chatComponent"></div>
		<script type="text/jsx" src="chat.js"></script>
	</body>
</html>

## server.js
var app = require('express')();

global.chatConnections = [];
global.chatMessages = {};

app.get('/', function (req, res) { res.sendFile(__dirname+"/index.html"); });
app.get('/chat.js', function (req, res) { res.sendFile(__dirname+"/chat.js"); });
app.get('/build/react.js', function (req, res) { res.sendFile(__dirname+"/build/react.js"); });
app.get('/build/JSXTransformer.js', function (req, res) { res.sendFile(__dirname+"/build/JSXTransformer.js"); });
app.get('/socket', function (req, res) { global.chatConnections.push(res); });
app.get('/post', function (req, res) {
	if(req.query.hasOwnProperty('message') && req.query !== "undefined") {
		if(req.query.message==="") delete global.chatMessages[req.query.id];
		else global.chatMessages[req.query.id] = req.query;

		var conns = global.chatConnections;
		global.chatConnections = [];
		conns.map(function(res){ if(res) { res.status(200).json(global.chatMessages).end(); } });
	} res.status(200).end();
});

var server = app.listen(3000);
	var Chat = React.createClass({
	getInitialState: function() {
	return { messages: {} };
	},
	getLatestMessages: function() {
	if(this.getAjaxReq) this.getAjaxReq.abort();

	this.getAjaxReq = new XMLHttpRequest();

	this.getAjaxReq.onreadystatechange = function(){
	if(this.getAjaxReq.readyState == 4 && this.getAjaxReq.status == 200) {
	var resObj = {};
	try { resObj = JSON.parse(this.getAjaxReq.responseText); } catch(e) {};

	this.setState({ messages: resObj });
	this.getLatestMessages();
	}
	}.bind(this);

	this.getAjaxReq.open("get", "socket");
	this.getAjaxReq.send();
	},
	typeMessage: function(msgAjaxReq) {
	return msgAjaxReq = new XMLHttpRequest(), msgAjaxReq.open("get", "post?"+(
	"id=" + encodeURIComponent(this.msgId) + "&" +
	"name=" + encodeURIComponent(this.refs.name.getDOMNode().value) + "&" +
	"message=" + encodeURIComponent(this.refs.message.getDOMNode().value)
	)), msgAjaxReq.send();
	},
	generateNewMessageId: function(e) {
	if(e && e.preventDefault) e.preventDefault();
	function s4() { // @see http://stackoverflow.com/a/105074/253870
	return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
	}
	this.msgId = s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
	this.refs.message.getDOMNode().value = "";
	},
	componentDidMount: function() {
	this.generateNewMessageId();
	this.getLatestMessages();
	},
	componentWillUnmount: function() {
	this.getAjaxReq.abort();
	},
	render: function() {
	var msgDisp = [];
	Object.keys(this.state.messages).map(function(value, index) {
	msgDisp.push(
	<p><b>{this.state.messages[value].name}</b>: {this.state.messages[value].message}</p>
	)
	},this);
	return (
	<div>
	<div>{msgDisp}</div>
	<form onSubmit={this.generateNewMessageId}>
	<input type="text" ref="name" placeholder="Name" />
	<input type="text" ref="message" placeholder="Say something..." onKeyUp={this.typeMessage} onKeyDown={this.typeMessage} onKeyPress={this.typeMessage} />
	<button>Save</button>
	</form>
	</div>
	);
	}
	});

	React.render(<Chat />, document.getElementById("chatComponent"));
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8" />
	<title>Hello React!</title>
	<script src="build/react.js"></script>
	<script src="build/JSXTransformer.js"></script>
	</head>
	<body>
	<div id="chatComponent"></div>
	<script type="text/jsx" src="chat.js"></script>
	</body>
	</html>
	var app = require('express')();

	global.chatConnections = [];
	global.chatMessages = {};

	app.get('/', function (req, res) { res.sendFile(__dirname+"/index.html"); });
	app.get('/chat.js', function (req, res) { res.sendFile(__dirname+"/chat.js"); });
	app.get('/build/react.js', function (req, res) { res.sendFile(__dirname+"/build/react.js"); });
	app.get('/build/JSXTransformer.js', function (req, res) { res.sendFile(__dirname+"/build/JSXTransformer.js"); });
	app.get('/socket', function (req, res) { global.chatConnections.push(res); });
	app.get('/post', function (req, res) {
	if(req.query.hasOwnProperty('message') && req.query !== "undefined") {
	if(req.query.message==="") delete global.chatMessages[req.query.id];
	else global.chatMessages[req.query.id] = req.query;

	var conns = global.chatConnections;
	global.chatConnections = [];
	conns.map(function(res){ if(res) { res.status(200).json(global.chatMessages).end(); } });
	} res.status(200).end();
	});

	var server = app.listen(3000);