使用DirectLineJS创建网站

时间:2017-04-27 18:14:45

标签: javascript html botframework direct-line-botframework

我正在尝试将DirectLineJS设置为在网站中工作,仅用于测试目的。我已经构建了DirectLineJS存储库并将/built/directLine.js添加到我的网站文件夹中,遵循此处的文档https://github.com/Microsoft/BotFramework-DirectLineJS

在HTML页面中,我只是使用按钮尝试通过直接行发送消息

<html>

<head>
    <meta charset="UTF-8" />
    <title>Bot Chat</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://unpkg.com/botframework-directlinejs/directLine.js" type="javascript"></script>

    <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;">Welcome to my custom Bot!</h2>
    <section class="container"> 

        <input id="clickMe" type="button" value="clickme" onclick="connectDirectLine();" />

    </section>

    <textarea id="myTextarea">
342 Alvin Road
Ducksburg</textarea>

    <p>Click the button to change the contents of the text area.</p>

    <button type="button" onclick="myFunction()">Try it</button>

    <script>
        function myFunction() {
            var text = document.getElementById("myTextarea").value;
            console.log(text)
        }
    </script></body>

</html>

<script>        
        function connectDirectLine() {

            import { DirectLine } from 'botframework-directlinejs';
            var directLine = new DirectLine({
                secret: "mySecret",
            });

            directLine.postActivity({
                from: { id: 'myUserId', name: 'myUserName' }, // required (from.name is optional)
                type: 'message',
                text: 'a message for you, Rudy'
            }).subscribe(
                id => console.log("Posted activity, assigned ID ", id),
                error => console.log("Error posting activity", error)
                );

            directLine.activity$
                .filter(activity => activity.type === 'message' && activity.from.id === 'yourBotHandle')
                .subscribe(
                message => console.log("received message ", message)
                );
        }
</script>
<html

当我运行网站时,我收到的错误是从import { DirectLine } from "botframework-directlinejs";

导入的意外令牌

如何正确导入botframework-directlinejs文件以便我可以使用DirectLine对象?

1 个答案:

答案 0 :(得分:2)

您正在将TypeScriptJavaScript混合。

要使用Direct Line,请将以下内容添加到您网页的HTML

<script src="http://unpkg.com/botframework-directlinejs/directLine.js"/>

然后你应该删除你的Import语句,最后更新创建DirectLine对象的代码:

 var directLine = new DirectLine.DirectLine({
     secret: "mySecret",
 });

注意DirectLine.DirectLine