Slide 1

Slide 1 text

Let’s talk WebSockets

Slide 2

Slide 2 text

‍ Happy Programmers’ Day ‍

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

About me ‍ Software Engineer in IoT Group, Cisco ‍ GSoC ‘19 Student, GCI/GSoC Mentor @ ns-3 Lead Organized, HackVerse ‘20 Graduated from NITK, Surathkal

Slide 5

Slide 5 text

⚠ Disclaimer

Slide 6

Slide 6 text

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!

Slide 7

Slide 7 text

Internet Protocol Suite Application Layer HTTP, WebSockets Transport Layer TCP, UDP Internet Layer IPv4, IPv6

Slide 8

Slide 8 text

HTTP Model Client Server Request Response

Slide 9

Slide 9 text

A bit about HTTP ● Stateless protocol ● Different request methods: GET/POST/PUT/DELETE ● Pull Protocol

Slide 10

Slide 10 text

Real Time Communications

Slide 11

Slide 11 text

Option #1 Normal Polling Check for data every n seconds

Slide 12

Slide 12 text

Option #2 Long Polling Keep the request alive until data is received, send again once data is available

Slide 13

Slide 13 text

Disadvantages of Polling ● Consumes lot of bandwidth ● Keeps server threads blocked

Slide 14

Slide 14 text

WebSockets ● Provides bi-directional, full-duplex communications ● WebSockets is an upgrade request over HTTP ● Uses ws:// or wss:// (instead of http:// or https://)

Slide 15

Slide 15 text

Upgrade Request

Slide 16

Slide 16 text

Initializing a WebSocket

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Use Case of WebSockets ● Real-time analytics ● Streaming ● Instant messaging & chat ● Documents Collaboration ● Games ● Anything else that requires low-latency real time connections ⚡

Slide 19

Slide 19 text

Socket.IO ● JavaScript based library for WebSockets ● Works on every platform, browser and device ● Handles auto-reconnection (something not available in WebSockets) ● Namespacing

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

Tools ● Node ● NPM ● Any IDE/Text Editor - I’ll use VS Code ● Socket.IO

Slide 22

Slide 22 text

Namespacing Example

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

No content