Używanie czat internetowy z rozszerzeniem usługi App Service direct line

Artykuł
10/24/2023

Od 1 września 2023 r. zdecydowanie zaleca się zastosowanie metody tagu usługi Platformy Azure na potrzeby izolacji sieci. Wykorzystanie biblioteki DL-ASE powinno być ograniczone do wysoce specyficznych scenariuszy. Przed wdrożeniem tego rozwiązania w środowisku produkcyjnym zalecamy skonsultowanie się z zespołem pomocy technicznej w celu uzyskania wskazówek.

DOTYCZY: ZESTAW SDK w wersji 4

W tym artykule opisano sposób używania czat internetowy z rozszerzeniem usługi App Service direct line. czat internetowy w wersji 4.9.1 lub nowszej jest wymagany do natywnej obsługi rozszerzeń usługi App Service w trybie Direct Line.

Integrowanie klienta czat internetowy

Uwaga

Karty adaptacyjne wysyłane za pośrednictwem rozszerzenia usługi App Service direct line nie przechodzą tego samego przetwarzania co karty wysyłane za pośrednictwem innych wersji kanału Direct Line. W związku z tym reprezentacja JSON karty adaptacyjnej wysłanej do czat internetowy z rozszerzenia usługi App Service direct line nie będzie miała wartości domyślnych dodanych przez kanał, jeśli pola zostaną pominięte przez bota podczas tworzenia karty.

Ogólnie rzecz biorąc, podejście jest takie samo jak wcześniej. Z wyjątkiem, że w wersji 4.9.1 lub nowszej czat internetowy istnieje wbudowana obsługa ustanawiania dwukierunkowego protokołu WebSocket. Dzięki temu czat internetowy nawiązać bezpośrednie połączenie z rozszerzeniem usługi App Service direct line hostowanym za pomocą bota zamiast nawiązywać https://directline.botframework.com/połączenie z usługą . Adres URL wiersza bezpośredniego bota to https://<your_app_service>.azurewebsites.net/.bot/punkt końcowy linii bezpośredniej w rozszerzeniu usługi aplikacji. Jeśli skonfigurujesz własną nazwę domeny lub bot jest hostowany w suwerennej chmurze platformy Azure, zastąp odpowiedni adres URL i dołącz ścieżkę /.bot/ , aby uzyskać dostęp do interfejsów API REST rozszerzenia usługi App Service direct line.

Aby wymienić wpis tajny dla tokenu, wykonaj instrukcje opisane w artykule Uwierzytelnianie . Zamiast uzyskiwać token w witrynie https://directline.botframework.com/v3/directline/tokens/generate, wygenerujesz token bezpośrednio z rozszerzenia usługi App Service direct line pod adresem https://<your_app_service>.azurewebsites.net/.bot/v3/directline/tokens/generate.

Przykład pokazujący, jak pobrać token, zobacz przykłady czat internetowy.

<!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.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: You should replace the below fetch with a call to your own token service as described in step 2 above, 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>"
            },
            "body": "{'user': {'id': 'my_test_id', 'name': 'my_test_name'}}"
          }
        );
        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>

Napiwek

W implementacji bota JavaScript upewnij się, że zestawy WebSocket są włączone w pliku web.config , jak pokazano poniżej.

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

Udostępnij za pośrednictwem

Używanie czat internetowy z rozszerzeniem usługi App Service direct line

Integrowanie klienta czat internetowy

Dodatkowe zasoby