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/

128396e8ca8f78ba6df4b3997fc545b7?s=128

Mishal Shah

September 12, 2020
Tweet

Transcript

  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