Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JS Fest 2018. Martin Chaov. SSE vs WebSockets vs Long Polling

402 views

Published on

If you have a huge amount of data to deliver quickly you might have tried using web sockets to do so. However, sockets are hard to maintain and scale, not to mention multiplex. In this presentation I do comparison of the three methods of delivering data to the front-end. Server-Sent Events gives you the ability to deliver your content with less overhead on the infrastructural side. In this talk I will cover SSE, Long-Polling, and Web-Sockets with their pros and cons, including technical demo. We will touch a bit on connectionless push and available optimizations for the mobile network.

Published in: Education
  • Be the first to comment

  • Be the first to like this

JS Fest 2018. Martin Chaov. SSE vs WebSockets vs Long Polling

  1. 1. SSE vs Web-sockets for unidirectional data flow over HTTP/2by Martin Chaov
  2. 2. Hi, I’m Martin! • Tech enthusiast • Software architect • Ex-designer
  3. 3. LONG POLLING
  4. 4. WEB-SOCKETS
  5. 5. # OF CONNECTIONS
  6. 6. SSE
  7. 7. // Client side implementation // subscribe for messages var source = new EventSource(‘URL’); // handle messages source.onmessage = function(event) { // Do something with the data: event.data; };
  8. 8. // Handle build-in events source.onopen source.onmessage source.onclose // Handle custom events source.addEventListenet("customEvent", handler);
  9. 9. // Server implementation function handler(response) { response.writeHead(200, { 'Content-Type': 'text/event-stream’, 'Cache-Control': 'no-cache’, 'Connection': 'keep-alive’ }); response.write('id: UniqueIDn’); response.write("data: " + data + 'nn'); }
  10. 10. // SERVER response.write('id: UniqueIDn'); response.write('event: addn'); response.write('retry: 10000n'); response.write("data: " + data + 'nn’); // CLIENT source.addEventListener("add", function(event) { // do stuff with data event.data; });
  11. 11. ... id: 54 event: add data: "[{SOME JSON DATA}]" id: 55 event: remove data: JSON.stringify(some_data) id: 56 event: remove data: { data: "msg" : "alternate JSON"n data: "field": "value"n data: "field2": "value2"n data: }nn ...
  12. 12. Connect  • LinkedIn: https://goo.gl/CRRJ2Y • Mail: martin.c@sbtech.com • Github: https://github.com/mchaov

×