使用 DirectLineJS 创建网站

Question

我正在尝试将 DirectLineJS 设置为在网站上工作，现在仅用于测试目的。我已经构建了 DirectLineJS 存储库，并按照此处 https://github.com/Microsoft/BotFramework-DirectLineJS

的文档将 /built/directLine.js 添加到我的网站文件夹中

在 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 对象？

Answer 1

您正在混合使用 TypeScript 和 JavaScript。

要使用 Direct Line，请将以下内容添加到您页面的 HTML：

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

然后您应该删除 Import 语句，最后，将创建 DirectLine 对象的代码更新为：

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

注意 DirectLine.DirectLine

使用 DirectLineJS 创建网站

Creating website using DirectLineJS

html

javascript

botframework

direct-line-botframework