2018/11/28 How-to: Make your application real-time

## How-to: Make your application real-time https://hackmd.io/p/parisjs-realtime --- ## We'll invite you to play with us!<br>Get ready to join with your phone or laptop. --- # Join the Demo! https://hackmd.io/parisjs-realtime-demo --- # <i class="fa fa-file-text"></i> HackMD Build community with open collaboration ---- <style> .reveal section img { border: none; background: none; } </style> ![](https://i.imgur.com/H1OLOmh.png =80%x) Techstars backed ---- ## Helping developers to enjoy writing documentations. :100: :book: :books: ---- ## Help open source technologies to build an active developer community. <i class="fa fa-github fa-4x"></i> --- <img src="https://i.imgur.com/PTbB46S.jpg" style="width:300px;height:300px;border-radius:50%"/> ## Max Wu #### CTO of HackMD I love great product and build them.<br>I'm developing my dream with code. --- # What is real-time? Enable users to receive information as soon as it is published by its authors. ----  ---- ### 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<br>70 ms ----  ---- ### Hard to feel it's real-time if it only shows when data arrives ---- # So you fake it! :stuck_out_tongue_winking_eye: 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 --- ## What makes web real-time? - You need to connect network  :stuck_out_tongue_closed_eyes: - So that server can receive your changes - And other clients are able to receive updates - Let's see how HTTP works ---- ## 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  :cry:  ---- ## 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! :triumph: (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 :tired_face:  ---- ## WebSocket comes to rescue! :thumbsup: :thumbsup: :thumbsup: ---- # WebSocket - bidirectional communication  :tada: - smaller data frame (~1/3 than HTTP)  :package: - lower latency (~4x faster than HTTP)  :zap: [ref.](https://blog.feathersjs.com/http-vs-websockets-a-performance-comparison-da2533f13a77) ----  ---- ### Efficiency | | HTTP | WebSocket | | -------- | -------- | -------- | | Overhead | 100s bytes | 2-6 bytes | | Latency (traditional) | New connection every time | None: use existing connection | | Latency (long-polling) | Time to set up next request | No waiting |  [ref.](https://www.slideshare.net/peterlubbers/html5-real-time-and-websocket/47-WebSocket_Efficiency_HTTP_WebSocketOverhead_100s)  --- ## What can you build with WebSocket? see some examples ---- ### Collaborative text editor ## <i class="fa fa-file-text"></i> HackMD :sparkles: https://hackmd.io :sparkles: ---- ## `Agar.io` An online multipleplayer game  ---- ## <span style="color: black;"> Online chat room</span> https://socketio-chat-example.now.sh/  ---- # <i class="fa fa-github"></i> 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://i.imgur.com/gPH7VBw.png =800x) https://caniuse.com/#search=websocket --- ## Time for `Socket.IO` :rocket: ---- ## `Socket.IO` :star2: 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 :smirk: ---- ## `Socket.IO` :stars: - Intuitive APIs - Easy to broadcast multiple clients - Built-in logic for rooms and namespaces :yellow_heart:  --- ## Let's make a chat room with `Socket.IO` ---- ## Installation <div> Client ```htmlmixed= <script src="/socket.io/socket.io.js"></script> ``` <small>Include `socket.io-client` script in the html.</small> </div>  ---- ## Installation <div> Server ``` npm install --save socket.io ``` <small>Install `socket.io` from npm</small> </div>  <div> ```javascript= const server = require('http').createServer() const io = require('socket.io')(server) server.listen(3000) ``` <small>Create HTTP server and bind with `socket.io` in the node.js app.</small> </div>  ---- ## Client establishes connection ```javascript= const socket = io() ```  <small>Client tries to connect chat room</small>  ---- ## Server listens on connection ```javascript= io.on('connection', socket => { console.log('a user connected') socket.on('disconnect', () => { console.log('user disconnected') }) }) ```  <small>Server accepts client connection</small>  ---- ## Server broadcasts to everyone ```javascript= io.emit('room message', 'room is ready') ```  <small>Server broadcasts room status</small>  ---- ## Client emits event ```javascript= socket.emit('chat message', 'hello world!') ```  <small>Client emits chat message to room</small>  ---- ## Server listens on event ```javascript= socket.on('chat message', msg => { console.log('message: ' + msg) }) ```  <small>Server receives the message</small>  ---- ## Server sends to everyone excepts for a certain socket ```javascript= io.on('connection', socket => { socket.on('chat message', msg => { console.log('message: ' + msg) socket.broadcast.emit(msg) }) }) ```  <small>Server broadcasts chat message to other clients</small>  [read more](https://socket.io/get-started/chat) [emit cheatsheet](https://socket.io/docs/emit-cheatsheet/)  ----  --- ## Server-Sent Events an alternative for sending from server to client ---- ## 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 ![](https://i.imgur.com/vtCKu94.png =800x) <small>Can be easily polyfilled!</small> https://caniuse.com/#search=server%20sent --- ### Comparsion | | HTTP | WebSocket | SSE | | -------- | -------- | -------- | ----- | | Direction | Client to Server | Bidirectional | Server to Client | | Native support | 100% | 90% | 84% | | Overhead | High | Low | Medium | | Latency | 1-2s | < 1s | 1s |  --- ## TL;DR - You can fake the real-time experience - long-polling is the old way to be real-time - WebSocket is the real bidirectional communication - `Socket.IO` is the one for all - Server-Sent Events with HTTP/2 can be an alternative --- # Thanks for listening! Do you have any question? <i class="fa fa-github"></i> <i class="fa fa-twitter"></i> @jackycute <i class="fa fa-file-text"></i> HackMD.io --- ## References - [Why are movies shown in 24fps while 60fps looks more real?](https://www.quora.com/Why-are-movies-shown-in-24fps-while-60fps-looks-more-real) - [An Introduction to WebSockets](https://blog.teamtreehouse.com/an-introduction-to-websockets) - [Engine.IO: the realtime engine](https://github.com/socketio/engine.io#goals) - [What Socket.IO is](https://socket.io/docs/#What-Socket-IO-is) ---- ## References - [Ultra fast applications using Node.js](https://openclassrooms.com/en/courses/2504541-ultra-fast-applications-using-node-js/2505653-socket-io-let-s-go-to-real-time) - [Building a Node.js WebSocket Chat App with Socket.io and React](https://itnext.io/building-a-node-js-websocket-chat-app-with-socket-io-and-react-473a0686d1e1) - [How JavaScript works: Deep dive into WebSockets and HTTP/2 with SSE + how to pick the right path](https://blog.sessionstack.com/how-javascript-works-deep-dive-into-websockets-and-http-2-with-sse-how-to-pick-the-right-path-584e6b8e3bf7) - [Polling vs SSE vs WebSocket— How to choose the right one ](https://codeburst.io/polling-vs-sse-vs-websocket-how-to-choose-the-right-one-1859e4e13bd9)