Добавление веб-уведомления в приложение React, похожего на Alert, но не Alert

#reactjs #web #notifications

#reactjs #веб #уведомления

Вопрос:

история пользователя:

Нам нужно предупредить пользователя, когда есть изменение или комментарий к тому, что он опубликовал другим пользователем.

Мы новички в react и теряемся в догадках о том, как уведомить пользователя, который вошел в систему на другой странице (возможно, на его панели мониторинга). Событие выполняется другим пользователем 2, где он находится на странице, где комментирует сообщение, опубликованное пользователем 1.

Как мы можем отправить оповещение этому user1? кто в настоящее время на другой странице говорит: «Есть новый комментарий к вашему сообщению».

Проблема, о которой мы говорим, заключается в следующем: событие происходит на странице комментариев. Мы можем отправить оповещение на этой странице комментариев. Но как мы сможем отправлять уведомления другим пользователям на другой странице?

Я знаю, что оно уже присутствует. В качестве примера вы можете взять доску Jiira.

Может ли кто-нибудь сообщить нам, как мы можем это реализовать?

Ответ №1:

Одним из вариантов является использование WebSockets. Всякий раз, когда пользователь находится на странице, на которой вы хотите, чтобы он мог получать уведомления, откройте websocket на вашем сервере:

 const socket = new WebSocket('https://my-server.com/socket');
 

На вашем сервере настройте конечную точку сокета. Всякий раз, когда один пользователь отправляет сообщение другому на сервере для всех сокетов, открытых получателем в данный момент, отправьте сообщение сокета, информирующее их о новом сообщении. Например, на сервере:

 activeSockets
  .filter(({ userId, socket }) => userId === receiverId)
  .forEach(({ socket }) => {
    socket.send('You have a new message');
  });
 

И прослушивайте эти сообщения на клиенте:

 socket.addEventListener('message', ({ data }) => {
  if (data === 'You have a new message') {
    alert(data);
  }
});
 

Это, в широком смысле, отраслевой стандарт для такого рода вещей; это то, что делает Stack Exchange. Это то, сколько веб-сайтов позволяют серверу отправлять данные клиенту без (неэлегантного) опроса.

Комментарии:

1. У нас есть серверный подход к этому приложению. Мы больше изучали что-то или тип компонента уведомлений npm