CODEWITHSUNDEEP
javascriptc#htmlbotframeworkdirect-line-botframework
Teragon
Teragon

Reputation: 249

Sending events from an embedded webchat

I'm trying to send and receive events from an embedded webchat which follows the code for the website from this example https://github.com/ryanvolum/backChannelBot and the bot implements the code from Bot framework get the ServiceUrl of embedded chat control page answered by ezequiel

Here's how it all looks in my setup index.html 

<!DOCTYPE html>
<!-- 
NOTE: This sample requires a bot which can send and receive specific event messages. Follow the instructions on 
https://github.com/ryanvolum/backChannelBot to deploy such a bot. 
This is a sample HTML file which shows how to embed an instance of WebChat which listens for event activities. For the sake
of demonstration it specifically listens for events of name "changeBackground". Using the backChannelBot sample 
our page can listen for events of name "changeBackground" and send events of name "buttonClicked". This 
highlights the ability for a bot to communicate with a page that embeds the bot through WebChat. 

1. Build the project: "npm run build"
2. Start a web server: "npm run start"
3. Aim your browser at "http://localhost:8000/samples/backchannel?[parameters as listed below]"
For ease of testing, several parameters can be set in the query string:
    * s = Direct Line secret, or
    * t = Direct Line token (obtained by calling Direct Line's Generate Token)
    * domain = optionally, the URL of an alternate Direct Line endpoint
    * webSocket = set to 'true' to use WebSocket to receive messages (currently defaults to false)
    * userid, username = id (and optionally name) of bot user
    * botid, botname = id (and optionally name) of bot
-->
<html>

<head>
    <meta charset="UTF-8" />
    <title>Bot Chat</title>
    <link href="../../botchat.css" rel="stylesheet" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <style>
        .wc-chatview-panel {
            width: 320px;
            height: 500px;
            position: relative;
        }
        .h2{
            font-family: Segoe UI;
        }
    </style>
</head>

<body>
    <h2 style="font-family:Segoe UI;">Type a color into the WebChat!</h2>
    <div id="BotChatGoesHere" class="wc-narrow"></div>
    <button onclick="postButtonMessage()" style="width:120px;height:60px;padding:20px;margin-left:80px;margin-top:20px;">Click Me!</button>

    <script src="../../botchat.js"></script>
    <script>
            var params = BotChat.queryParams(location.search);
            var user = {
                id: params['me'] || 'userid',
                name: params["tester"] || 'username'
                };

            var bot = {
                id: params['somebot'] || 'botid',
                name: params["somebot"] || 'botname'
            };
            window['botchatDebug'] = params['debug'] && params['debug'] === "true";
            var botConnection = new BotChat.DirectLine({
                secret: params['mysecret'],
                token: params['t'],
                domain: params['ngroktunneledurl.com/api/messages'],
                webSocket: params['webSocket'] && params['webSocket'] === "true" // defaults to true
            });
            BotChat.App({
                botConnection: botConnection,
                user: user,
                bot: bot
            }, document.getElementById("BotChatGoesHere"));
            botConnection.activity$
                .filter(activity => activity.type === "event" && activity.name === "changeBackground")
                .subscribe(activity => changeBackgroundColor(activity.value))
            const changeBackgroundColor = (newColor) => {
                document.body.style.backgroundColor = newColor;
            }
            const postButtonMessage = () => {
                botConnection
                    .postActivity({type: "event", value: "", from: {id: "me" }, name: "buttonClicked"})
                    .subscribe(id => console.log("success"));
            }
        </script>
</body>

</html>

And the bot file MessagesController.cs

using System;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Threading.Tasks;
using System.Web.Http;
using Microsoft.Bot.Builder.Dialogs;
using Microsoft.Bot.Connector;
using Kaseya_AI_Kbot.LuisDialog;

[BotAuthentication]
public class MessagesController : ApiController
{
   public async Task<HttpResponseMessage> Post([FromBody]Activity activity)
    {
        if (activity.Type == ActivityTypes.Event &&
            string.Equals(activity.Name, "buttonClicked", StringComparison.InvariantCultureIgnoreCase))
        {
            ConnectorClient connector = new ConnectorClient(new Uri(activity.ServiceUrl));

            // return our reply to the user
            Activity reply = activity.CreateReply("I see that you just pushed that button");
            await connector.Conversations.ReplyToActivityAsync(reply);
        }

        if (activity.Type == ActivityTypes.Message)
        {
            ConnectorClient connector = new ConnectorClient(new Uri(activity.ServiceUrl));

            // return our reply to the user
            var reply = activity.CreateReply();
            reply.Type = ActivityTypes.Event;
            reply.Name = "changeBackground";
            reply.Value = activity.Text;
            await connector.Conversations.ReplyToActivityAsync(reply);
        }
        else
        {
            HandleSystemMessage(activity);
        }
        var response = Request.CreateResponse(HttpStatusCode.OK);
        return response;
    }

    private async Task HandleSystemMessage(Activity message)
    {
        if (message.Type == ActivityTypes.DeleteUserData)
        {
            // Implement user deletion here
            // If we handle user deletion, return a real message
        }
        else if (message.Type == ActivityTypes.ConversationUpdate)
        {
            if (message.MembersAdded.Any(o => o.Id == message.Recipient.Id))
            {
                ConnectorClient client = new ConnectorClient(new Uri(message.ServiceUrl));

                var reply = message.CreateReply();

                reply.Text = "Welcome to the bot!";

                await client.Conversations.ReplyToActivityAsync(reply);
            }
        }
        else if (message.Type == ActivityTypes.ContactRelationUpdate)
        {
            // Handle add/remove from contact lists
            // Activity.From + Activity.Action represent what happened
        }
        else if (message.Type == ActivityTypes.Typing)
        {
            // Handle knowing tha the user is typing
        }
        else if (message.Type == ActivityTypes.Ping)
        {
        }
    }

    public async Task<HttpResponseMessage> Post([FromBody]Activity activity)
    {
        if (activity.Type == ActivityTypes.Event &&
            string.Equals(activity.Name, "buttonClicked", StringComparison.InvariantCultureIgnoreCase))
        {
            ConnectorClient connector = new ConnectorClient(new Uri(activity.ServiceUrl));

            // return our reply to the user
            Activity reply = activity.CreateReply("I see that you just pushed that button");
            await connector.Conversations.ReplyToActivityAsync(reply);
        }

        if (activity.Type == ActivityTypes.Message)
        {
            ConnectorClient connector = new ConnectorClient(new Uri(activity.ServiceUrl));

            // return our reply to the user
            var reply = activity.CreateReply();
            reply.Type = ActivityTypes.Event;
            reply.Name = "changeBackground";
            reply.Value = activity.Text;
            await connector.Conversations.ReplyToActivityAsync(reply);
        }
        else
        {
            HandleSystemMessage(activity);
        }
        var response = Request.CreateResponse(HttpStatusCode.OK);
        return response;
    }
}

}

I've tested sending message activities which works fine, however trying to send an event from the bot to the webpage or from the webpage to the bot after receiving a message doesn't do anything.

The webpage says that BotChat is not defined at both but I'm not sure why

var params = BotChat.queryParams(location.search);

and 

var botConnection = new BotChat.DirectLine({

in index.html

All of my app secrets/id and directline secret are added. I feel like the problem might be how I'm adding my secret and url in index.html but I'm not sure how I would set it all up

Upvotes: 3

Views: 2867

Answers (1)

Eric Dahlvang
Eric Dahlvang

Reputation: 8292

I re-created your project and published it to Azure: http://QuickBackChannelEventTest.AzureWebsites.net/index.html

I posted the code on GitHub. You'll need to change the MicrosoftAppId and MicrosoftAppPassword in the web.config, and add your bot's Direct Line secret to the index.html page's BotChat.DirectLine creation:

var botConnection = new BotChat.DirectLine({
            secret: '**DIRECT_LINE_SECRET**',//params['mysecret'],
            //token: params['t'],
            //domain: params['ngroktunneledurl.com/api/messages'],
            webSocket: params['webSocket'] && params['webSocket'] === "true" // defaults to true
    });

I also added a folder called TestStandAlone that contains only Index.html, botchat.css and botchat.js: https://github.com/EricDahlvang/BackChannelEventTest/tree/master/TestStandalone This works as expected once the the Direct Line secret for the bot is set.

Upvotes: 2

Related Questions