Socket.IO - Alternative Ways for Real-time Application
•
3 gostaram•4,758 visualizações
This slide will describe about what is Socket.IO including how to make use of it
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Destaque
Destaque (20)
Semelhante a Socket.IO - Alternative Ways for Real-time Application
Semelhante a Socket.IO - Alternative Ways for Real-time Application (20)
Último
Último (20)
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.
- 14. GET STARTED WITH SOCKET.IO 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.