Как в React отследить вебхук с сервера и отрисовать сообщение?

Question

[Paul14]

Сторонний сервер вебхуком прислал мне данные, число 1. Я хочу чтобы в этот момент мое реакт приложение вывело alert(
число ).

Как происходит этот процесс с вебхуками? Если так, то чем это отличает от постоянных опросов REST API.

Answer 1

[ThunderCat]

Вебхук инициализируется сторонним сервером, по этому опрашивать его не надо. Как пример - платежные системы.

Вы размещаете платежку со своими реквизитами на сайте, кто-то по ней платит, при этом процесс оплаты для вас непрозрачен, так как происходит на сайте ПС. После завершения платежа, сервис ПС делает запрос на ваш сайт на определенный урл, который вы указываете при регистрации в ПС, и присылает туда инфу в заранее оговоренном формате, тем самым оповещая вашу систему об изменениях.

Что дальше делать с этими данными уже ваше дело, можно прямо из этого скрипта послать сообщение в приложение, можено записать в бд и по таймеру запрашивать об обновлении бд с клиента...

Comments

[Paul14]

Спасибо. Вы знаете способ чтобы послать сообщение в реакт приложение (веб-сайт) с php файла или как-то по другому. Задача принять ответ JSON куда-то и потом чтобы в реакт приложении сразу отработал алерт с этими данными.

[ThunderCat]

Paul14, Со стороны сервера к клиенту сообщения можно отправить только сокетом. В остальных случаях требуется инициализация с клиента (например интервальные запросы).

Answer 2

[versetty777]

Настройте ваш сервер, чтобы он отправлял вебхук на определенный URL вашего приложения. В компоненте React, который должен обрабатывать вебхук, используйте библиотеку, такую как axios или fetch для подписки на вебхук с сервера. Когда вебхук приходит на клиент, используйте setState для обновления состояния компонента и перерисовки UI. Примени alert для отображения сообщения с числом из вебхука.

P.S. В отличие от постоянных опросов REST API, вебхуки позволяют вашему приложению получать данные в режиме реального времени, без необходимости постоянно опрашивать сервер.