我面临的问题是我使用 C# 和机器人框架 V4 开发了一个具有多个瀑布对话框的网络聊天机器人，并使用 Visual Studio 2019 成功部署到 Azure，没有任何错误，它是一个 HTML 文件，用于访问网络 channel 聊天机器人.此 HTML URL 在除 IE 11 之外的所有浏览器中打开，即它在以下环境中工作正常:
Chrome
边缘
火狐
但是当涉及到 IE 11 时它会抛出错误并且聊天机器人永远不会打开。有时会出现错误，例如 HTML 中使用的 JavaScript 中的语法错误等等。
现在，我的查询是:
如何编写或准备可在所有类型浏览器中运行的HTML 脚本文件？如何动态识别浏览器并根据浏览器自动调用相关脚本。
在 Chrome 中发布后，我正在使用以下 HTML 文件访问我的聊天机器人。
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Web Chat: Custom style options</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--
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/latest/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>
(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://learn.microsoft.com/en-us/azure/bot-service/rest-api/bot-framework-rest-direct-line-3-0-authentication
// Token is found by going to Azure Portal > Your Web App Bot > Channels > Web Chat - Edit > Secret Keys - Show
// It looks something like this: pD*********xI.8ZbgTHof3GL_nM5***********aggt5qLOBrigZ8
const token = 'LxTsWrNC****bPm5awq3DW7hfb*************I2s0nb19f76Xdmm8';
// You can modify the style set by providing a limited set of style options
const styleOptions = {
botAvatarImage: 'https://learn.microsoft.com/en-us/azure/bot-service/v4sdk/media/logo_bot.svg?view=azure-bot-service-4.0',
botAvatarInitials: 'BF',
userAvatarImage: 'https://avatars1.githubusercontent.com/u/45868722?s=96&v=4',
userAvatarInitials: 'WC',
bubbleBackground: 'rgba(0, 0, 255, .1)',
bubbleFromUserBackground: 'rgba(0, 255, 0, .1)'
};
// We are using a customized store to add hooks to connect event
const store = window.WebChat.createStore({}, ({ dispatch }) => next => action => {
if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
// When we receive DIRECT_LINE/CONNECT_FULFILLED action, we will send an event activity using WEB_CHAT/SEND_EVENT
dispatch({
type: 'WEB_CHAT/SEND_EVENT',
payload: {
name: 'webchat/join',
value: { language: window.navigator.language }
}
});
}
return next(action);
});
window.WebChat.renderWebChat({
directLine: window.WebChat.createDirectLine({ token }),
styleOptions,store,
webSpeechPonyfillFactory: window.WebChat.createBrowserWebSpeechPonyfillFactory()
}, document.getElementById('webchat'));
document.querySelector('#webchat > *').focus();
})().catch(err => console.error(err));
</script>
</body>
</html>
我希望同一个 HTML 文件适用于 IE 11，以及如何检测浏览器和相关脚本是否自动触发，以便它自动运行。
由于我是编码、BOT、HTML、CSS 和 JavaScript 的新手，因此请您以详细的指导方式逐步提供所需的修改。
我围绕它进行了一些谷歌搜索，他们说要删除 IE 使用的异步函数。
我还替换了以下行:
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
具有以下内容:
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat-es5.js"></script>
但它再次在下面的部分抛出错误，我不确定如何解决这个问题，我无法得到任何正确的答案:
const store = window.WebChat.createStore({}, ({
dispatch
}) => next => action => {
if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
// When we receive DIRECT_LINE/CONNECT_FULFILLED action, we will send an event activity using WEB_CHAT/SEND_EVENT
dispatch({
type: 'WEB_CHAT/SEND_EVENT',
payload: {
name: 'webchat/join',
value: {
language: window.navigator.language
}
}
});
}
预期结果:
我希望我的 HTML 在所有浏览器中打开，HTML 应包含自动检测浏览器和执行相关脚本的代码，以便聊天机器人在所有浏览器中打开并正常运行，而无需花费任何额外时间。
实际结果:
目前，聊天机器人无法在 IE 11 中使用，但可以在所有其他浏览器中使用。
日期:2019 年 6 月 7 日
@tdurnford: 请根据下面提供的示例找到我修改后的 HTML 脚本:
正如我在评论中试图解释的那样，我没有使用 token 生成器，而是使用下面链接中提供的简单方法，而且 BOT 也不会加载，除非放置我得到的 I-FRAME 是错误的方法以下链接:
不使用 token 生成器的原因也在下面的帖子中给出。
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Web Chat: Full-featured bundle with ES5 polyfills</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--
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/latest/webchat-es5.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>
(function (){
const token = '<<Secret Code>>';
const styleOptions = {
botAvatarImage: 'Ur Image URL',
botAvatarInitials: 'BF',
userAvatarImage: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTXFpBTkKBW7JgYuePzhVoGkDDdZLVKQMZDbgy6j3C0sWvkkH1-',
userAvatarInitials: 'WC',
bubbleBackground: 'rgba(0, 0, 255, .1)',
bubbleFromUserBackground: 'rgba(0, 255, 0, .1)'
};
var store = window.WebChat.createStore({}, function (_ref) {
var dispatch = _ref.dispatch;
return function (next) {
return function (action) {
if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
dispatch({
type: 'WEB_CHAT/SEND_EVENT',
payload: {
name: 'webchat/join',
value: { language: window.navigator.language }
}
});
}
return next(action);
};
};
});
window.WebChat.renderWebChat({
directLine: window.WebChat.createDirectLine({
token: token,
styleOptions: styleOptions,
store: store,
webSpeechPonyfillFactory: window.WebChat.createBrowserWebSpeechPonyfillFactory()
})}, document.getElementById('webchat'));
document.querySelector('#webchat > *').focus();
});
</script>
</body>
</html>
您能否验证我在上面的脚本中是否做错了什么，因为我已经厌倦了根据我的理解/知识将所有正确的值按需要放在各处？
能否请您帮我解决 BOT 在 IE-11 中无法打开的问题？如果可能的话，我们可以通过 Skype 连接来共享屏幕，并根据需要根据双方同意的时间进行讨论。
感谢和问候 -ChaitanyaNG
最佳答案
您不能在 IE 11 中使用 async/await 协议(protocol)。还要确保您使用的是 es5 包。看看这个Getting Started wit es5 Bundle网络聊天示例。
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Web Chat: Full-featured bundle with ES5 polyfills</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--
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/latest/webchat-es5.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>
const token = '<WEB_CHAT_SECRET>';
const styleOptions = {
botAvatarImage: 'Ur Image URL',
botAvatarInitials: 'BF',
userAvatarImage: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTXFpBTkKBW7JgYuePzhVoGkDDdZLVKQMZDbgy6j3C0sWvkkH1-',
userAvatarInitials: 'WC',
bubbleBackground: 'rgba(0, 0, 255, .1)',
bubbleFromUserBackground: 'rgba(0, 255, 0, .1)'
};
const store = window.WebChat.createStore(
{},
function (_ref) {
const dispatch = _ref.dispatch;
return function (next) {
return function (action) {
if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
dispatch({
type: 'WEB_CHAT/SEND_EVENT',
payload: {
name: 'webchat/join',
value: { language: window.navigator.language }
}
});
}
return next(action);
};
};
});
window.WebChat.renderWebChat({
directLine: window.WebChat.createDirectLine({ token: token}),
styleOptions: styleOptions,
store: store,
webSpeechPonyfillFactory: window.WebChat.createBrowserWebSpeechPonyfillFactory()
}, document.getElementById('webchat'));
document.querySelector('#webchat > *').focus();
</script>
</body>
</html>
希望这对您有所帮助!
关于javascript - 如何解决使用 SDK V4 模板在 C# 中开发的 Web Chat Bot 的 HTML 页面无法在 IE 11 浏览器中打开的问题？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56474336/