Websockets Bring Light at the End of the Tunnel Presented by JOEL - - PowerPoint PPT Presentation

▶

Feb 29, 2024 304 likes •541 views

Websockets Bring Light at the End of the Tunnel Presented by JOEL LORD THINK. CODE. COLLABORATE. Node PDX June 20 th , 2016 spiria.com Aboot me, eh? JOEL LORD - Javascript junkie - Tinkerer - Technology enthusiast @joel__lord

SLIDE 1

THINK. CODE. COLLABORATE.

spiria.com

Websockets Bring Light at the End of the Tunnel

JOEL LORD

Presented by Node PDX – June 20th, 2016

SLIDE 2

Aboot me, eh?

JOEL LORD

Javascript junkie
Tinkerer
Technology enthusiast

@joel__lord #nodepdx

SLIDE 3

WEB SOCKETS

What are they?

SLIDE 4

WebSocket is a protocol providing full-duplex communications channels over a single TCP connection.

The WebSocket protocol was standardized by the IETF as RFC 6455 in 2011, and the WebSocketAPI in Web IDL is being standardized by the W3C.

@joel__lord #nodepdx

SLIDE 5

Typical real-time

NORMAL HTTP REQUESTS

@joel__lord #nodepdx

Client Server Time

SLIDE 6

Typical real-time

POLLING

@joel__lord #nodepdx

Client Server Time

SLIDE 7

Typical real-time

LONG-POLLING

@joel__lord #nodepdx

Client Server Time

SLIDE 8

Typical real-time

WEBSOCKETS

@joel__lord #nodepdx

Client Server Time

SLIDE 9

Typical real-time

WHAT ABOUT SERVER-SIDE EVENTS?

@joel__lord #nodepdx

Client Server Time

SLIDE 10

Pros and cons.

SLIDE 11

Bi-directional data transfers Fast Low bandwith Detects connection and disconnection

01

PROS

@joel__lord #nodepdx

SLIDE 12

Lose the caching capabilities built in XHR and HTTP Architectural changes in the application

02

CONS

@joel__lord #nodepdx

SLIDE 13

WebSockets in the Wild

REAL WORLD CASES

@joel__lord #nodepdx

Real time synchronization of data amongst a group of users (trello.com)
Live feeds (Twitter stream)
Long server processes and providing ETAs to users
Multiplayer HTML5 games
Chat clients (Slack)

SLIDE 14

Using WebSockets with HTML5

ESTABLISHING A CONNECTION

@joel__lord #nodepdx

SLIDE 15

Using WebSockets with HTML5

EVENTS

@joel__lord #nodepdx

SLIDE 16

Using WebSockets with HTML5

SENDING DATA TO THE SERVER

@joel__lord #nodepdx

SLIDE 17

Getting started

VARIOUS IMPLEMENTATIONS

@joel__lord #nodepdx

PubNub (cloud)
Ratchet (php)
Jetty (Java)
socket.io (node.js)

SLIDE 18

Here comes Socket.io!

WHAT’S SO COOL ABOUT IT?

@joel__lord #nodepdx

Server and client-side implementation
Falls back to long polling when necessary (IE 9 ฀)
Adds features like heartbeats, timeouts, and disconnection support not

provided in WebSocket API

Easy stuff !

SLIDE 19

Here comes Socket.io!

CLIENT SIDE

@joel__lord #nodepdx

SLIDE 20

Here comes Socket.io!

SERVER SIDE

@joel__lord #nodepdx

SLIDE 21

LET’S GET SERIOUS

Coding time!

SLIDE 22

THINK. CODE. COLLABORATE.

spiria.com

The end!

JOEL LORD

Node PDX – June 20th, 2016 Presented by

@joel__lord #nodepdx /joellord