Overview
This is Part 2 of my using Node and React series. We’re going to continue where we left off in Part 1.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.
├── app.js
├── client.js
├── components
│ ├── MyApp.react.js
│ ├── MyAppList.react.js
│ └── MyAppListItem.react.js
├── package.json
├── public
│ ├── images
│ ├── javascripts
│ │ └── build.min.js
│ └── stylesheets
│ ├── style.css
│ └── style.less
├── routes
│ ├── index.js
│ └── socketHandler.js
└── views
└── index.ejs
Socket.io
The first thing we need to do is add the socket.io library in our client.
1
2
<!-- in ./views/index.ejs -->
<script src="https://cdn.socket.io/socket.io-1.1.0.js"></script>
Now on the server side we’re going to setup socket.io.
1
2
3
4
5
/* in ./app.js */
// at the end of the file
var io = require('socket.io').listen(server);
require('./routes/socketHandler')(io);
Now we have to write how socket.io handles messages.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/* in ./routes/socketHandler.js */
"use strict";
module.exports = function(io){
io.on('connection', function(socket){
// send to everyone except for socket
console.log('user connected ' + socket.id);
socket.broadcast.emit('message', 'user connected ' + socket.id);
// Disconnect
socket.on('disconnect', function(){
console.log('user disconnected ' + socket.id);
socket.broadcast.emit('message', 'user disconnected ' + socket.id);
// send to everone including socket
// socket.emit('message', 'user disconnected ' + socket.id);
});
// Message event
socket.on('message', function(msg){
socket.emit('message',msg);
});
});// end connection
};
At the end, we’ll have 3 react components: MyApp, MyAppList and MyAppListItem. This is the end result.
MyApp
We have to add 2 methods:
componentDidMount - the component has finished rendering
getInitialState - as the name implies, it returns the initial state
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/** @jsx React.DOM */
var React = require('react');
var MyAppList = require('./MyAppList.react');
module.exports = MyApp = React.createClass({
getInitialState: function(){
return {
messages: []
};
},
componentDidMount: function(){
var self = this;
var socket = io.connect();
socket.on('message', function(msg){
var messages = self.state.messages;
messages.push(msg);
self.setState(messages);
});
},
render: function(){
return (
<MyAppList messages={this.state.messages} />
)
}
});
MyAppList
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/** @jsx React.DOM */
var React = require('react');
var MyAppListItem = require('./MyAppListItem.react');
module.exports = MyAppList = React.createClass({
render: function(){
var listItems = this.props.messages.map(function(item){
return (<MyAppListItem message={item} />);
});
return (
<ul>
{listItems}
</ul>
)
}// render
});// MyAppList
MyAppListItem
1
2
3
4
5
6
7
8
9
10
11
/** @jsx React.DOM */
var React = require('react');
module.exports = MyAppListItem = React.createClass({
render: function(){
return (
<li>{this.props.message}</li>
)
}
});