reactjs - 使用 React 的 Azure Bot Framework 出现问题
问题描述
下面是我为机器人框架编写的代码,我参考了 git hub 中的文档,并关注了很多文章和堆栈溢出的帖子,似乎在 WebChat.Chat 行显示机器人时抛出错误,here也是stackoverfow中帖子的链接:
declare var require: any
var React = require('react');
var ReactDOM = require('react-dom');
var DirectLine = require('botframework-directlinejs');
//import * as WebChat from 'botframework-webchat';
var WebChat = require('botframework-webchat');
export class Hello extends React.Component {
constructor() {
super();
this.state = { data: [] };
this.variableValue = { dataValue: [] };
}
async componentDidMount() {
const response = await fetch('https://directline.botframework.com/v3/directline/tokens/generate', {
method: 'POST',
headers: {
'Authorization': 'Bearer secretvalue',
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
accessLevel: 'View',
allowSaveAs: 'false',
})
});
// const { token } = await res.json();
const { token } = await response.json();
console.log(token);
this.setState({ data: token });
//
}
render() {
const {
state: { data }
} = this
return (
//<div>
// <p>Hello there1</p>
// <ul>
// {data}
// </ul>
//</div>
<WebChat.Chat
directLine={{
data,
webSocket: false
}}
style={{
height: '100%',
width: '100%'
}}
//user={{
// id: 'default-user',
// name: 'Some User'
//}}
/>
);
}
}
ReactDOM.render(<Hello />, document.getElementById('root'));
我可以通过休息调用获取令牌,但在必须显示机器人时出现错误,使用WebChat.Chat directLine
以下是错误:
编辑 我能够使用 react 和 babel 运行 html 文件中的代码,下面是代码....
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Web Chat: Integrate with React</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--
For simplicity and code clarity, we are using Babel and React from unpkg.com.
-->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://unpkg.com/react@16.5.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.5.0/umd/react-dom.development.js"></script>
<!--
For demonstration purposes, we are using the development branch of Web Chat at "/master/webchat.js".
When you are using Web Chat for production, you should use the latest stable release at "/latest/webchat.js",
or lock down on a specific version with the following format: "/4.1.0/webchat.js".
-->
<script src="https://cdn.botframework.com/botframework-webchat/master/webchat.js"></script>
<style>
html, body { height: 100% }
body { margin: 0 }
#webchat {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="webchat" role="main"></div>
<script type="text/babel">
(async function () {
// In this demo, we are using Direct Line token from MockBot.
// To talk to your bot, you should use the token exchanged using your Direct Line secret.
// You should never put the Direct Line secret in the browser or client app.
// https://docs.microsoft.com/en-us/azure/bot-service/rest-api/bot-framework-rest-direct-line-3-0-authentication
const headers = {"Authorization": "Bearer rngzqJ7rkng.cwA.A8k.xg_Jb-NbNs4Kq8O2CcF-vnNxy8nlCMPMPYaXL0oROr0"}
const body = {"accessLevel": "View"}
//const res = await fetch('https://directline.botframework.com/v3/directline/tokens/generate', { method: 'POST' }, {Headers:headers},{Body:body});
//const res = await fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' });
const res = await fetch('https://directline.botframework.com/v3/directline/tokens/generate', {
method: 'POST',
headers: {
'Authorization': 'Bearer secretvalue',
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
accessLevel: 'View',
allowSaveAs: 'false',
})
});
const { token } = await res.json();
const { ReactWebChat } = window.WebChat;
window.ReactDOM.render(
<ReactWebChat directLine={ window.WebChat.createDirectLine({ token }) } />,
document.getElementById('webchat')
);
document.querySelector('#webchat > *').focus();
})().catch(err => console.error(err));
</script>
</body>
</html>
但是当我在节点 js 应用程序中使用它时,我在使用 WebCHat.Chat 时遇到了问题。
解决方案
有两个版本的网络聊天 - v3 和 v4。您引用的 StackOverflow 问题使用的是 Web Chat v3,而您使用的依赖项是 v4。查看下面的代码片段,了解您使用 Node 实现的 Web Chat v4 的外观。
import React from 'react';
import ReactWebChat, { createDirectLine } from 'botframework-webchat';
export default class extends React.Component {
constructor(props) {
super(props);
this.state = {
directLine: null
};
}
componentDidMount() {
this.fetchToken();
}
async fetchToken() {
const res = await fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' });
const { token } = await res.json();
this.setState(() => ({
directLine: createDirectLine({ token })
}));
}
render() {
return (
this.state.directLine ?
<ReactWebChat
className="chat"
directLine={ this.state.directLine }
/>
:
<div>Connecting to bot…</div>
);
}
}
有关更多详细信息,请查看GitHub Repo 上的示例- 示例 17 是查看 Node 实现的一个很好的示例。
推荐阅读
- hql - 在 hibernate-5 中运行命名查询时,我将如何确保它使用 JPA2.1 标准
- ios - 如何在 UITableViewCell 中创建表格视图?具有可扩展功能
- python - 三个问题答错后如何结束测验
- javascript - 打字稿中的Json形成(Angular 7)
- c# - 如何更新我的 UI 而不会出现卡顿/死锁
- powershell - 有没有办法只为文件的第一次重命名定义文件系统观察器?
- pandas - 包含大于基于另一行条件的对应值的 ID 行
- javascript - 如何使用查询使我的页面空白?
- java - 如何将数据从重复列表数据转换为组数据列表
- r - 如何将两个 actionButton 与两个单独的闪亮观察事件一起使用?