Instantly share code, notes, and snippets.

@meulta /bot.js
Last active Apr 15, 2017

What would you like to do?
Push notifications
const webPush = require('web-push');
const restify = require('restify');
const builder = require('botbuilder');
const fs = require('fs');
const vapidKeyFilePath = "./vapidKey.json";
var vapidKeys = {};
if (fs.existsSync(vapidKeyFilePath)) {
//if the vapid file exists, then we try to parse its content
//to retrieve the public and private key
//more tests might be necessary here
try {
vapidKeys = JSON.parse(fs.readFileSync(vapidKeyFilePath));
catch (e) {
console.error("There is an error with the vapid key file. Log: " + e.message);
else {
//if the file did not exists, we use the web-push module to create keys
//and store them in the file for future use
//you should copy the public key in the index.js file
vapidKeys = webPush.generateVAPIDKeys();
fs.writeFileSync(vapidKeyFilePath, JSON.stringify(vapidKeys));
console.log("No vapid key file found. One was generated. Here is the public key: " + vapidKeys.publicKey);
//here we setup the web-push module for it to be able to
//send push notification using our public and private keys
//standard way of creating a rest API for a bot
var server = restify.createServer();
server.listen(process.env.port || process.env.PORT || 3000, function () {
console.log('%s listening to %s',, server.url);
// Create chat bot
var connector = new builder.ChatConnector({
appId: process.env.MICROSOFT_APP_ID,
appPassword: process.env.MICROSOFT_APP_PASSWORD
var bot = new builder.UniversalBot(connector);'/api/messages', connector.listen());
// Bots Dialogs
//this is a 'dictionary' in which we store every push subscription per user
var pushPerUser = [];
//this event handler is looking for every message sent by the bot
//we look into the dictionary to see if we have push subscription info
//for this user and we send a push notif with the bot message
//this will keep send the message to the user through the channel
bot.on("outgoing", function (message) {
if (pushPerUser && pushPerUser[]) {
var pushsub = pushPerUser[];
endpoint: pushsub.endpoint,
TTL: "1",
keys: {
p256dh: pushsub.key,
auth: pushsub.authSecret
}, message.text);
//here we handle incoming "events" looking for the one which might come from
//the backchannel. we add or replace the subscription info for this specific user
bot.on("event", function (message) {
if ( === "pushsubscriptionadded") {
pushPerUser[] = message.value;
//here is a classic way of greeting a new user and explaining how things work
bot.on('conversationUpdate', function (message) {
if (message.membersAdded) {
message.membersAdded.forEach(function (identity) {
if ( === {
var reply = new builder.Message()
.text("Howdy! I am a [demo bot]( using the [WebChat control]( and with Push Notifications! Say **hello** and I will send a message every 10 seconds. If you accepted notifications, you will get one! If you close the tab but leave the browser opened, you will get a notification when I talk. Oh and say **stop** to shut me off :)");
//this part is a very simple way of simulating proactive dialogs
//we only send a message with a integer that we increment
//every 5 seconds. this is for push notifications test purposes and should not
//be use as base to create any real life bot :)
var loop = false;
var count = 1;
bot.dialog('/', function (session) {
if (session.message.text === "stop") {
session.send("Stopping loop");
loop = false;
else if (!loop) {
loop = true;
count = 1
var proactiveEmulation = (session) => {
if (loop) {
session.send(`Hello World of web push! :) (${count++})`);
setTimeout(() => proactiveEmulation(session), 5000);
//we use this to serve the webchat webpage
server.get(/\/web\/?.*/, restify.serveStatic({
directory: __dirname
(function () {
const DIRECTLINE_SECRET = ""; //you get that from the direct line channel at
const VAPID_PUBLICKEY = ""; //you get that from the server, which will generate a vapidKey.json file
var startChat = function () {
let botConnection;
if (getParameterByName("isback") === 'y') {
//if we are resuming an existing conversation, we get back the conversationid from LocalStorage
botConnection = new DirectLine.DirectLine({
conversationId: localStorage.getItem("pushsample.botConnection.conversationId"),
webSocket: false
} else {
//if it is a brand new conversation, we create a fresh one
botConnection = new DirectLine.DirectLine({
webSocket: false
.filter(s => s === 2) //when the status is 'connected' (2)
.subscribe(c => {
//everything is setup in DirectLine, we can create the Chatbot control
botConnection: botConnection,
user: { id: botConnection.conversationId}, //you could define you own userid here
resize: 'detect'
}, document.getElementById("bot"));
//we setup push notifications (including service worker registration)
setupPush((subscriptionInfo) => {
//once push notifications are setup, we get the subscription info back in this callback
//we use the backchannel to send this info back to the bot using an 'event' activity
type: "event",
name: "pushsubscriptionadded",
value: subscriptionInfo,
from: { id: botConnection.conversationId } //you could define your own userId here
.subscribe(id => {
//we store the conversation id which we get back from postActivity(...) in the LocalStorage
//we will need this in case of conversation resuming
localStorage.setItem("pushsample.botConnection.conversationId", botConnection.conversationId);
botConnection.activity$.subscribe(c => {
//here is were you can get each activity's watermark
//we do not do anything in this sample, but you can use it if you need
//to restore history at resuming at a specific moment in the conversation
// Push
var setupPush = function (done) {
//first step is registering the service worker file
.then(function (registration) {
//once the sw is registered, we try to get an existing push subscription
return registration.pushManager.getSubscription()
.then(function (subscription) {
//if the subscription exists, then we pass is to the next chained .then function using return
if (subscription) {
return subscription;
//if the subscription does not exists, we wrap the VAPID public key and create a new one
//we pass this new once to the next chaind .then function using return
const convertedVapidKey = urlBase64ToUint8Array(VAPID_PUBLICKEY);
return registration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: convertedVapidKey
.then(function (subscription) {
//wrapping the key and secret
const rawKey = subscription.getKey ? subscription.getKey('p256dh') : '';
const key = rawKey ? btoa(String.fromCharCode.apply(null, new Uint8Array(rawKey))) : '';
const rawAuthSecret = subscription.getKey ? subscription.getKey('auth') : '';
const authSecret = rawAuthSecret ? btoa(String.fromCharCode.apply(null, new Uint8Array(rawAuthSecret))) : '';
const endpoint = subscription.endpoint;
//we call back the code that asked to register push notification with the subscription information
endpoint: subscription.endpoint,
key: key,
authSecret: authSecret
// Helpers
function getParameterByName(name, url) {
if (!url) {
url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
function urlBase64ToUint8Array(base64String) {
const padding = '='.repeat((4 - base64String.length % 4) % 4);
const base64 = (base64String + padding)
.replace(/\-/g, '+')
.replace(/_/g, '/');
const rawData = window.atob(base64);
const outputArray = new Uint8Array(rawData.length);
for (let i = 0; i < rawData.length; ++i) {
outputArray[i] = rawData.charCodeAt(i);
return outputArray;
//everything is defined, let's start the chat
var baseurl = ""; //replace that with you website baseurl. you could handle this differently but it was simplier in this sample
self.addEventListener('push', function (event) {
//creating the notification message (we should never be in the "no message" case)
var payload = ? : 'No message...';
//we show a notification to the user with the text message
//and an icon which is hosted as a resource on the website
self.registration.showNotification('Chat bot!', {
body: payload,
icon: '/web/img/thinking_morphi.png'
self.addEventListener('notificationclick', function (event) {
// Android doesn't close the notification when you click on it
// See:
// This looks to see if the current is already open and
// focuses if it is
//searching for all clients / tab opened in the browser
type: "window"
.then(function (clientList) {
//going through the list of clients/tab and trying to find our website
for (var i = 0; i < clientList.length; i++) {
var client = clientList[i];
//if we find it, we put focus back on the tab
if ((client.url.toLowerCase() == baseurl + '/web/index.html' || client.url.toLowerCase() == baseurl + '/web/index.html?isback=y') && 'focus' in client)
return client.focus();
if (clients.openWindow) {
//if we did not find it, then we re-open it with the isback=y parameter
//to ensure that we resume the conversation using the conversationid
return clients.openWindow('/web/index.html?isback=y');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment