Как исправить проблему HTML-страницы для веб-чата Бот, разработанный в C # с использованием шаблона SDK V4, не открывается в браузере IE 11? - PullRequest
1 голос
/ 06 июня 2019

Проблема, с которой я сталкиваюсь, заключается в том, что я разработал бота для веб-чата с несколькими диалоговыми окнами с водопадом, используя C # и среду фрейма бота V4, и успешно развернул его на Azure с помощью Visual Studio 2019 без каких-либо ошибок, используя HTML-файл для доступа к чат-боту веб-канала,Этот HTML-URL открывается во всех браузерах, кроме IE 11, т. Е. Он отлично работает в:

  1. Chrome

  2. Edge

  3. Firefox

Но когда доходит до IE 11, он выдает ошибку, и чат-бот никогда не открывается.Иногда возникает ошибка, например синтаксическая ошибка в JavaScript, используемом в HTML, и т. Д.

Теперь мой запрос:

Как написать или подготовить файл сценария HTML, который может работать во всехтип браузеров?Как идентифицировать браузер динамически и вызывать соответствующий скрипт на основе этого автоматически.

Я использую приведенный ниже HTML-файл для доступа к своему чат-боту после публикации в 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, а также как автоматически запускать браузер и связанный скрипт, чтобы он работал автоматически.

Прошу вас предоставить пошаговые необходимые изменения в подробном руководстве, какЯ новичок в области кодирования, BOT, HTML, CSS и JavaScript.

Я сделал несколько поисков в Google, и они сказали, что затем удалите асинхронную функцию для 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 должен содержать код для автоматического dвыберите браузер и выполните соответствующий скрипт, чтобы чат-бот открывался во всех браузерах и функционировал должным образом, не занимая дополнительного времени.

Фактический результат:

В настоящее время бот-чат неработает в IE 11, но работает во всех других браузерах.


Дата: 7 июня 2019

@ tdurnford: пожалуйста, найдите мой измененный HTML-скрипт в соответствии с примером, приведенным ниже:

Как я пытался объяснить в своем комментарии, я не использую Token Generator, вместо этого простой метод, представленный в ссылке ниже, а также BOT не загружается до тех пор, пока я не установлю I-FRAME, который я получаю, является неправильным способом сделать это.в соответствии с приведенной ниже ссылкой:

Причина неиспользования токен-генератора также указана в самом посте ниже.

[BotFramework]: есть ли способ отобразить приглашение Oauth в Heroкарта или адаптивная карта в BOT Разработано с использованием SDK V4 в C #?

<!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>

. Можете ли вы проверить, что я сделал что-то не так в приведенном выше скрипте, как ihустали ставить все нужные значения везде, где необходимо, в соответствии с моим пониманием / знаниями?

Не могли бы вы помочь мне решить проблему, связанную с невозможностью открытия BOT в IE-11?если возможно, мы можем подключиться к Skype, чтобы поделиться экраном и обсудить его в случае необходимости по взаимному согласию.

Спасибо и С уважением -ChaitanyaNG

1 Ответ

1 голос
/ 06 июня 2019

Вы не можете использовать протокол async / await в IE 11. Также убедитесь, что вы используете пакет es5.Взгляните на этот Getting Started with 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>

Надеюсь, это поможет!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...