Real-Time

(& Graphing!)

Basic Charting

D3

What is D3

  • Based on three.js (by Mr. Doob!)
  • SVG library that creates graphs
  • Is very powerful
  • Can do DOM manipulation
  • Can be found here
  • Is complex and granular
  • React does not naturally work well with D3 as they fight over control of the DOM.
    • If you avoid that fight then you'll be OK. (guide)

NVD3

Exercise

  • Make a NVD3 pie chart with 3 sectors
    • Happy
    • OK
    • Sad
  • make some data and feed it in
  • render the chart on the page

RealTime Data

What is RealTime Data

  • It is data that immediately updates in the UIs for all users across the system
    • Contrast this with REST, where they have to refresh
  • SIDE NOTE: If your data doesn't immediately need to be updated in the UI there is a technique called long-polling where we make AJAX calls at short intervals (usually using setInterval). This is a useful middle-ground between the two.

How is it achieved?

// Create WebSocket connection.
const socket = new WebSocket('ws://localhost:8080');

// Connection opened
socket.addEventListener('open', function (event) {
    socket.send('Hello Server!');
});

// Listen for messages
socket.addEventListener('message', function (event) {
    console.log('Message from server', event.data);
});

WebTransport: Successor to websockets

Socket Library

https://socket.io/

Stupidly simple demo

FireBase

Firebase is:

Cloud Firestore

  • Docs are annoying
  • It's an object tree, so arrays are just objects where you provide incremental indexes
  • react CRUD guide
  • It's NoSQL, so there's no write-level schema
    • i.e. It's not available 'out of the box', you'd have to add an intervening server to ensure data purity

We're going to:

  • Set up 1 instance of firebase
  • add the firebase script to our graph page
  • update our graph as new data comes in

WebRTC

What is it?

  • Sockets:
    • Everyone talks through the server
    • Huge jam
    • Delay in propagating info
    • If server fails, all down and cache required
  • WebRTC:
    • Server brokers the connection but then it's between the clients
    • Good for things like video/audio chat
    • Uses UDP not TCP, so faster
      • TCP - checks packets to ensure no data loss
      • UDP - doesn't. Losing a few frames of a video won't be a big problem
    • Browser support (OLD Edge & Safari require plugin)

Docs

DEMO

  • TURN YOUR ZOOM MICS DOWN LOW!!! XD
  • demo

JS: Web Sockets, Graphs & Real-time DBs

By James Sherry

JS: Web Sockets, Graphs & Real-time DBs

Intro to D3.js; D3 wrappers, like NVD3.js, and; firebase (Google's socketed Database)

  • 1,626

More from James Sherry