SlideShare a Scribd company logo

Socket.IO - Alternative Ways for Real-time Application

•
•
Vorakamol Choonhasakulchok
Vorakamol Choonhasakulchok

Socket.io is a Node.js module for real-time data exchange between a server and client. It allows for real-time communication using various transport methods like WebSocket. Socket.io avoids unnecessary requests, unlike traditional polling. It works across browsers and platforms. To use Socket.io, install it on the server, code event handling and signaling on both the server and client-side JavaScript. When an event occurs, like logging in, data can be emitted and received in real-time.

1 of 25
Download to read offline
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.

More Related Content

Socket.IO - Alternative Ways for Real-time Application

  • 1. SOCKET.IO – ALTERNATIVE WAYS FOR REAL-TIME APPLICATION CREATED BY VORAKAMOL C.
  • 2. WHAT IS SOCKET.IO ? CREATED BY VORAKAMOL C.
  • 4. SOCKET.IO - NODE.JS MODULE FOR REAL-TIME EXCHANGE DATA BETWEEN SERVER AND CLIENT CREATED BY VORAKAMOL C.
  • 5. IMAGINE OF TRADITIONAL POLLING… CREATED BY VORAKAMOL C.
  • 6. TRADITIONAL POLLING Client Server Request Response Request Response Next 30 second… . . . Request Response Next 30 second… CREATED BY VORAKAMOL C.
  • 7. CLIENT PERIODICALLY SENT REQUEST TO CHECK WITH SERVER EVEN THOUGH THERE IS NOTHING CHANGE IN DATA CREATED BY VORAKAMOL C.
  • 8. SERVER HAS TO HANDLE A LOT OF UNNECESSARY REQUEST CREATED BY VORAKAMOL C.
  • 9. NOW, TAKE A BRIEFLY LOOK INTO SOCKET.IO CREATED BY VORAKAMOL C.
  • 10. 1. REAL-TIME EXCHANGE DATA BETWEEN SERVER AND CLIENT CREATED BY VORAKAMOL C.
  • 11. 2. VARIOUS TRANSPORTATION METHOD WebSocket Flash Socket HTMLFILE XHR Polling JSONP Polling Fallback method CREATED BY VORAKAMOL C.
  • 12. 3. PURELY WRITTEN IN JAVASCRIPT ON CLIENT-SIDE WHICH RUN IN THE BROWSER AND SERVER-SIDE CREATED BY VORAKAMOL C.
  • 13. 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.
  • 15. 1. SETTING UP ENVIRONMENT ON SERVER-SIDE Installing Socket.io, express module in target folder npm install socket.io express CREATED BY VORAKAMOL C.
  • 16. 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.
  • 17. 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.
  • 18. 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.
  • 19. 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.
  • 20. 4. LET’S SEE THE OUTPUT STARTING SERVER CREATED BY VORAKAMOL C.
  • 21. 4. LET’S SEE THE OUTPUT OPENING WEBSITE CONNECTION HAS BEEN ESTABLISHED TO SERVER CREATED BY VORAKAMOL C.
  • 22. 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.
  • 23. 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.
  • 24. 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.
  • 25. 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.