#Real time Apps for Dummies (Socket.io tutorial)
Hello boys and girls,
I just got curious about socket.io and how “real time apps” work.
I already played a little bit with React, meteor and Vue but that’s another story.
Socket.io is really simple. It’s just sending message from client to server.
I’ll try to explain it in the simplest way possible, so grab your computer* and let’s get started.
This first example we’re going to need NodeJS, so let’s use it’s most common framework “Express”
Create a folder called “numbers” then:
// go into the directory
cd numbers
// create the package.json file (keep everything as default)
npm init
// install express and socket.io
npm install — save express socket.io
so now you have a folder called “numbers” and inside of it you have a “node_modules” folder and a “package.json” file.
Let’s create the Express Server
create a file called “index.js” just like it is described on your package.json
// start requiring the express library
var express = require(‘express’);
// start the app
var app = express();
// start the server
var http = require(‘http’).Server(app);
// start the socket
var io = require(‘socket.io’)(http);
// let’s create a default method for all routes
app.get(‘*’, function(req, res){
// it just return a plain text “Server OK”;
return res.send(‘Server OK.’);
});
// let’s start the socket connection.
io.on(‘connection’, function(socket) {
// let’s listen for a message on a channel (let’s call it “channel_3”)
socket.on(‘channel_3’, function(data) {
// let’s print the message on the node.js console
console.log(‘Got a new message from client’, data);
});
});
// start the server, so we can listen on port 3000.
http.listen(3000, function(){
console.log(‘Server is ready and listening on 3000’);
});
Now run “node index.js”
you should see “Server is ready and listening on 3000”
now go to “localhost:3000” on your browser and you should see “Server OK.”.
So far so good, you got a node js server running express and listening on sockets.
Now let’s create our client.
Create a file called index.html (anywhere, on your desktop for example)
<!DOCTYPE html>
<html>
<head>
<title>Numbers</title>
</head>
<body>
<h1>Numbers</h1>
<! — a button so we can click it →
<button id=”send”>Send</button>
<! — socket io, on client side →
<script src=”https://cdn.socket.io/socket.io-1.4.5.js"></script>
<script>
// start our socket, let it know host and port or our server.
var socket = io(‘http://192.168.22.60:3000');
// let’s listen to clicks on our “Send” button. Note: this is the same as jqueyr $(‘#send’).click()
var btnSend = document.getElementById(‘send’);
btnSend.addEventListener(‘click’, function() {
// since it’s called numbers, let’s send a random number between 0 and 1(exclusive);
var message = “The new number is: “ + Math.random();
// now let’s send it to server using the socket on our “channel_3”
socket.emit(‘channel_3’, message );
}, false);
</script>
</body>
</html>
Now run this index.hmtl on your browser (yeah, drag and drop it on your browser), when you click on the button you’ll the message on your nodejs console, like:
Got a new message from client The new number is: 0.9818253193683235
###That’s it. Simple as that.
#“oh but I can do it using Ajax, what’s the advantage?” Now, let’s make things the other way around. We were sending from client to server. now let’s change the code a little bit and send from the server to the client.
On your index.js, let’s add few lines right before start our server, before the http.listen();
// to make it very simple, let’s create a interval of 2 seconds.
setInterval(function(){
// let’s send a random number from the server.
var message = “The server number is: “ + Math.random();
// lets send the message to our connected clients.
io.sockets.emit(‘channel_3’, message);
}, 2000);
Now, on the client side, we need to do something with the message from the server, so add this after our “btnSend listener.”
// listen socket on channel 3
socket.on(‘channel_3’, function (data) {
btnSend.innerHTML = data;
});
restart the node server*, and reload the index.html on your browser.
#Isn’t that amazing?
Now you can start to think in all the possible applications for things like this.
###Hope you liked it. =)
You can Grab the files here and you can also read about it on Linked.in and Medium.
Notes:
— Grab your computer with [NodeJS](https://nodejs.org/en/) and [NPM installed](https://www.npmjs.com/).
— To restart the node server, you can hit CMD + R (on mac) and then run “node index.js” again.