Last active
August 29, 2015 14:26
-
-
Save Swivelgames/8ac572b726a9b2c19f8a to your computer and use it in GitHub Desktop.
100-Line Challenge
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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")); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Was asked to complete a "100 Line Challenge", and decided to knock it out with Node and React.js 👍
Grab the
buildfolder fromhttp://facebook.github.io/react/downloads/react-0.13.3.zipand stick it in the same folder as this gist.To run:
$ npm install express && node server.jsEnjoy! 😄