Webhooks: not The Mystery Anymore

Introduction

So basically, concepts of webhooks became famous when companies such as Github, Facebook, etc., implemented them in their systems and then it grabbed people’s attention and came into the limelight. so we will go here in baby steps learning this technology

What this thing is?

By define “A WebHook is an HTTP callback: an HTTP POST that occurs when something happens; a simple event-notification via HTTP POST.”

So let’s understand what this line wants to say.first let’s get to the need of webhooks.

So when this technology was not in place . Suppose a change occurred in the database, then we have to check in a small interval of time whether a change occurred or not, due to which the number of API calls increase, leading to depreciation in the app’s performance.

So now, with webhooks. Things change in a way that as soon as the server sees a change in the database. It automatically sends a request to the frontend app that this change has occurred and expects a posted message to be returned that the data is successfully received. Webhook makes the app more efficient and improves the overall user experience.

“polling creates, on average, 66x more server load than webhooks” this is from the test conducted by zapier.

Security Concern

As the webhooks are available openly. A question of security always arises in this case. here are the key points you can implement to make the webhooks more secure

• Allow only TLS connections (HTTPS):TLS ensures data that is passed is fully encrypted over the internet with the help of some secure algorithm hence protecting from the man in the middle attack or any third-party app.
• Use of Token:The Token is meant to validate whether the source is authentic. Hence the Token can check the source has access to for reading or modifying the application. Restricting unknown source will help to prevent useless data which automatically increase the availability of your URL.

there are still plenty of other methods you can use to overcome the security concern

Use Case Scenarios

we can use webhooks in many cases determined by our needs and flow. Still, some applications are listed below.

Notification: suppose you are creating a messaging app, then instead of checking every minute whether the message queue is updated or not, we can create a webhook for the same, which when any change occur in the message queue will fire an API call to the frontend with the update in the message queue

Payment: in payment, rather than checking every sec for the response, we can assign a webhook that will return the payment status as soon as the transaction is completed.

so basically, on the top layer, we can say that we can use webhooks where we are working with a real-time database

Fun Facts

• firebase: onSnapShot listener in firebase listens to webhook
• Github: Github uses webhooks for their notification purpose

Implementation

So till now, we have gained too much knowledge about how webhooks work and their security, but still, one main topic is not enlightened, which is how we can implement it in our apps.So to give you an example and not making things complex with that in mind.

Let’s dive into the GitHub webhooks for demonstration. So to start, I have created a test repo for this purpose. So now you can also create a repo.Go to the project settings .

Now in the settings tab in the sidebar navigation, there is a webhook tab. now on the right-hand side, there is an add webhook button .click on it

So now we need to set up a server on which we can receive the post request from Github. So to do that, you can make a local server and deploy it to firebase functions or on Heroku.

note: the server should be deployed because if it is not deployed, it will not be visible to the GitHub webhook

so to fast forward the process, I am going to use beeceptor.com to create an endpoint

so now I copy the path and paste it into the GitHub webhook Payload URL, and in the end, I attack the endpoint, which in my case is “/ABC” you can add the same endpoint which you declared creating the server, and you can select what data you need when the webhook is triggered, for now, I select send me everything and click on Add webhook

Voila, your first webhook is now in the run.🎉🎉🎉🎉🎉

now just give a star to the repo, and then you will see a posted message on your API in this format

so if you go deep in this json object you will get all information about the repo

Conclusion

it would be best if you use webhooks to reduce API load, and you can thank me by liking this post which will lead to an increase in the reach . Thank You