How to use an API webhook in React to receive notifictions

Question

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?

Answer 1

I hope this tip helps! 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.