Slack Slack

This guide will take you through integrating deepstreamHub with Slack's Incoming Webhook API. If you'd like to dive right into the code you can have a look at the GitHub repository for this tutorial here.

There are many use cases for sending messages to Slack in applications, from reminders and alerts and more. We'll be showing you how to create a simple form where users can send feedback to a slack channel. We'll be using the deepstreamHub JavaScript client SDK and the Slack SDK for NodeJs.

Create a free account and get your API key

High level overview

We'll need a couple of things to start this tutorial:

• a backend process powered by deepstreamHub that sends messages to Slack

• a simple form to send data this process

• a webhook integration set up in Slack

Get started with Slack

The first thing you'll need to do after creating your deepstreamHub account is create a team at Slack. After creating a channel that we'll name feedback, you'll need to create an Incoming Webhook integration that we can use to send messages to the channel.

This will give you a Webhook URL that you can use to send messages with as follows:

const IncomingWebhook = require('@slack/client').IncomingWebhook

const webhook = new IncomingWebhook(<Your webhook URL>, {
  username: 'Feedback Bot',
  channel: 'feedback'
})

webhook.send('Hello world!', (err, res) => {
  if (err) {
      console.log('Error:', err);
  } else {
      console.log('Message sent: ', res);
  }
})

Running the above code will send the message Hello world! to our new feedback channel, integrating it with deepstreamHub and making it realtime is now easy.

Integrating it with deepstreamHub

Let's next create our feedback-provider, a lightweight process that we can use to receive events from the frontend and create the webhooks on demand. All we need to do is subscribe to an Event called feedback and whenever a feedback event is received, create the webhook with the payload received.

client.event.subscribe('feedback', (data) => {
  webhook.send(data, (err, res) => {
    if (err) {
      console.log('Error:', err);
    } else {
      console.log('Message sent: ', res);
    }
  })
})

Finally we can write the client side code that emits the feedback event. All we need is a simple form where we can enter the feedback.

With the following JavaScript, we get the data that has been put into the field and emit the event via client.event.emit.

const client = deepstream('<Your app URL>')
client.login()

function submitFeedback() {
  const feedback = document.getElementById('feedback').value
  client.event.emit('feedback', feedback)
  alert('Thanks for your feedback!')
}

After doing this, assuming you entered the feedback Loving your site! you should have received a Slack message like this:

And that's it. Thanks for sticking with me. Be sure to check out the other guides and integrations we have, or check out building something more substantial with deepstreamHub via an example app.