How to integrate minchat sdk with ngrok for local webhook testing

How to integrate minchat sdk with ngrok for local webhook testing

Table of Contents

What are Webhooks?

Webhooks are commonly used in various scenarios, such as integrating third-party services, automating workflows, and enabling real-time updates. They provide a way for applications to communicate seamlessly and trigger actions based on specific events.

Webhooks work on a simple principle: when a specific event occurs in one application, it sends an HTTP POST request to a URL specified by the receiving application. The receiving application can then process the data sent in the request and take appropriate actions based on the event.

In the case of Minchat, webhooks allow users to receive message-sent events directly to their own applications or systems. This means that whenever a message is sent in Minchat, a webhook can be triggered, sending the relevant data to the user's application for further processing or integration. By utilizing webhooks, users can automate actions based on incoming messages, such as sending automated replies or updating internal databases.

To set up a webhook, the receiving application needs to expose a URL endpoint that can receive HTTP requests. This endpoint acts as a listener for incoming data. When an event occurs in Minchat, it sends an HTTP POST request to the URL endpoint of the receiving application, containing the relevant data.

What is ngrok?

Ngrok is a tool that allows you to expose your local server to the internet. It creates a secure tunnel between your local machine and a public URL, allowing external services to access your local server as if it were hosted on the web. This is particularly useful for testing webhooks, as it enables you to receive and inspect incoming requests from external services in your local development environment.

Overall, ngrok is a valuable tool for local webhook testing, as it allows you to easily expose your local server to the internet and receive incoming requests from external services. By integrating ngrok with Minchat SDK, you can set up a local development environment for testing webhooks from Minchat, ensuring that your webhook implementation works correctly before deploying it to a live environment.

Setting up ngrok

The first step is to download the ngrok binary from the official website and install it on your local machine. Ngrok is available for Windows, macOS, and Linux, so make sure to choose the appropriate version for your operating system.

Download Ngrok Page

Creating Local Server

Let's create a simple Node.js server with an endpoint to receive data as a webhook, you will need to use the Express.js framework. Express.js is a popular Node.js framework that simplifies the process of building web applications. Start by installing Express.js using npm, the Node.js package manager. Open your terminal or command prompt and run the following command:  `npm install express body-parser`. This will install Express.js and its dependencies in your project folder.

Once Express.js is installed, create a new file, let's say 'server.js', and open it in your preferred code editor. In this file, you will write the code for your Node.js server and expose an endpoint that will be our webhook endpoint.

const express = require("express");
const bodyParser = require("body-parser");
const app = express();
// Middleware to parse JSON bodies
app.use(bodyParser.json());
app.post("/webhook", (req, res) => {
 console.log(req.body); // Log the request body to the console
 res.status(200).send("Received your request!");
});
app.listen(3000, () => {
 console.log("Server is running on port 3000");
});

This code sets the server to listen on port 3000 (you can choose a different port if desired) and logs a message to the console when the server starts. Save the 'server.js' file.

To run your Node.js server, open your terminal or command prompt, navigate to the folder where your 'server.js' file is located, and run the command 'node server.js'. This will start your server, and it will be ready to receive webhook data at the specified endpoint.

Making Your Server Accessible to the Internet

Here's where we take the crucial step of making our local service available online for the MinChat server to access. To accomplish this, use the command: `ngrok HTTP 3000`

Take note, we're making an assumption here that your server is actively running on port 3000. Given that, you should expect to see output that's similar to the one below on your terminal:

Ngrok in terminal

Configuring webhooks on MinChat

Now that your local server is not just a local entity, but broadly accessible to the web courtesy of ngrok, it's time to make it work with Minchat's webhooks. Copy the forwarding URL from the terminal and add it as a webhook on the MinChat Dashboard adding the path we defined on our local server (`/webhook`) to the end of the URL.

MinChat Webhooks Dashboard

Let's now create a basic chat conversation using the MinChat Chat SDK. If you need help, you can always reference our Getting Started guide or any of our prior how-to posts. In this demonstration, we'll create an exchange between two fictitious users, Sam and Fred.

Once Sam sends a message to Fred, our webhook endpoint — connected to our server operating on port 3000 — receives a payload. This payload includes all pertinent event details like the timestamp, sender information, and message specifics.

{
  "sent_by":{
     "id":"639575b2c280a7001e892906",
     "name":"Sam",
     "username":"sam",
  },
  "sent_to":[
     {
        "id":"289575b9b280a7001e892956",
        "name":"Fred",
        "username":"fred",
     }
  ],
  "chat_id": "63d3e12d669fc928b3d78f80",
  "text":"Hello there!"
}

This method can be applied uniformly across all other webhooks too.

Practical Use Case

You might wonder why you'd need this setup for testing webhooks. The truth is, it's an incredibly useful tool for development and troubleshooting. With ngrok, you can observe incoming webhook requests in real-time, directly on your computer. You can view the header, payload, and any other part of the HTTP request received by your server.

This capability is particularly valuable if you're testing different webhook configurations or troubleshooting a problematic webhook. You can see exactly how MinChat sends data, and how your application processes it accordingly.

Conclusion

In conclusion, webhooks are a powerful tool for enabling real-time communication between applications. They allow for seamless integration of third-party services and automation of workflows based on specific events. In the context of Minchat, webhooks enable users to receive message-sent events as well as other event types directly to their own applications for further processing or integration.

Minchat offers a powerful platform for real-time communication and automation of workflows through the use of webhooks. Whether you're looking to integrate third-party services, automate responses, or update internal databases, Minchat provides the tools you need. By leveraging the power of webhooks and the convenience of ngrok for local testing, you can create a seamless and efficient communication system. Don't miss out on the opportunity to streamline your processes and enhance your application's capabilities. Sign up for Minchat today and start exploring the endless possibilities that webhooks can offer.