What is the block diagram of real-time notification implementations in a SPA written in ReactJS?

Question

JavaScript

Hello.
There is an app in React.
It is necessary to hang real-time notifications for the logged-in user in accordance with his access rights to any random event committed by other users. Those. just a layer in the controller in the form
this._logAction(obj)
, where

obj = {
  action: "описание или идентификатор события",
  user: "имя пользователя",
  permissions: "требуемый пермишен для данного уведомления, без привязки к тому, разрешено ли данное действие для пользователя или нет, чтобы можно было гибко настраивать уведомления для любой роли и пользователя",
  error: "описание ошибки, если имеется" 
}

After the method is triggered, the request (stage 1) goes to the REST API (Laravel), which writes data to the MySQL database (or noSQL - which is better for logging purposes and further work with this data?). And here there should be some kind of trigger that starts the process of notifying the user? (Stage 2) I.e. there is a certain query of the database for the presence in the database of notifications with any of the permissions assigned to the logged in user. By the way, there can be many of them. (Stage 3) Next, notifications are shown to the user in the browser.
How to do it? Most likely sockets - it is clear. What specific tools (packages, libraries, modules, ...) should be used and what is the exact order in which they interact?

Answer 1

After registration, for example, you emit an event, the client listens and shows the information. You can look at the socket.io module