Building a live chart with Deno, WebSockets, Chart.js and Materialize

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • WorkOS - The modern identity platform for B2B SaaS
  • materialize-tutorials

    Materialize is a streaming database for real-time analytics. This is a collection of Materialize demos and tutorials.

    You can find the code in the backend directory.

  • Chart.js

    Simple HTML5 Charts using the <canvas> tag

    For the frontend, we will not be using any JavaScript framework, but just the Chart.js library.

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  • deno

    A modern runtime for JavaScript and TypeScript.

    import { WebSocketClient, WebSocketServer } from "https://deno.land/x/[email protected]/mod.ts"; import { Client } from "https://deno.land/x/postgres/mod.ts"; // Specify your Materialize connection details const client = new Client({ user: "materialize", database: "materialize", hostname: "materialized", port: 6875, }); await client.connect(); console.log("Connected to Postgres"); // Start a transaction await client.queryObject('BEGIN'); // Declare a cursor without a snapshot await client.queryObject(`DECLARE c CURSOR FOR TAIL score_view_mz WITH (SNAPSHOT = false)`); const wss = new WebSocketServer(8080); wss.on("connection", async function (ws: WebSocketClient) { console.log("Client connected"); setInterval(async () => { const result = await client.queryObject<{ mz_timestamp: string; mz_diff: number, user_id: number, user_score: number}>(`FETCH ALL c`); for (const row of result.rows) { let message = { user_id: row.user_id, user_score: row.user_score }; broadcastEvent(message); } } , 1000); }); // Broadcast a message to all clients const broadcastEvent = (message: any) => { wss.clients.forEach((ws: WebSocketClient) => { ws.send(JSON.stringify(message)); }); }

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts