Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Let's talk WebSockets

128396e8ca8f78ba6df4b3997fc545b7?s=47 Mishal Shah
September 12, 2020

Let's talk WebSockets

An Introduction to WebSockets and comparing the performance of AJAX Requests with WebSockets using Socket.IO library.

Complete video: https://www.youtube.com/watch?v=2G8hrYeDM20

Code built during the session is available here: https://github.com/mishal23/ajax-ws

Mishal Shah: https://mishal23.github.io

Credits: Thanks to K Rahul Reddy & Madhumitha Nara for reviewing my presentation and the code to be presented in the talk!

Connect with them here:
K Rahul Reddy: https://www.linkedin.com/in/k-rahul-reddy/
Madhumitha Nara: https://www.linkedin.com/in/madhumitha-nara/


Mishal Shah

September 12, 2020


  1. Let’s talk WebSockets

  2. ‍ Happy Programmers’ Day ‍

  3. None
  4. About me ‍ Software Engineer in IoT Group, Cisco ‍

    GSoC ‘19 Student, GCI/GSoC Mentor @ ns-3 Lead Organized, HackVerse ‘20 Graduated from NITK, Surathkal
  5. ⚠ Disclaimer

  6. Table of Contents • Introduction to HTTP • Real Time

    Communications • Introduction to WebSockets • Browser Support for WebSockets • Use-cases of WebSockets • Socket.IO Library • Hands on!
  7. Internet Protocol Suite Application Layer HTTP, WebSockets Transport Layer TCP,

    UDP Internet Layer IPv4, IPv6
  8. HTTP Model Client Server Request Response

  9. A bit about HTTP • Stateless protocol • Different request

    methods: GET/POST/PUT/DELETE • Pull Protocol
  10. Real Time Communications

  11. Option #1 Normal Polling Check for data every n seconds

  12. Option #2 Long Polling Keep the request alive until data

    is received, send again once data is available
  13. Disadvantages of Polling • Consumes lot of bandwidth • Keeps

    server threads blocked
  14. WebSockets • Provides bi-directional, full-duplex communications • WebSockets is an

    upgrade request over HTTP • Uses ws:// or wss:// (instead of http:// or https://)
  15. Upgrade Request

  16. Initializing a WebSocket

  17. WebSockets Browser Compatibility source: https://caniuse.com/

  18. Use Case of WebSockets • Real-time analytics • Streaming •

    Instant messaging & chat • Documents Collaboration • Games • Anything else that requires low-latency real time connections ⚡
  19. Socket.IO • JavaScript based library for WebSockets • Works on

    every platform, browser and device • Handles auto-reconnection (something not available in WebSockets) • Namespacing
  20. None
  21. Tools • Node • NPM • Any IDE/Text Editor -

    I’ll use VS Code • Socket.IO
  22. Namespacing Example

  23. Let’s connect https://mishal23.github.io mishal23 @1998Mishal

  24. None