如何解决使用SDK V4模板在C#中开发的Web Chat Bot的HTML页面问题在IE 11浏览器中未打开的问题? [英] How to fix issue of HTML page for Web Chat Bot developed in C# using SDK V4 template is not opening in IE 11 browser?
问题描述
我面临的问题是我已经使用C#和bot框架V4开发了一个具有多个瀑布对话框的Web聊天机器人，并使用Visual Studio 2019成功部署了Azure，并且没有任何错误，并且HTML文件可以访问Web频道聊天机器人.在除IE 11之外的所有浏览器中都可以打开此HTML URL，即，该URL在以下浏览器中可以正常运行:
The issue I am facing is I have developed a web chat bot with multiple waterfall dialog's using C# and bot framework V4 and deployed to azure successfully using Visual studio 2019 without any errors with it an HTML file to access the web channel chat bot. This HTML URL gets opened in all the browsers except IE 11 i.e. it works fine in:
-
Chrome
Chrome
边缘
Firefox
但是当谈到IE 11时，它会引发错误，并且聊天机器人将永远不会打开.有时会出现诸如HTML中使用的JavaScript中的语法错误之类的错误，等等.
But when comes to IE 11 it throws error and the chat bot never opens. Some times error like syntax error in JavaScript used in the HTML and so on so forth.
现在，我的查询是:
如何编写或准备可在所有类型的浏览器中使用的HTML脚本文件?如何动态识别浏览器并基于该浏览器自动调用相关脚本.
How to write or prepare the HTML script file which can work in all type of browsers? How to identify the browser dynamically and call the related script based upon that automatically.
在Chrome中发布后，我正在使用以下HTML文件访问聊天机器人.
I am using the below HTML file to access my chat bot after publishing in Chrome.
<!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://docs.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://docs.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，还希望如何检测浏览器和相关脚本会自动启动以使其自动运行.
I want the same single HTML file to work for IE 11 also how to detect the browser and related script too fire automatically such that it works automatically.
由于我是编码，BOT，HTML，CSS和JavaScript的新手，因此请您以详细的指导方式逐步提供所需的修改.
I request you to please provide required modifications step by step in detailed guide manner as I am new to coding, BOT, HTML, CSS, and JavaScript.
我做了一些谷歌搜索，然后他们说要删除异步功能供IE使用.
I did some Googling around it and they said to remove async function for IE use then.
我也替换了下面的行:
<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>
但是再次在下面抛出错误，不确定如何解决该问题，而我没有得到适当的答案:
But again it throws error at below part not sure how to solve this for which I couldn't get any proper answer:
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应该包含用于自动检测浏览器并执行相关脚本的代码，这样聊天机器人就可以在所有浏览器中打开并正常运行，而无需花费更多时间.
I want my HTML to open in all browsers and the HTML should contain the code for automatically detect browser and execute related script such that the chat bot opens in all browsers and functions properly without taking any additional time.
实际结果:
当前，聊天机器人无法在IE 11中运行，但可以在所有其他浏览器中运行.
Currently, chat bot not working in IE 11 but working in all other browsers.
日期:2019年6月7日
Date: 7-June-2019
@tdurnford:请根据下面提供的示例找到我修改后的HTML脚本:
@tdurnford: Please find my modified HTML script according to the sample provided below:
正如我试图在我的评论中解释的那样，我没有使用令牌生成器，而是在下面的链接中提供了简单的方法，并且直到加载了I-FRAME为止，除非加载了错误的方法，否则BOT不会加载下面的链接:
As tried to explain in my comment, I am not using Token generator instead the easy method provided in the below link and also the BOT is not loading until unless put I-FRAME which i get is wrong way of doing it according to below link:
下面的帖子中也给出了不使用令牌生成器的原因.
The reason for not using token generator is also given in the below post itself.
[BotFramework]:有没有办法在使用C#SDK V4开发的BOT中的英雄卡或自适应卡中显示Oauth提示?
<!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>
您是否可以验证我是否在上述脚本中做错了什么，因为我已经厌倦了根据我的理解/知识将所需的所有正确值放在任何地方?
can you please verify whether i have done anything wrong in the above script as i have tired to put all the correct values as needed everywhere as per my understanding/knowledge?
能否请您帮我解决BOT无法在IE-11中打开的问题?如果可能的话，我们可以让Skype连接到共享屏幕，并根据需要在双方共同同意的时间基础上进行讨论.
Can you please help me resolve the issue of BOT not opening in IE-11? if possible we can have a Skype connect to share screen and discuss it if needed on need basis based on mutually agreeable time.
感谢&问候-ChaitanyaNG
Thanks & Regards -ChaitanyaNG
推荐答案
您不能在IE 11中使用异步/等待协议.另外，请确保您使用的是es5捆绑包.看看这个获得开始使用es5 Bundle 网络聊天示例.
You can't use the async/await protocol in IE 11. Also make sure you are you using the es5 bundle. Take a look at this Getting Started wit es5 Bundle Web Chat Sample.
<!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>
希望这会有所帮助！
这篇关于如何解决使用SDK V4模板在C#中开发的Web Chat Bot的HTML页面问题在IE 11浏览器中未打开的问题?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
