Usar o Web Chat com a extensão do Serviço de Aplicativo de Linha Direta

Artigo
10/24/2023

A partir de 1º de setembro de 2023, é altamente recomendável empregar o método de Etiqueta de Serviço do Azure para isolamento de rede. A utilização do DL-ASE deve ser limitada a cenários altamente específicos. Antes de implementar esta solução em um ambiente de produção, recomendamos consultar sua equipe de suporte para obter orientação.

APLICA-SE A: SDK v4

Este artigo descreve como usar o bate-papo da Web com a extensão Direct Line App Service. O Web Chat versão 4.9.1 ou posterior é necessário para o suporte nativo à extensão do Serviço de Aplicativo de Linha Direta.

Integrar o cliente de Web Chat

Nota

Os cartões adaptáveis enviados por meio da extensão do Serviço de Aplicativo de Linha Direta não passam pelo mesmo processamento que os enviados por outras versões do canal de Linha Direta. Devido a isso, a representação JSON do Cartão Adaptável enviado para o Web Chat a partir da extensão do Serviço de Aplicativo de Linha Direta não terá valores padrão adicionados pelo canal se os campos forem omitidos pelo bot quando o cartão for criado.

De um modo geral, a abordagem é a mesma de antes. Com a exceção de que na versão 4.9.1 ou posterior do Web Chat há suporte interno para estabelecer um WebSocket bidirecional. Isso permite que o Web Chat se conecte diretamente à extensão do Serviço de Aplicativo de Linha Direta hospedada com seu bot em vez de se conectar ao https://directline.botframework.com/. A URL da Linha Direta para seu bot será https://<your_app_service>.azurewebsites.net/.bot/, o ponto de extremidade da Linha Direta na extensão de serviço do aplicativo. Se você configurar seu próprio nome de domínio ou se seu bot estiver hospedado em uma nuvem soberana do Azure, substitua a URL apropriada e acrescente o /.bot/ caminho para acessar as APIs REST da extensão do Serviço de Aplicativo de Linha Direta.

Troque o segredo por um token seguindo as instruções no artigo Autenticação . Em vez de obter um token no https://directline.botframework.com/v3/directline/tokens/generate, você gerará o token diretamente da extensão do Serviço de Aplicativo de Linha Direta em https://<your_app_service>.azurewebsites.net/.bot/v3/directline/tokens/generate.

Para obter um exemplo que mostra como buscar um token, consulte Exemplos de bate-papo na Web.

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

Gorjeta

Na implementação do bot JavaScript, verifique se os WebSockets estão habilitados no arquivo web.config , conforme mostrado abaixo.

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

Usar o Web Chat com a extensão do Serviço de Aplicativo de Linha Direta

Integrar o cliente de Web Chat

Recursos adicionais