Techstars backed

Helping developers to enjoy writing documentations.

Help open source technologies to build an active developer community.

How fast will you consider it's real-time?

60 FPS makes a smooth video.

60 frames per second (FPS)

1000 millisecond / 60 frames
~= 16.67 ms/frame

16.67 ms

for such a computation

The average network latency is
70 ms

Hard to feel it's real-time

if it only shows when data arrives

So you fake it!

that's what most modern web app does

Optimistic lock

• Show as soon as user inputs it
• Put the operation into buffer and send later
• Rollback if it fails later

traditional HTTP model

1. client sends request to server
2. server responses data to client

It's one way communication

server can't actively push data to client

real-time requires to send updates to client

long-polling HTTP model

1. client sends request to server
2. keeps the connection open
3. client waits until server sends data

Still one way communication

• But it works! (and for a long time)
• HTTP 1.1 is half-duplex,
  traffic flows only go one direction at a time
• HTTP is stateless,
  reduntant information sent with every request and response

WebSocket comes to rescue!

WebSocket

• bidirectional communication
• smaller data frame (~1/3 than HTTP)
• lower latency (~4x faster than HTTP)

ref.

Efficiency

ref.

Collaborative text editor

HackMD

https://hackmd.io

Agar.io

An online multipleplayer game

Online chat room

https://socketio-chat-example.now.sh/

GitHub

also uses it to update pages

• When other people comment on the issue
• When issue has been closed
• When pull request have more commits
• etc…

There's always a catch

https://caniuse.com/#search=websocket

Socket.IO

1. Establishes long-polling connection first
2. Tries to upgrade to WebSocket transports
3. If it fails will fallback to use long-polling

Everyone now is happy

Socket.IO

• Intuitive APIs
• Easy to broadcast multiple clients
• Built-in logic for rooms and namespaces

Installation

<script src="/socket.io/socket.io.js"></script>

Installation

npm install --save socket.io

const server = require('http').createServer()
const io = require('socket.io')(server)
server.listen(3000)

Client establishes connection

const socket = io()

Client tries to connect chat room

Server listens on connection

io.on('connection', socket => {
  console.log('a user connected')
  socket.on('disconnect', () => {
    console.log('user disconnected')
  })
})

Server accepts client connection

Server broadcasts to everyone

io.emit('room message', 'room is ready')

Server broadcasts room status

Client emits event

socket.emit('chat message', 'hello world!')

Client emits chat message to room

Server listens on event

socket.on('chat message', msg => {
  console.log('message: ' + msg)
})

Server receives the message

Server sends to everyone

excepts for a certain socket

io.on('connection', socket => {
  socket.on('chat message', msg => {
    console.log('message: ' + msg)
    socket.broadcast.emit(msg)
  })
})

Server broadcasts chat message to other clients

read more
emit cheatsheet

Server-Sent Events

• It's one way - server pushes to client
• Part of HTML5 standard
• Good with HTTP/2 (which is full-duplex)
• Automatic reconnection and event binding

There's always a catch, again

Can be easily polyfilled!
https://caniuse.com/#search=server sent

References

• Ultra fast applications using Node.js
• Building a Node.js WebSocket Chat App with Socket.io and React
• How JavaScript works: Deep dive into WebSockets and HTTP/2 with SSE + how to pick the right path
• Polling vs SSE vs WebSocket— How to choose the right one