Socket.IO - Alternative Ways for Real-time Application

2,517
-1

Published on

This slide will describe about what is Socket.IO including how to make use of it

Published in: Technology, Education
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,517
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
20
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Socket.IO - Alternative Ways for Real-time Application

  1. 1. SOCKET.IO – ALTERNATIVE WAYS FOR REAL-TIME APPLICATION CREATED BY VORAKAMOL C.
  2. 2. WHAT IS SOCKET.IO ? CREATED BY VORAKAMOL C.
  3. 3. NOOOOOO! CREATED BY VORAKAMOL C.
  4. 4. SOCKET.IO - NODE.JS MODULE FOR REAL-TIME EXCHANGE DATA BETWEEN SERVER AND CLIENT CREATED BY VORAKAMOL C.
  5. 5. IMAGINE OF TRADITIONAL POLLING… CREATED BY VORAKAMOL C.
  6. 6. TRADITIONAL POLLING Client Server Request Response Request Response Next 30 second… . . . Request Response Next 30 second… CREATED BY VORAKAMOL C.
  7. 7. CLIENT PERIODICALLY SENT REQUEST TO CHECK WITH SERVER EVEN THOUGH THERE IS NOTHING CHANGE IN DATA CREATED BY VORAKAMOL C.
  8. 8. SERVER HAS TO HANDLE A LOT OF UNNECESSARY REQUEST CREATED BY VORAKAMOL C.
  9. 9. NOW, TAKE A BRIEFLY LOOK INTO SOCKET.IO CREATED BY VORAKAMOL C.
  10. 10. 1. REAL-TIME EXCHANGE DATA BETWEEN SERVER AND CLIENT CREATED BY VORAKAMOL C.
  11. 11. 2. VARIOUS TRANSPORTATION METHOD WebSocket Flash Socket HTMLFILE XHR Polling JSONP Polling Fallback method CREATED BY VORAKAMOL C.
  12. 12. 3. PURELY WRITTEN IN JAVASCRIPT ON CLIENT-SIDE WHICH RUN IN THE BROWSER AND SERVER-SIDE CREATED BY VORAKAMOL C.
  13. 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.
  14. 14. GET STARTED WITH SOCKET.IO CREATED BY VORAKAMOL C.
  15. 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. 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. 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. 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. 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. 20. 4. LET’S SEE THE OUTPUT STARTING SERVER CREATED BY VORAKAMOL C.
  21. 21. 4. LET’S SEE THE OUTPUT OPENING WEBSITE CONNECTION HAS BEEN ESTABLISHED TO SERVER CREATED BY VORAKAMOL C.
  22. 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. 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. 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. 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.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×