Introduction to WebSockets Presentation
0 likes6,963 views
WebSockets allow for bidirectional communication between a client and server. They establish a persistent connection that allows real-time data transmission with low latency compared to HTTP. Socket.io makes WebSockets compatible across browsers by using the best available protocol. It works by having the client request an upgrade to WebSocket from an HTTP connection, establishing a full-duplex communication channel between client and server that stays open.
Introduction to WebSockets Presentation
- 2. What is a WebSocket? • Communication protocol used to send / receive data on the Internet • Like HTTP, but on steroids... WebSockets are wayyy more efficient • Persistent 2-way connection between browser <--> server • Easy to build real-time applications: • Chat • Notifications • Online games • Financial trading • Data visualization dashboards • Live maps • Collaboration apps
- 3. Half-duplex (like walkie-talkie) Full-duplex (like phone) Traffic flows in 1 direction at a time Bi-directional traffic flow HTTP WebSocket Roger that. Over and out... ...Who’s Roger? I knooooww Right??!!! Like totalllyyyy For real??
- 4. Half-duplex (like walkie-talkie) Full-duplex (like phone) Traffic flows in 1 direction at a time Bi-directional traffic flow Connection is typically closes after 1 request / response pair Connection stays open 1. Request from client to server 2. Response from server to client Both client and server are simultaneously “emitting” and “listening” (.on events) Headers (1000s of bytes) Uses “frames” (2 bytes) 150ms to establish new TCP connection for each HTTP message 50ms for message transmission Polling overhead (constantly sending messages to check if new data is ready) No polling overheard (only sends messages when there is data to send) HTTP WebSocket
- 5. Life Before WebSockets... Are we there yet? Are we there yet?Are we there yet? Are we there yet?Are we there yet? • Simulate real-time communication with HTTP • AJAX: browser sends requests at regular intervals to check for updates but headers cause latency and polling is very resource intensive • Comet: server push technique but complex, non-standardized implementation • Streaming: more efficient than AJAX and Comet but only 1 direction
- 8. How do WebSockets work? Heroku Server Your Phone Your Computer 2. Server responds with requested files, which include information for connecting to socket server 1. Client sends HTTP GET request to URL (https://socketio-experimentia.herokuapp.com/) 3. Client sends HTTP GET request with “Connection: Upgrade” in the header, server confirms support, and connection is upgraded to WebSockets (called the “handshake”) until one side disconnects
- 9. Is there ANYTHING bad about WebSockets? • Not all browsers support WebSockets • Different browsers treat WebSockets differently Released March 8, 2017 First supported March 2, 2016 Support as of March 8, 2017
- 10. Socket.io • 2 JavaScript libraries: • socket.io-client (front-end) • socket.io (back-end using NodeJS) • Cross-browser compatibility by automatically using the best protocol for the user’s browser • WebSockets • Comet • Flash
- 11. Socket.io Server Configuration // add the HTTP server var http = require('http'); // add Express server framework for NodeJS var express = require('express'); // add Socket.io server framework var socketIO = require('socket.io'); // create instance of Express var app = express(); // create Express HTTP server var server = http.createServer(app); // tell Express HTTP server which port to run on server.listen(8080); // tell Socket.io to add event listeners to Express HTTP server var io = socketIO().listen(server); 1. Create HTTP server 2. Add WebSocket support to HTTP server
- 12. Socket.io Server Code // listens for new socket connections from clients // triggers a callback function when ‘connection’ event occurs io.sockets.on('connection', function(socket) { // do stuff (ex. keep track of # of socket connections) connections.push(socket); // emit / broadcast custom event and data (payload) to client io.sockets.emit(’updateStudents', payload); } // listen for custom events “emitted” by client socket.on('join', function(payload) { var newStudent = { socketID: this.id, name: payload.name } this.emit('joined', newStudent); } 1. Listen 2. Emit 1. Listen 2. Emit
- 13. Socket.io Client Code // add Socket.io client framework var io = require(’socket.io-client'); // add Socket.io client framework this.socket = io('http://localhost:3000'); // listen for socket connection from server this.socket.on(’connect', function() { var newStudent = {name: nameFromForm, type: “student”}; // emit custom event with data (newStudent) back to server this.emit('join', newStudent); } // listen for custom events with data (payload) “emitted” by server this.socket.on('joined', function(payload) { // do stuff with payload... } 1. Listen 2. Emit
- 16. Key References • https://www.lynda.com/Web-Development-tutorials/Building-Polling- App-Socket-IO-React-js/387145-2.html • https://socket.io/get-started/chat/ • http://www.jonahnisenson.com/what-are-websockets-and-why-do-i- need-socket-io/ • https://nodesource.com/blog/understanding-socketio/ • http://enterprisewebbook.com/ch8_websockets.html • http://blog.teamtreehouse.com/an-introduction-to-websockets • https://www.pubnub.com/blog/2015-01-05-websockets-vs-rest-api- understanding-the-difference/