Realtime · Socket.IO

Dashboard recipes

Copy-paste patterns for dashboard engineers. Same protocol as the docs app and SDK examples.

Note

The canonical event catalog lives in the client emits and server events pages.

Connect + project list

After connect you are in the dashboard scope room (see connection). Listen for project:*.

javascriptdashboard-projects.js

import { io } from "socket.io-client"

const socket = io("https://cloud.mudbase.dev", {
  path: "/socket.io/",
  transports: ["websocket", "polling"],
  auth: { token: accessJwt },
})

socket.on("project:created", (p) => console.log("created", p))
socket.on("project:updated", (p) => console.log("updated", p))
socket.on("project:deleted", (p) => console.log("deleted", p))
import { io } from "socket.io-client"

const socket = io("https://cloud.mudbase.dev", {
  path: "/socket.io/",
  transports: ["websocket", "polling"],
  auth: { token: accessJwt },
})

socket.on("project:created", (p) => console.log("created", p))
socket.on("project:updated", (p) => console.log("updated", p))
socket.on("project:deleted", (p) => console.log("deleted", p))

Live table (project + row CRUD)

javascriptdashboard-live-table.js

socket.emit("subscribe:project", projectId)

socket.on("db:create", (evt) => { /* merge row */ })
socket.on("db:update", (evt) => { /* patch row */ })
socket.on("db:delete", (evt) => { /* remove row */ })
socket.emit("subscribe:project", projectId)

socket.on("db:create", (evt) => { /* merge row */ })
socket.on("db:update", (evt) => { /* patch row */ })
socket.on("db:delete", (evt) => { /* remove row */ })

Integration tester

javascriptdashboard-integration.js

socket.emit("integration:join", { projectId, integrationId })

socket.on("integration:execution:completed", (r) => console.log(r))
socket.on("integration:execution:failed", (e) => console.error(e))

socket.emit("integration:execute", {
  projectId,
  integrationId,
  endpoint: "getUserTweets",
  params: { userId: "123" },
  requestData: {},
})
socket.emit("integration:join", { projectId, integrationId })

socket.on("integration:execution:completed", (r) => console.log(r))
socket.on("integration:execution:failed", (e) => console.error(e))

socket.emit("integration:execute", {
  projectId,
  integrationId,
  endpoint: "getUserTweets",
  params: { userId: "123" },
  requestData: {},
})

Wallet monitor

javascriptdashboard-wallet.js

socket.emit("wallet:subscribe:project", { projectId })

socket.on("wallet:balance:updated", (b) => console.log(b))
socket.on("wallet:tx:confirmed", (tx) => console.log(tx))
socket.emit("wallet:subscribe:project", { projectId })

socket.on("wallet:balance:updated", (b) => console.log(b))
socket.on("wallet:tx:confirmed", (tx) => console.log(tx))