Javascript 从嵌入式webchat发送事件_Javascript_C#_Html_Botframework_Direct Line Botframework

Javascript 从嵌入式webchat发送事件

javascript c# html botframework

Javascript 从嵌入式webchat发送事件,javascript,c#,html,botframework,direct-line-botframework,Javascript,C#,Html,Botframework,Direct Line Botframework,我正在尝试从一个嵌入式webchat发送和接收事件，该webchat遵循本例中的网站代码，并且bot实现了ezequiel所回答的代码以下是我的设置中的所有内容 index.html <!DOCTYPE html> <!-- NOTE: This sample requires a bot which can send and receive specific event messages. Follow the instructions on https://githu

我正在尝试从一个嵌入式webchat发送和接收事件，该webchat遵循本例中的网站代码，并且bot实现了ezequiel所回答的代码

以下是我的设置中的所有内容 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>

及

在index.html中

添加了我的所有应用程序机密/id和directline机密。我觉得问题可能在于我如何在index.html中添加我的秘密和url，但我不确定我将如何设置所有这些

我重新创建了您的项目并将其发布到Azure：

我把密码贴在墙上了。您需要在web.config中更改MicrosoftAppId和MicrosoftAppPassword，并将bot的

Direct Line

secret添加到index.html页面的BotChat.DirectLine创建中：

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
    });

我还添加了一个名为TestStandAlone的文件夹，其中只包含Index.html、botchat.css和botchat.js：一旦设置了bot的直连密码，该文件夹就可以正常工作。

您是否尝试过临时编写密码和令牌，而不是依赖于参数？（直到你让它工作起来，然后添加参数）我尝试硬编码我的秘密和域，像这样var

botConnection=new BotChat.DirectLine（{secret:“我的DirectLine\u secret\u这里”，域：https://xxxxxxxx.ngrok.io/api/messages"         });但这似乎不起作用。我不确定它是否正确，因为我添加的是错误的（对JS来说是非常新的）域将指定不同的直达线端点：。。。不是bot消息的端点。请尝试删除“domain:etc”。好的，我刚刚将其更改为var botConnection=new BotChat.DirectLine（{secret:“My_DirectLine_secret”，}）每当我在本地运行index.html时，它都会说BotChat不是用chrome控制台定义的。我必须向web文件夹添加一些依赖项吗？在本地运行时，最简单的方法是将.css和.js文件放在同一个目录中。我对此进行了测试，它的工作原理与您预期的一样：
var params = BotChat.queryParams(location.search);

var botConnection = new BotChat.DirectLine({

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
    });