Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use an API webhook in React to receive notifictions

This is my first time working with Webhooks and I was wondering if it was possible to receive notifcations from a Webhooks subscription. I'm using create-react-app for my project and want to use github's Webhooks subscription to send an alert everytime I commit to my github repository. How would I tackle this project and what would I need to do to test my Webhooks subscription?

like image 339
Michael Lee Avatar asked May 14 '20 04:05

Michael Lee


People also ask

How do I use webhook API?

The Webhooks API allows you to subscribe to events happening in a HubSpot account with your integration installed. Rather than making an API call when an event happens in a connected account, HubSpot can send an HTTP request to an endpoint you configure.

How to call Web APIs with the useeffect hook in react?

How To Call Web APIs with the useEffect Hook in React 1 Creating a Project and a Local API. In this step, you’ll create a local REST API using JSON server, which you will use as a test data ... 2 Fetching Data from an API with useEffect. In this step, you’ll fetch a list of groceries using the useEffect Hook. ... 3 Sending Data to an API. ...

How to use push notifications with react hooks?

a custom React Hook that uses the functions defined in push-notification.js a React presentation Component that uses the custom Hook. Create a file called usePushNotifications.js and place it in the source folder. Checks if the push notifications are supported by the browser If the push notifications are supported, registers the service worker

How do I create a react API call?

Finally, I will point you towards more advanced examples so you can continue to grow! 1. Create a Basic Project Structure Make a new folder. I named mine react-api-call. Open up your text editor inside of the new folder and navigate into the new folder with your terminal. Create the following folders:

Does a website ask you if you want to receive notifications?

Has a website ever asked you if you want to receive notifications? Some websites, such as Reddit, use notifications to inform you of new content. In this article, I will show you how to add notifications to a React application. I will explain how the browser sends notifications, how to add authentication, and how service workers show notifications.


1 Answers

I hope this tip helps! Don't forget the vote to strengthen. Let's get to it ...

I suggest using a web socket, where your application will be listening to the back end.

This will prevent you from creating request loops for the backend.

Additional information...

React only consumes information, who provides and controls is only the backend.

Hope this helps. Success!

class Main extends Component {
    ......
    // instance of websocket connection as a class property
    ws = new WebSocket('ws://localhost:3000/ws')
    componentDidMount() {
        this.ws.onopen = () => {
        // on connecting, do nothing but log it to the console
        console.log('connected')
        }
        this.ws.onmessage = evt => {
        // listen to data sent from the websocket server
        const message = JSON.parse(evt.data)
        this.setState({dataFromServer: message})
        console.log(message)
        }
        this.ws.onclose = () => {
        console.log('disconnected')
        // automatically try to reconnect on connection loss
        }
    }
    render(){
        <ChildComponent websocket={this.ws} />
    }
}

In the example I used a class component. A tip to take advantage of modern features would be to start with functional components.

like image 115
Marcio dos A. Junior Avatar answered Nov 04 '22 22:11

Marcio dos A. Junior