Published on

How WebHook works | System Design

How WebHooks Work | System Design

Webhooks are a powerful tool that allows different systems to communicate with each other in real-time. In this article, we will explore how webhooks work, their applications, and how they are used by different tech companies such as GitHub, Slack, and Stripe. We'll also discuss why webhooks are important in system design and how they compare to WebSockets and REST APIs.

How WebHooks Work

When two computer systems need to communicate with each other, there are various ways to do it. One method is polling, where one system continuously asks the other if there's any new information. This method is akin to repeatedly checking your phone for new messages, which is inefficient and consumes resources even when there’s nothing new.

Another method is maintaining an open connection. This approach is like keeping your phone up to your ear all day, waiting for a call. While fast, it ties up resources and isn't practical for handling many connections simultaneously.

Webhooks offer an elegant solution by eliminating the need for polling and open connections. Instead, one system tells the other which URL to send information to when new data becomes available. This event-driven mechanism reduces server load and enables more efficient resource utilization.

The Technical Mechanics of WebHooks

When a client registers a webhook URL with a server, it's instructing the server to send updates to that URL whenever relevant events occur. Below is a step-by-step breakdown:

  1. Registration: The client application registers a webhook URL with the server.
  2. Event Occurrence: When a relevant event occurs, the server sends an HTTP POST request to the registered webhook URL.
  3. Notification: The POST request includes data about the event, typically in JSON or XML format.
  4. Processing: The client processes the data and takes appropriate action, such as updating the user interface or storing the data.
  5. Response: The client sends a response back to the server to confirm receipt and processing of the notification.

Example with JavaScript

Let's understand this using a JavaScript code snippet for a web application that uses a third-party service to send SMS messages. We want to be notified whenever an SMS is sent.

const webhookURL = 'https://example.com/webhook';

async function listenForUpdates() (
  let response = await fetch(webhookURL);
  if (response.status === 200) {
    let smsMessage = await response.json();
    processSMS(smsMessage);
  ) else (
    setTimeout(listenForUpdates, 5000);  // Wait for 5 seconds before checking again
  )
}

function processSMS(sms) (
  console.log('New SMS received:', sms);
)

listenForUpdates();

In this example, listenForUpdates fetches data from the webhook URL. If an SMS message is received, it processes the message. If no new messages are received, it waits for 5 seconds before checking again.

Comparison with Polling and WebSockets

While HTTP and REST APIs require clients to actively poll for updates, webhooks enable servers to push updates to clients as soon as events occur. Webhooks are event-driven, whereas polling is time-driven.

WebSockets, on the other hand, allow for continuous, open connections between systems, facilitating real-time communication. However, maintaining open connections can be resource-intensive and complex to manage compared to the simplicity and efficiency of webhooks.

Applications of WebHooks

Many tech companies leverage webhooks to enhance their services:

  • GitHub: Sends notifications when code is pushed to a repository or a new issue is created.
  • Stripe: Notifies users of events in their Stripe account, such as payments made or disputes opened.
  • Slack: Allows users to create custom webhooks to send notifications to Slack channels when specific events occur.

Importance in System Design

Webhooks are essential in modern system design, especially within microservices architectures. By enabling event-driven communication, they decouple systems, making it easier to develop, deploy, and maintain applications.

Keyword

  • Webhooks
  • Real-time Communication
  • Polling
  • WebSockets
  • REST API
  • Event-driven Programming
  • System Design
  • Microservices Architecture
  • GitHub
  • Stripe
  • Slack

FAQ

Q: What is a webhook?
A: A webhook is a method for a system to send real-time data to another system using HTTP POST requests when specific events occur.

Q: How do webhooks differ from polling?
A: Polling involves actively querying a server for updates at regular intervals, while webhooks push updates to the client as soon as events happen, saving resources and reducing latency.

Q: What are some examples of companies using webhooks?
A: GitHub uses webhooks for repository updates, Stripe for payment notifications, and Slack for channel notifications.

Q: How do webhooks compare to WebSockets?
A: WebSockets provide continuous, open connections for real-time communication but are more resource-intensive. Webhooks are simpler, using HTTP POST requests to notify clients when events occur.

Q: Why are webhooks important in system design?
A: They enable decoupled, event-driven architectures in microservices, making systems easier to develop, deploy, and maintain.

Read More