Socket.IO - Alternative Ways for Real-time Application

SOCKET.IO – ALTERNATIVE WAYS
FOR REAL-TIME APPLICATION
CREATED BY VORAKAMOL C.

WHAT IS SOCKET.IO ?

NOOOOOO!

SOCKET.IO - NODE.JS MODULE
FOR REAL-TIME EXCHANGE DATA
BETWEEN SERVER AND CLIENT

IMAGINE OF TRADITIONAL POLLING…

TRADITIONAL POLLING
Client Server
Request
Response
Request
Response
Next 30 second…
.
.
.
Request
Response
Next 30 second…

CLIENT PERIODICALLY SENT REQUEST
TO CHECK WITH SERVER
EVEN THOUGH THERE IS NOTHING
CHANGE IN DATA

SERVER HAS TO HANDLE A LOT OF
UNNECESSARY REQUEST

NOW, TAKE A BRIEFLY
LOOK INTO SOCKET.IO

1. REAL-TIME EXCHANGE DATA
BETWEEN SERVER AND CLIENT

2. VARIOUS TRANSPORTATION METHOD
WebSocket
Flash Socket
HTMLFILE
XHR Polling
JSONP Polling
Fallback method

3. PURELY WRITTEN IN JAVASCRIPT
ON CLIENT-SIDE WHICH RUN IN THE
BROWSER AND SERVER-SIDE

4. CROSS BROWSER AND PLATFORM
Support a lot of browser on both PC and
Mobile
3rd Party Open Source implemented for
Android, iOS, etc…

GET STARTED WITH
SOCKET.IO

1. SETTING UP ENVIRONMENT
ON SERVER-SIDE
Installing Socket.io, express module in target folder
npm install socket.io express

SENDER
RECEIVER
emit("test", {v1: "abc", v2:"def"});
signaling data
socket.on("test", function(data){
console.log("Received data is " + data);
});
BASIC UNDERSTANDING

2. CODING ON SERVER-SIDE
var socket = require('socket.io');
var express = require('express');
var http = require('http');
var app = express();
var server = http.createServer(app);
var io = socket.listen( server );
io.sockets.on('connection', function(socket){
socket.on('user_login', function(data){
console.log(data.username + " enters the system!");
io.sockets.socket(socket.id).emit('login_success');
});
});
server.listen(8080);
app.js
When
received a
signal called
“user_login”,
execute
statement
inside

3. CODING ON CLIENT-SIDE
<html>
<head>
<script src="scripts/socket.io/node_modules/socket.io-client/dist/socket.io.js"></script>
<script src="scripts/jquery-1.11.0.min.js"></script>
<script>
$(function(){
var socket = io.connect( 'http://10.170.23.18:8080' );
socket.on('connect', function(data){
socket.on('login_success', function(){
$('#login_area').html("Login Success!");
});
});
$('#login_btn').click(function(){
socket.emit('user_login', {username: $('#login_textbox').val()});
});
});
</script>
</head>
index.php

3. CODING ON CLIENT-SIDE
<body>
<div id="login_area">
Enter name: <input type="text" id="login_textbox" />
<button type="button" id="login_btn">Login!</button>
</div>
</body>
</html>
index.php

4. LET’S SEE THE OUTPUT
STARTING SERVER

OPENING WEBSITE
CONNECTION HAS
BEEN ESTABLISHED
TO SERVER

TYPING THE NAME
AND CLICK LOGIN
BUTTON
CLIENT WILL EMIT THE SIGNAL CALLED “user_login” ALONG WITH ARGUMENT
CALLED “username” TO THE SERVER

SERVER RECEIVED THE SIGNAL CALLED “user_login” ALONG WITH
USERNAME. NEXT, THE SERVER WILL SHOW THE NAME OF THE USER
WHO LOG INTO THE SYSTEM AND EMIT THE SIGNAL CALLED
“login_success” BACK TO THAT CLIENT IN ORDER TO TELL THE CLIENT
THAT LOGIN PROCESS IS SUCCESS

WHEN THE CLIENT RECEIVED THE SIGNAL CALLED “login_success”,
THE MESSAGE “Login Success!” WILL SHOW UP ON THE SCREEN

REFERENCES
• http://socket.io/
• https://github.com/LearnBoost/Socket.IO/wiki/Configuring-
Socket.IO
• http://java.dzone.com/articles/getting-started-socketio-and
• http://www.sitepoint.com/chat-application-using-socket-io/
• http://code.tutsplus.com/tutorials/real-time-chat-with-nodejs-
socketio-and-expressjs--net-31708
• http://tamas.io/advanced-chat-using-node-js-and-socket-io-
episode-1/
• http://en.wikipedia.org/wiki/Socket.IO

Socket.IO - Alternative Ways for Real-time Application

More Related Content

What's hot

Viewers also liked

Similar to Socket.IO - Alternative Ways for Real-time Application

Recently uploaded

Socket.IO - Alternative Ways for Real-time Application