Processing Webhooks with Stream Chat, Lambda, and Node.js

Stream Chat makes it extremely easy to integrate chat into any application. In this tutorial, we will explore what webhooks are, how they work, and how Stream makes for a seamless experience to carry out many other actions on the backend simultaneously. For example, you could send an email, update your database, and so forth.

In this tutorial, we will show you how to process webhooks to send a message to a Slack channel! Here at Stream, we are big fans of Chat. With our chat product, we offer a webhook so that you can relay data to an endpoint of your choice. Webhooks are an excellent way to make use of messages and other activities create additional functionality.

In this post, we'll detail how you can process webhooks with Stream Chat, AWS Lambda, and Node.js.

What Are Webhooks?

Webhooks are one of the most popular ways to send events between two applications, over the internet. In this tutorial, whenever a user joins a chatroom, Stream will use webhooks to send an HTTP POST request to a URL that we will have configured.

Prerequisites

  • Ngrok: Stream needs to be able to successfully send the POST request to a given URL, which we will define. Because we need a real URL, localhost isn't going to cut it. Visit https://ngrok.com to get started.
  • A Stream account. Visit the dashboard to get started!
  • An understanding of NodeJS
  • React Native installed

This application will consist of two parts:

  • A server (the backend): this is going to be a serverless application deployed on AWS.
  • A client (the frontend): this is going to be built in React Native.

Both of them will live in the same directory. Create this directory using the following command:

https://gist.github.com/adelowo/a52b92bd33934f1cff851d1457624062

Creating a Stream Application

Before proceeding with the tutorial, you will need to get your credentials from Stream Chat. Once you’ve created your account, you will need to copy the credentials as depicted in the image below and save them somewhere safe, as they will be used to build the server.

  • Go to the Stream Dashboard
  • Create a new application
  • Click on Chat in the top navigation
  • Scroll down to "App Access Keys" to view your credentials.

Creating a Slack Application

As mentioned earlier, whenever a webhook is processed, we are going to post a message in Slack. To accomplish this, you will need to visit the Apps page in Slack. Click on the New App button, which will display a modal like that in the screenshot below. Once you've completed the form correctly, push the Create App button to continue.

Once the app has been created, you will need to create a new Incoming webhook. This will require you to select a channel where the messages will be posted:

Make sure to copy and store the generated URL, as you will need it later!

Building the Server

Since we are going to make use of the serverless paradigm, the first step is to install the serverless CLI. That can be done as follows:

https://gist.github.com/adelowo/0e82dbb8f5c0c4e72c60b18c8c702e1d

As you notice in the previous code block, we created a new file, the package.json. It contains the dependencies we need for our application:

https://gist.github.com/adelowo/f52b1bf73e8b1eb8de7b773126139b2b

Once this is complete, the next step is to install these packages by running npm install!

After the installations are complete, we will create another file called handler.js, which contains our implementation for the server:

https://gist.github.com/adelowo/86e4e0b63ed07945760978de4b2de208

We will also need to create the Slack handler for the webhook to be called by Stream Chat. To do that, you will need to create a new file called slack.js. In this newly created file, you will need to copy and paste in the following content:

https://gist.github.com/adelowo/0627d0870f1e6d2e0e0a4c84f59b554c

In the above, we created three HTTP routes:

  • users/create: This route creates an access token for the user.
  • users/add_member: This route adds a given member to the chatroom with channel_member permissions. Without this, the user would not be able to create or add new messages. You can take a look at the permission chart here.
  • hook: This route contains the logic of sending a new message to the Slack workspace.

You’ll also note we make a lot of references to process.env; this is because we need to store a few configuration values in the environment! To do that, you will need to make a few changes to your serverless.yml file that was generated earlier:

https://gist.github.com/adelowo/6e819a9c5db2699a1d87ce95631ff5f3

The final step is to update the serverless.yml file again with the HTTP routes:

https://gist.github.com/adelowo/3a54a57e38f868fdfea007043cb955ce

Once we’ve done all of this, we can deploy this serverless function to AWS with the following command:

https://gist.github.com/adelowo/0e800b8e26b4a4c52dc754f718b6bd08

Note: If you have not previously set up serverless with your AWS, you will need to run serverless config credentials --provider AWS --key IAM_USER_KEY --secret IAM_USER_SECRET. Please refer to the AWS docs for more information.

Running the above deploy script should output a whole bunch of information, but the only thing you should be concerned with is the URL you'll need to invoke your serverless functions.

Adding Your Webhook Address to the Stream Chat Dashboard

The final step to connecting all your work is to add your webhook URL to the Stream Chat dashboard! The easiest way to do this is via the dashboard. You will need to do the following:

  • Go to the Stream Dashboard
  • Create a new application
  • Click on Chat in the top navigation
  • Scroll down to "Webhook" to provide the address the deploy script provided. It should be something like https://XYZ.us-east-1.amazonaws.com/dev/hook.
  • Click "Save".

Building the Client

As discussed earlier, the client will be a React Native application. We will also be making use of the SDK that Stream Chat provides to simplify building the application!

The first step is to create a new project; this should be inside the lambda-stream-chat-webhooks directory that we created earlier:

https://gist.github.com/adelowo/f3f926c0d8b5bdce72ac79821fe45943

After this is done, we will need to build the actual app... Our app is going to consist of 2 screens:

  • The home screen (this doubles as the login screen, too).
  • The chat screen.

We will start with the chat screen! You will need to create a new file called ChatView.js. You can do this with the following command:

https://gist.github.com/adelowo/34b84f8a064a95bf9263ba626b164cd5

In the newly created file, you will need to copy and paste the following code:

https://gist.github.com/adelowo/ad6311c01ca681514dfb238413d68154

The next step is to create the home screen, which doubles as the login screen! To do this, we’ll utilize the App.js file created by the react-native init script. You will need to copy the following code into this App.js file:

https://gist.github.com/adelowo/0eff14944699a8642e33811505263e0b

Note: Please remember to update STREAMCHAT_API_KEY to the actual key you copied from the Stream Chat dashboard.

Once complete, you can spin up the app by running the following command:

https://gist.github.com/adelowo/72f4c2e00c1e8653a576fa988bee8914

A simulator/emulator should automatically open and the expected result should be similar to the gif below:

Last of all, take a look at the Slack channel you have configured the webhook with. You should see "A new message was sent" every time a user sends a new message in the chat application!

Conclusion

In this tutorial, we made use of Serverless technology, Stream Chat, and AWS Lambda to build a fully functional chat application that sends a notification to Slack every time a user uses the app. You can use this same strategy to create notifications for many other chat actions OR to connect your other app functions via webhooks!

You can find the full source code on GitHub.

Tutorials

Chat