Веб-чат Azure - сообщения отображаются на одной стороне окна чата - PullRequest
0 голосов
/ 19 сентября 2019

У меня есть 2 HTML с веб-чатом.При попытке переписаться с одного веб-чата на другой сообщения появляются на одной стороне, как показано ниже: enter image description here

Я прочитал, что вы должны ввести userID в веб-чате, ноэто не помоглоУ кого-нибудь есть совет, как это исправить?

Это один веб-чат:

    <div id="WebChatWindowTest" role="main">
      <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
      <script>
         const styleOptions = {
            rootHeight: '450px',
            rootWidth: '100%',
            bubbleBackground: 'rgba(0, 0, 255, .1)',
            bubbleFromUserBackground: 'rgba(0, 255, 0, .1)',
            hideUploadButton: true,

         };

         window.WebChat.renderWebChat(
            {
               directLine: window.WebChat.createDirectLine({

                  token: '' + loginToken
               }),
        userID: 'MyOtherID',
        username: 'MyOtherName',



               styleOptions
            },
            document.getElementById('WebChatWindowTest')
         );

      </script>
</div>

, а это второй веб-чат:

        <div id="WebChatWindow" role="main">
      <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
      <script>
         const styleOptions = {
            rootHeight: '450px',
            rootWidth: '100%',
            bubbleBackground: 'rgba(0, 0, 255, .1)',
            bubbleFromUserBackground: 'rgba(0, 255, 0, .1)',
            hideUploadButton: true
         };


         window.WebChat.renderWebChat(
            {
               directLine: window.WebChat.createDirectLine({
                  secret: token
               }),
        userID: 'MyID',
        username: 'MyName',

               styleOptions
            },
            document.getElementById('WebChatWindow')
         );
      </script>
</div>

Токен дляоба HTML одинаковы.

1 Ответ

1 голос
/ 23 сентября 2019

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

Web Chat v4

Создайте два разных токена - каждый ответ имеет токен и идентификатор разговора.Затем создайте два пользовательских промежуточных программного обеспечения магазина, которые добавляют идентификатор другого разговора к данным канала каждого исходящего действия.Этот идентификатор будет использоваться в боте для поиска ссылки на разговор, чтобы переслать сообщение другому пользователю.

Взгляните на Piggyback Data для каждой исходящей активности Пример веб-чата для получения дополнительной информации о добавлении пользовательских данных канала.

const res1 = await fetch('/directline/token', { method: 'POST' });
const { token: token1, conversationId: conversationId1 } = await res1.json();

const res2 = await fetch('/directline/token', { method: 'POST' });
const { token: token2, conversationId: conversationId2 } = await res2.json();

const store1 = window.WebChat.createStore(
  {},
  () => next => action => {
    if (action.type === 'DIRECT_LINE/POST_ACTIVITY') {
      action = window.simpleUpdateIn(action, ['payload', 'activity', 'channelData', 'conversationId'], () => conversationId2);
    }
    return next(action);
  }
);

const store2 = window.WebChat.createStore(
  {},
  () => next => action => {
    if (action.type === 'DIRECT_LINE/POST_ACTIVITY') {
      action = window.simpleUpdateIn(action, ['payload', 'activity', 'channelData', 'conversationId'], () => conversationId1);
    }
    return next(action);
  }
);

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

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

BotFramework SDK v4 (узел)

Direct Line отправит боту сообщение об обновлении беседы, когда беседа будет создана для каждого пользователя.Это событие вызовет обработчик активности onMemberAdded, где вы можете захватить ссылку на беседу.Обратите внимание, вы должны добавить идентификатор пользователя в запрос при создании токена прямой линии, чтобы обработчик onMembersAdded срабатывал до того, как пользователь отправит сообщение боту.Взгляните на этот GitHub Issue для получения более подробной информации.

Входящие сообщения от каждого пользователя вызовут обработчик onMessage.В обработчике извлеките идентификатор разговора из данных канала, которые были добавлены на стороне клиента.Используйте идентификатор для извлечения ссылки на беседу и отправки сообщения в качестве упреждающего сообщения другому разговору.

В этом примере для простоты сохраняется ссылка в словаре;однако вы должны управлять ссылками на диалоги в постоянном хранилище на производстве.

const { ActivityHandler, TurnContext } = require('botbuilder');

class EchoBot extends ActivityHandler {
    constructor() {
        super();

        // For simplicity, we are just saving the conversation references in an object.
        // In production, they should be maintained and managed in a persistent database structure.
        this.conversationReferences = {};

        // See https://aka.ms/about-bot-activity-message to learn more about the message and other activity types.
        this.onMessage(async (context, next) => {
          const { activity: { channelData: { conversationId }, text }} = context;
          const reference = this.conversationReferences[conversationId];

          if (reference) {
            context.adapter.continueConversation(reference, context => {
              context.sendActivity(text);
            });
          }
          await next();
        });

        this.onMembersAdded(async (context, next) => {

            const membersAdded = context.activity.membersAdded;
            for (let cnt = 0; cnt < membersAdded.length; ++cnt) {
                if (membersAdded[cnt].id !== context.activity.recipient.id) {
                  // Save the conversation reference when a new user is added.
                  const reference = TurnContext.getConversationReference(context.activity);
                  const { conversation: { id } } = reference;
                  this.conversationReferences[id] = reference;
                }
            }
            await next();
        });
    }
}

Снимок экрана

enter image description here

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

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