Verwenden von Web Chat mit der App Service-Erweiterung für Direct LineUse Web Chat with the direct line app service extension

gilt für: SDK v4APPLIES TO: SDK v4

In diesem Artikel wird beschrieben, wie Sie Webchat mit der Direct Line App Service-Erweiterung verwenden.This article describes how to use Web Chat with the Direct Line app service extension. Webchat Version 4.9.1 oder höher ist für die Unterstützung nativer Direct Line App Service-Erweiterung erforderlich.Web Chat version 4.9.1 or later is required for native Direct Line app service extension support.

Integrieren des Web Chat-ClientsIntegrate Web Chat client

Hinweis

Für adaptive Karten, die über die App Service-Erweiterung für Direct Line gesendet werden, wird nicht die gleiche Verarbeitung wie für andere Karten genutzt, die mit anderen Versionen des Direct Line-Kanals gesendet werden.Adaptive Cards sent through the Direct Line App Service Extension do not undergo the same processing as those sent through other versions of the Direct Line channel. Daher verfügt die JSON-Darstellung der adaptiven Karte, die über die App Service-Erweiterung für Direct Line an den Web Chat gesendet wird, nicht über vom Kanal hinzugefügte Standardwerte, falls die Felder vom Bot beim Erstellen der Karte weggelassen werden.Due to this the JSON representation of the Adaptive Card sent to Web Chat from the Direct Line App Service Extension will not have default values added by the channel if the fields are omitted by the bot when the card is created.

Der Ansatz ist grundsätzlich der gleiche wie zuvor.Generally speaking, the approach is the same as before. Mit der Ausnahme, dass es in Version 4.9.1 oder höher von Webchat integrierte Unterstützung für die Einrichtung eines zweigezappten WebSockets gibt, das anstelle einer Verbindung mit direkt mit der Direct Line-App Service-Erweiterung verbunden wird, die mit Ihrem Bot https://directline.botframework.com/ gehostet wird.With the exception that in version 4.9.1 or later of Web Chat there is built-in support for establishing a two-way WebSocket, which instead of connecting to https://directline.botframework.com/ connects directly to the Direct Line app service extension hosted with your bot. Die Direct Line-URL für Ihren Bot ist https://<your_app_service>.azurewebsites.net/.bot/ , der Direct Line-Endpunkt in Ihrer App Service-Erweiterung.The Direct Line URL for your bot will be https://<your_app_service>.azurewebsites.net/.bot/, the Direct Line endpoint on your app service extension. Wenn Sie Ihren eigenen Domänennamen konfigurieren oder Ihr Bot in einer unabhängigen Azure-Cloud gehostet wird, ersetzen Sie die entsprechende URL, und fügen Sie den Pfad für den Zugriff auf die /.bot/ REST-APIs der Direct Line-App Service-Erweiterung an.If you configure your own domain name, or your bot is hosted in a sovereign Azure cloud, substitute in the appropriate URL and append the /.bot/ path to access the Direct Line app service extension's REST APIs.

  1. Gehen Sie wie im Artikel zur Authentifizierung beschrieben vor, um das Geheimnis durch ein Token zu ersetzen.Exchange the secret for a token by following the instructions in the Authentication article. Anstatt ein Token unter abzurufen, generieren Sie das Token direkt aus Ihrer https://directline.botframework.com/v3/directline/tokens/generate Direct Line App Service-Erweiterung unter https://<your_app_service>.azurewebsites.net/.bot/v3/directline/tokens/generate .Instead of obtaining a token at https://directline.botframework.com/v3/directline/tokens/generate, you will generate the token directly from your Direct Line App Service Extension at https://<your_app_service>.azurewebsites.net/.bot/v3/directline/tokens/generate.

  2. Ein Beispiel, das zeigt, wie ein Token abgerufen wird, finden Sie unter Webchat Beispiele.For an example that shows how to fetch a token see Web Chat Samples.

    <!DOCTYPE html>
    <html lang="en-US">
      <head>
        <title>Web Chat</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <script
          crossorigin="anonymous"
          src="https://cdn.botframework.com/botframework-webchat/latest/webchat-minimal.js"
        ></script>
        <style>
          html,
          body {
            background-color: #f7f7f7;
            height: 100%;
          }
    
          body {
            margin: 0;
          }
    
          #webchat {
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
            height: 100%;
            margin: auto;
            max-width: 480px;
            min-width: 360px;
          }
        </style>
      </head>
      <body>
        <div id="webchat" role="main"></div>
        <script>
          (async function() {
            <!-- NOTE: It is highly recommended to replace the below fetch with a call to your own token service as described in step 2 above, and to avoid exposing your channel secret in client side code. -->
            const res = await fetch('https://<your_app_service>.azurewebsites.net/.bot/v3/directline/tokens/generate', { method: 'POST', headers:{'Authorization':'Bearer ' + '<Your Bot's Direct Line channel secret>'}});
            const { token } = await res.json();
    
            window.WebChat.renderWebChat(
              {
                directLine: await window.WebChat.createDirectLineAppServiceExtension({
                  domain: 'https://<your_app_service>.azurewebsites.net/.bot/v3/directline',
                  token
                })
              },
              document.getElementById('webchat')
            );
    
            document.querySelector('#webchat > *').focus();
          })().catch(err => console.error(err));
        </script>
      </body>
    </html>
    

    Tipp

    Stellen Sie in der JavaScript-Botimplementierung sicher, dass WebSockets in derweb.configaktiviert sind, wie unten gezeigt.In the JavaScript bot implementation, make sure that WebSockets are enabled in the web.config file, as shown below.

    <configuration>
        <system.webServer>
            <webSocket enabled="true"/>
            ...
        </system.webServer>
    </configuration>