Page MenuHomeDevCentral

Build a notifications web client
Open, NormalPublic

Description

Front-end

Build a static web page printing notifications in real-time.

Traditionally, this uses websockets, but here we could use the server-sent events API to simplify a lot the design.

This page could be added as a subpage of https://infra.nasqueron.org (rINFRAWWW). If so:

If we don't use JavaScript, it should be trivial to convert TypeScript/CoffeScript/whatever into JS code, as we've full control with Gulp of the build process. We just need to remember we'll also need a generic way to express the idea "compile that app into js" in upsection (rUPSECTION), so if anything else than JS is used, document it at T1654.

Back-end

A small microservice to get the notifications and push them to the front-end

This service could get notifications either:

  • by directly connecting to RabbitMQ (probably the easiest), see https://www.rabbitmq.com/devtools.html for links to relevant libraries
  • using delivery API described at T1210 (but that one is NOT real-time, it's for regular query polling like every N seconds)

MDN provides an example of the SSE workflow: https://github.com/mdn/dom-examples/tree/master/server-sent-events

The back-end can be programmed in any language, as we deploy API endpoints as separate autonomous microservices:

  • If you use Rust, some newer APIs are prepared with Rocket and our Limiting Factor framework (rLF) like rAPIREG
  • If you use Python, the notifications CLI command successfully uses Pika to connect to RabbitMQ, see rNOTIFCLI

Deployment

  1. Create RabbbitMQ user and store credentials to Vault or through Zemke-Rhyme (Dereckson can help here)
  2. Deploy back-end as a Docker container by adding it to rOPS (pillar/paas/docker.sls + roles/paas-docker/containers)
  3. Add nginx configuration for api.nasqueron.org, that's in rOPS roles/webserver-legacy/nginx
  4. Publish front-end, for rINFRAWWW, there is a job on Jenkins CD for that

Final architecture

A notification would reach the web page by this path:

{GitHub, Jenkins, Phabricator, Docker Hub, etc.} -> Notifications Center -> RabbitMQ -> this new back-end service -> this new front-end page

Event Timeline

DorianWinty added a project: Restricted Project.Jun 4 2022, 21:06
DorianWinty moved this task from Restricted Project Column to Restricted Project Column on the Restricted Project board.
DorianWinty moved this task from Restricted Project Column to Restricted Project Column on the Restricted Project board.
DorianWinty moved this task from Restricted Project Column to Restricted Project Column on the Restricted Project board.Sep 23 2022, 21:33
DorianWinty moved this task from Restricted Project Column to Restricted Project Column on the Restricted Project board.Oct 16 2023, 20:08
dereckson triaged this task as Normal priority.Sun, Nov 10, 10:50