Uso de chat web con la extensión de servicio de aplicaciones de línea directaUse Web Chat with the direct line app service extension

se aplica a: SDK V4APPLIES TO: SDK v4

En este artículo se describe cómo usar Chat en web con la Direct Line app service.This article describes how to use Web Chat with the Direct Line app service extension. Chat en web versión 4.9.1 o posterior es necesaria para la compatibilidad Direct Line extensión de App Service nativa.Web Chat version 4.9.1 or later is required for native Direct Line app service extension support.

Integración Chat en web clienteIntegrate Web Chat client

Nota

Tarjetas adaptables se envían a través de la extensión Direct Line App Service no se someten al mismo procesamiento que los enviados a través de otras versiones del Direct Line canal.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. Debido a esto, la representación JSON de la tarjeta adaptable enviada a Chat en web desde la extensión Direct Line App Service no tendrá valores predeterminados agregados por el canal si el bot omite los campos cuando se crea la tarjeta.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.

En términos generales, el enfoque es el mismo que antes.Generally speaking, the approach is the same as before. Con la excepción de que en la versión 4.9.1 o posterior de Chat en web hay compatibilidad integrada para establecer un WebSocket de dos vías, que en lugar de conectarse a se conecta directamente a la extensión de app service de https://directline.botframework.com/ Direct Line hospedada con el bot.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. La Direct Line url del bot será , el punto https://<your_app_service>.azurewebsites.net/.bot/ de conexión Direct Line en la extensión de App Service.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. Si configura su propio nombre de dominio o el bot se hospeda en una nube de Azure soberana, sustituya en la dirección URL adecuada y anexe la ruta de acceso para acceder a las API REST de la extensión de app service de /.bot/ Direct Line.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. Intercambie el secreto por un token según las instrucciones del artículo Autenticación.Exchange the secret for a token by following the instructions in the Authentication article. En lugar de obtener un token en , generará el token directamente desde la https://directline.botframework.com/v3/directline/tokens/generate extensión Direct Line App Service en 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. Para obtener un ejemplo que muestra cómo capturar un token, consulte Chat en web Ejemplos.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>
    

    Sugerencia

    En la implementación del bot de JavaScript, asegúrese de que WebSockets está habilitado en el archivo web.config, como se muestra a continuación.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>