Как перенаправить веб-страницу без обновления плавающего JavaScript? - PullRequest
Новая
       14

Как перенаправить веб-страницу без обновления плавающего JavaScript?

0 голосов
/ 06 апреля 2019

Сценарий: у меня есть веб-сайт, на котором на сайте плавает виджет чата для JavaScript.От этого чат-бота я бы хотел перенаправить веб-сайт на другой URL-адрес без очистки чата

Я хотел бы знать, как я могу инициировать перенаправление страниц из плавающего виджета чата javascript, не перезагружая весь веб-сайт вместе с chatwidget

1 Ответ

0 голосов
/ 10 апреля 2019

Это может быть достигнуто путем создания экземпляра компонента WebChat в двух ваших html-файлах, передачи токена от первого ко второму для возобновления разговора и использования отправки WebChat для мониторинга:

  • входящее действие для запроса перенаправления
  • , когда соединение установлено, чтобы уведомить пользователя (строго говоря, не ваш запрос, но казался полезным)

index_1.html :

Сначала я получаю токен прямой линии.Я делаю это локально через отдельный проект.Вы можете получить это, как вы можете.Вы захотите создать хранилище WebChat и сопоставить тип действия с DIRECT_LINE / INCOMING_ACTIVITY, чтобы получить запрос перенаправления пользователя.Я создаю событие и добавляю значение перенаправления и токен к его объекту данных.Токен необходим для повторного подключения к текущему разговору на новой странице.Затем объект «данные» передается в окно как часть события.

Включается прослушиватель событий, который прослушивает имя события и принимает значения, переданные через него.Когда он обнаруживает «перенаправление» как типизированный ответ в объекте «data», он сохраняет значение data.token в localStorage и выполняет перенаправление через window.location. 

  <body>
    <h2>WebChat 1</h2>
    <div id="webchat" role="main">WebChat 1</div>
    <script type="text/javascript"
      src="https://unpkg.com/markdown-it/dist/markdown-it.min.js"></script>
    <script
      src="https://cdn.botframework.com/botframework-webchat/master/webchat.js"></script>
    <script>
      ( async function () {
        const res = await fetch( 'http://localhost:3979/directline/token', { method: 'POST' } );
        const { token } = await res.json();

        const store = window.WebChat.createStore(
          {},
          ({ dispatch }) => next => action => {
            if (action.type === 'DIRECT_LINE/INCOMING_ACTIVITY') {
              const event = new Event('webchatincomingactivity');

              event.data = action.payload.activity;
              event.data.redirect = "embed2.html"
              event.data.token = token;
              window.dispatchEvent(event);
            }
            return next(action);
          }
        );

        window.WebChat.renderWebChat( {
          directLine: window.WebChat.createDirectLine( { token } ),
          store
        }, document.getElementById( 'webchat' ) );

        window.addEventListener( 'webchatincomingactivity', ( { data } ) => {
          console.log( `Received an activity of type "${ data.type }":` );
          console.log(data);
          if ( data.text === 'redirect' ) {
            window.localStorage.setItem('token', data.token);
            window.location = data.redirect;
          }
        } );

        document.querySelector('#webchat > *').focus();
      } )();
   </script>
  </body>

index_2.html:

Второй html-файл первым получает значение токена, сохраненное в localStorage.Затем я создаю хранилище и сопоставляю тип действия «DIRECT_LINE / CONNECT_FULFILLED» и отправляю диспетчеру бот, уведомляющий его с помощью действия «WEB_CHAT / SEND_EVENT» о том, что только что установилось новое соединение.У этого события есть имя и значение, которое будет искать бот, поэтому его не смущают другие соединения, сделанные в других местах. 

  <body>
    <h2>WebChat 2</h2>
    <div id="webchat" role="main">WebChat 2</div>
    <script type="text/javascript"
      src="https://unpkg.com/markdown-it/dist/markdown-it.min.js"></script>
    <script
      src="https://cdn.botframework.com/botframework-webchat/master/webchat.js"></script>
    <script>
      ( async function () {
        let token = window.localStorage.getItem( 'token' );

        const store = window.WebChat.createStore(
          {},
          ({ dispatch }) => next => action => {
            if ( action.type === 'DIRECT_LINE/CONNECT_FULFILLED' ) {
              dispatch( {
                type: 'WEB_CHAT/SEND_EVENT',
                payload: {
                    name: 'webchat-redirect',
                    value: true
                }
              });
            }
            return next(action);
          }
        );

        window.WebChat.renderWebChat( {
          directLine: window.WebChat.createDirectLine ( { token } ),
          store
        }, document.getElementById( 'webchat' ) );

        document.querySelector('#webchat > *').focus();
      } )();
   </script>
  </body>

bot.js:

Наконец, в обработчике бота onTurn я отслеживаю событие, которое отправит index_2.html .Когда это обнаруживается, я начинаю новое диалоговое окно, которое прерывает текущее диалоговое окно, чтобы сообщить пользователю об успешном повторном соединении с ботом.Когда диалог завершится, предыдущий диалог возобновится. 

const REDIRECT_DIALOG = 'redirect_page';
const REDIRECT_PROMPT = 'redirect_prompt';

this.dialogs
  .add(new TextPrompt(REDIRECT_PROMPT));

this.dialogs.add(new WaterfallDialog(REDIRECT_DIALOG, [
    this.redirectPrompt.bind(this)
]));

async redirectPrompt(step) {
    await step.context.sendActivity('Bot conversation resumed successfully');
    return await step.endDialog();
}

async onTurn(turnContext) {
  const dc = await this.dialogs.createContext(turnContext);

  if (turnContext.activity.type === ActivityTypes.Event) {
    if (turnContext.activity.name === 'webchat-redirect' && turnContext.activity.value === true) {
      await dc.beginDialog(REDIRECT_DIALOG);
    }
  }

  if (turnContext.activity.type === ActivityTypes.Message) {
    [...other code...]
  }
}

Надежда на помощь!

...