Сценарий: у меня есть веб-сайт, на котором плавает виджет javascript для чата. Из этого чат-бота я бы хотел перенаправить веб-сайт на другой URL-адрес, не очищая чат.
Я хотел бы знать, как я могу вызвать перенаправление страницы из плавающего виджета чата javascript без перезагрузки всего веб-сайта вместе с виджетом чата.
Этого можно достичь, создав экземпляр компонента WebChat в двух ваших html-файлах, передав токен из первого во второй для возобновления разговора и используя отправку WebChat для мониторинга:
index_1.html:
Во-первых, я получаю токен прямой линии. Я делаю это локально через отдельный проект. Вы можете получить его, как вы можете. Вы захотите создать магазин WebChat и сопоставить тип действия с «DIRECT_LINE/INCOMING_ACTIVITY», чтобы перехватить запрос пользователя на перенаправление. Я создаю событие и добавляю значение перенаправления и токен в его объект данных. Токен необходим для повторного подключения к текущему разговору на новой странице. Затем объект «данные» передается окну как часть события.
Включен прослушиватель событий, который прослушивает имя события и принимает переданные значения. Когда он обнаруживает «перенаправление» как типизированный ответ в объекте «данные», он сохраняет значение 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...]
}
}
Надежда на помощь!
window.parentдля доступа (и, следовательно, перенаправления) на главную страницу. - person Robin Zigmond schedule 06.04.2019