Question

我正在使用botframework 3.9，由于某些原因，我现在无法升级。我想知道是否有一种方法可以打开新的浏览器窗口，以便在其中呈现页面或触发JavaScript函数。这是我打开链接的方式：

await context.PostAsync(@"please [click here](http://www.example.com/)");

这确实呈现了链接，但是，我想在JavaScript窗口中打开一个链接，以便我可以以编程方式关闭该窗口，或者如果可以的话，我可以触发一些JavaScript函数。

Answer 1

这实际上比您想象的要容易得多。如果看一下WebChat README，您会发现有很多方法可以自定义WebChat。请特别注意sample 11，您可以演示here。该页面的主体如下所示：

<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

    const res = await fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' });
    const { token } = await res.json();

    // We are creating our own version of Redux store, which include middleware and optional initial state.
    const store = window.WebChat.createStore(
      {},
      ({ dispatch }) => next => action => {
        if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
          // After connected, we will send a message by dispatching a Redux action.
          dispatch({ type: 'WEB_CHAT/SEND_MESSAGE', payload: { text: 'sample:backchannel' } });
        } else if (action.type === 'DIRECT_LINE/INCOMING_ACTIVITY') {
          // When receiving an activity of type "event" with name of "sample:backchannel", prompt it out.
          const { activity } = action.payload;

          if (activity.type === 'event' && activity.name === 'sample:backchannel') {
            alert(JSON.stringify(activity, null, 2));
          }
        }

        return next(action);
      }
    );

    window.WebChat.renderWebChat({
      directLine: window.WebChat.createDirectLine({ token }),
      // We will use a custom version of Redux store, which we added middleware to handle backchannel messages.
      store
    }, document.getElementById('webchat'));

    document.querySelector('#webchat > *').focus();
  })().catch(err => console.error(err));
</script>

您可以在此示例中看到，通过使用JavaScript的alert函数打开弹出窗口，可以对WebChat进行修改以响应机器人的某些活动。修改是通过创建商店，然后将该商店作为参数传递给renderWebChat来完成的。

要打开一个可以关闭的窗口，而不是打开警报窗口。如果您将商店修改为如下所示，则可以实现此目的：

let windows = {};

const store = window.WebChat.createStore(
    {},
    ({ dispatch }) => next => action => {
        if (action.type === 'DIRECT_LINE/INCOMING_ACTIVITY') {
            const { activity } = action.payload;

            if (activity.type === 'event') {
                let url = activity.value;

                if (activity.name == 'open' && !windows[url]) {
                    windows[url] = window.open(url);
                }

                if (activity.name == 'close' && windows[url]) {
                    windows[url].close();
                    windows[url] = null;
                }
            }
        }

        return next(action);
    }
);

您不必以这种方式实现它，但是我已经实现了它，这样，当WebChat收到名为 open 的事件活动时，它将打开一个窗口，并在其收到名为关闭，它将关闭一个窗口。它甚至可以跟踪多个窗口，因此您可以选择关闭哪个窗口。

我设置了一个当用户键入“ open [url]”或“ close [url]”时发送打开和关闭事件的机器人。机器人代码如下：

var connector = new ConnectorClient(new Uri(activity.ServiceUrl));

var text = activity.Text;
var words = text.Split(new[] {' '}, StringSplitOptions.RemoveEmptyEntries);
var firstWord = words.FirstOrDefault().ToLower();
var secondWord = words.Length > 1 ? words[1] : "https://stackoverflow.com/";
Activity reply = null;

switch (firstWord)
{
    case "open":
    case "close":
        reply = activity.CreateReply();
        reply.Type = ActivityTypes.Event;
        reply.Name = firstWord;
        reply.Value = secondWord;
        break;
    default:
        reply = activity.CreateReply("Try \"open ...\" or \"close ...\"");
        break;
}

await connector.Conversations.SendToConversationAsync(reply);

希望您可以使用此信息并对其进行修改以适合您的需求。

点击打开浏览器窗口

1 个答案: