Page MenuHomeDevCentral

Build a notifications web client
Open, Needs TriagePublic

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