socket.io - alternative ways for real-time application
DESCRIPTION
This slide will describe about what is Socket.IO including how to make use of itTRANSCRIPT
SOCKET.IO – ALTERNATIVE WAYS
FOR REAL-TIME APPLICATION CREATED BY VORAKAMOL C.
WHAT IS SOCKET.IO ?
CREATED BY VORAKAMOL C.
NOOOOOO!
CREATED BY VORAKAMOL C.
SOCKET.IO - NODE.JS MODULE
FOR REAL-TIME EXCHANGE DATA
BETWEEN SERVER AND CLIENT
CREATED BY VORAKAMOL C.
IMAGINE OF TRADITIONAL POLLING…
CREATED BY VORAKAMOL C.
TRADITIONAL POLLING
Client Server
Request
Response
Request
Response
Next 30 second…
.
.
.
Request
Response
Next 30 second…
CREATED BY VORAKAMOL C.
CLIENT PERIODICALLY SENT REQUEST
TO CHECK WITH SERVER
EVEN THOUGH THERE IS NOTHING
CHANGE IN DATA
CREATED BY VORAKAMOL C.
SERVER HAS TO HANDLE A LOT OF
UNNECESSARY REQUEST
CREATED BY VORAKAMOL C.
NOW, TAKE A BRIEFLY
LOOK INTO SOCKET.IO
CREATED BY VORAKAMOL C.
1. REAL-TIME EXCHANGE DATA
BETWEEN SERVER AND CLIENT
CREATED BY VORAKAMOL C.
2. VARIOUS TRANSPORTATION METHOD
WebSocket
Flash Socket
HTMLFILE
XHR Polling
JSONP Polling
Fallback method
CREATED BY VORAKAMOL C.
3. PURELY WRITTEN IN JAVASCRIPT
ON CLIENT-SIDE WHICH RUN IN THE
BROWSER AND SERVER-SIDE
CREATED BY VORAKAMOL C.
4. CROSS BROWSER AND PLATFORM
Support a lot of browser on both PC and
Mobile
3rd Party Open Source implemented for
Android, iOS, etc…
CREATED BY VORAKAMOL C.
GET STARTED WITH
SOCKET.IO
CREATED BY VORAKAMOL C.
1. SETTING UP ENVIRONMENT
ON SERVER-SIDE
Installing Socket.io, express module in target folder
npm install socket.io express
CREATED BY VORAKAMOL C.
SENDER
RECEIVER
emit("test", {v1: "abc", v2:"def"});
signaling data
socket.on("test", function(data){
console.log("Received data is " + data);
});
BASIC UNDERSTANDING
CREATED BY VORAKAMOL C.
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
CREATED BY VORAKAMOL C.
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
CREATED BY VORAKAMOL C.
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
CREATED BY VORAKAMOL C.
4. LET’S SEE THE OUTPUT
STARTING SERVER
CREATED BY VORAKAMOL C.
4. LET’S SEE THE OUTPUT
OPENING WEBSITE
CONNECTION HAS
BEEN ESTABLISHED
TO SERVER
CREATED BY VORAKAMOL C.
4. LET’S SEE THE OUTPUT
TYPING THE NAME
AND CLICK LOGIN
BUTTON
CLIENT WILL EMIT THE SIGNAL CALLED “user_login” ALONG WITH ARGUMENT
CALLED “username” TO THE SERVER
CREATED BY VORAKAMOL C.
4. LET’S SEE THE OUTPUT
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 CREATED BY VORAKAMOL C.
4. LET’S SEE THE OUTPUT
WHEN THE CLIENT RECEIVED THE SIGNAL CALLED “login_success”,
THE MESSAGE “Login Success!” WILL SHOW UP ON THE SCREEN
CREATED BY VORAKAMOL C.
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
CREATED BY VORAKAMOL C.