Controlling IoT using the Webhook Provider

Riley Napier from our engineering team returned for our September 2nd Courier Live. Together we used the Courier Webhook Provider to send a notification using an unconventional channel, a BlinkStick Square.

Check out the video below to watch us:

• Demo an application using a BlinkStick Square
• Configure and add the Webhook Provider to an existing notification
• Create an endpoint to accept and handle the Webhook Post from Courier
• Send a test notification using the new Notification Designer Send tab

Be sure to Like the video and Subscribe to our YouTube channel.

Configuring the Webhook Provider

Courier allows for static and dynamic configuration of the Webhook Provider. By default, Courier sends a payload via POST or GET request to a specified url. For this project, we opted to use the dynamic configuration. This allowed us to specify destination configuration on a per recipient basis by supplying it in the webhook object in the recipient profile.

// Profile
{
  "webhook": {
    "url": "https://blinkstick-server.herokuapp.com/api/courier",
    "Method": "POST"  // optional: defaults to POST
  }
}

You can learn more about Dynamic Destination configuration in the Courier Docs.

Accepting the POST

The url supplied to the destination configuration needs to accept a POST and return a status code of 200. If Courier doesn't receive a 200 response, it will attempt to retry the POST. For our project, we used a Next.js application deployed to Heroku. To create our route, we added a courier.js file to the /pages/api directory.

// /pages/api/courier.js
export default (req, res) => {
  if (req.method === "POST") {
    req.context.io.emit("alert", req.body);
    res.status(200).send("ok");
  } else {
    res.satus(405).send();
  }
};

This results in a route that will accept a request and emit an alert event using Socket.io if the request method is a post. You can find the full blinkstick-server code on GitHub.

Handling the alert

Now that the webhook has been accepted and an event has been emitted, the client needs to handle it. Our client is a simple Node.js application running locally on the machine connected to the BlinkStink Square. We use the Socket.io Client to connect to the server running in Heroku. We can handle the alert event by adding the following listener.

const io = require("socket.io-client");
const blinkstick = require("blinkstick");
const player = require("play-sound")();

const device = blinkstick.findFirst();
const socket = io("https://blinkstick-server.herokuapp.com/");

socket.on("alert", (data) => {
  console.log(data);
  device.morph("red", function () {
    device.morph("orange", function () {
      device.morph("yellow", function () {
       device.morph("green", function () {
          device.morph("blue", function () {
            device.morph("purple", function () {
              device.morph("#000000");
            });
          });
        });
      });
    });
  });
  player.play("./media/youve-got-mail.mp3", (err) => {
    if (err) console.log(`Could not play sound: ${err}`);
  });
});

The listener uses the BlinkStick Node.js module to make the Square transition through all the colors of the rainbow. And then for added fun, we used the play-sound package to play a sound through the connect computer's speakers. You can find the full blinkstick-client code on GitHub.

Now this is just a simple exercise of how Courier can trigger an IoT device. There's so much more that can be done. You could use the data being passed in the webhook payload. You could have this running on a Raspberry Pi. The only limit is your imagination (and maybe your pocketbook). Definitely sign up for a free Courier Account and let us know what you create.

Is there something you’d like to see us do using Courier? Let us know and it might be the subject of our next Courier Live. We stream a new Courier Live every Wednesday at noon Pacific. Follow us on Twitch to be notified when we go live.

-Aydrian