Question

我有2个带有WebChat的HTML。尝试从一个WebChat聊天到另一个WebChat时，消息显示在同一侧，类似于：

我读到您必须向WebChat输入userID，但这无济于事。有人对如何解决有建议吗？

这是一个WebChat：

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

这是第二个WebChat：

        <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的令牌都相同。

Answer 1

由于两个对话共享同一个令牌，因此Web聊天将把来自两个用户的所有消息显示为一个用户。我建议您使用两个不同的令牌创建两个会话，而不要使用单个令牌。然后，您可以链接两个对话并从bot管理对话流程。

网络聊天v4

生成两个不同的令牌-每个响应都有一个令牌和一个对话ID。然后创建两个自定义商店中间件，这些中间件将另一个对话的ID添加到每个传出活动的频道数据中。该ID将在漫游器中用于查找对话参考，以将消息转发给其他用户。

有关添加自定义渠道数据的更多详细信息，请参见Piggyback Data on Every Outgoing Activity网络聊天示例。

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将向bot发送对话更新事件。此事件将触发onMemberAdded活动处理程序，您可以在其中捕获对话参考。请注意，当您生成直接令牌时，应在请求中添加用户ID，以便在用户向漫游器发送消息之前触发onMembersAdded处理程序。请查看此GitHub Issue，了解更多详细信息。

每个用户的传入消息将触发onMessage处理程序。在处理程序中，从客户端添加的渠道数据中检索对话ID。使用ID检索对话参考，并将消息作为主动消息发送给其他对话。

为简单起见，此示例将参考保存在字典中；但是，您应该在生产中的持久性存储中管理会话引用。

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();
        });
    }
}

屏幕截图

希望这会有所帮助

Azure Web聊天-消息显示在聊天窗口的同一侧

1 个答案:

网络聊天v4

BotFramework SDK v4（节点）

屏幕截图