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/

Transcript

1. Let’s talk WebSockets
2. ‍ Happy Programmers’ Day ‍
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
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