Megosztás a következőn keresztül:

webchat áttekintése

  • Cikk

A KÖVETKEZŐKRE VONATKOZIK: SDK v4

Ez a cikk a Bot Framework webchat összetevő részleteit tartalmazza. A Bot Framework webchat összetevő egy nagymértékben testreszabható webes ügyfél a Bot Framework V4 SDK-hoz. A Bot Framework SDK v4 lehetővé teszi a fejlesztők számára a beszélgetés modellezését és kifinomult robotalkalmazások létrehozását.

Ha webchat v3-ról v4-re szeretne migrálni, ugorjon a migrálási szakaszra.

Első lépések a webchat

Feljegyzés

A webchat (v3) korábbi verzióihoz látogasson el a webchat v3 ágra.

Először hozzon létre egy robotot az Azure AI Bot Service használatával. A robot létrehozása után be kell szereznie a robot webchat titkos kódját az Azure Portalon. Ezután a titkos kód használatával hozzon létre egy jogkivonatot, és adja át a webchat.

Az alábbi példa bemutatja, hogyan adhat hozzá webchat vezérlőt egy webhelyhez.

<!DOCTYPE html>
<html>
   <body>
      <div id="webchat" role="main"></div>
      <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
      <script>

         // Set style options.
         const styleOptions = {
            botAvatarInitials: 'BF',
            userAvatarInitials: 'WC'
         };

         window.WebChat.renderWebChat(
            {
               directLine: window.WebChat.createDirectLine({
                  token: 'YOUR_DIRECT_LINE_TOKEN'
               }),
               userID: 'YOUR_USER_ID',
               username: 'Web Chat User',
               locale: 'en-US',
               styleOptions
            },
            document.getElementById('webchat')
         );
      </script>
   </body>
</html>

userID, username, locale, botAvatarInitials, és userAvatarInitials az összes választható paramétert át kell adni a renderWebChat metódusnak. A stílussal kapcsolatos további információkért lásd : Miért érdemes a styleOptions?. A webchat tulajdonságairól az webchat API-referencia szakaszban olvashat bővebben.

Ezenkívül ha a robot regionális robot (vagyis a robot erőforrása nem "globális" régióban található), akkor meg kell adnia a közvetlen regionális URL-címet a metódus egy további domain mezőjében window.WebChat.createDirectLine() való beállításával. Adja meg a tartományt a unitedstates.webchat.botframework.com választott régiónak megfelelőként vagy india.webchat.botframework.coma választott régiónak megfelelőkénteurope.webchat.botframework.com. Az eu-s adatok tárolása és feldolgozása az EU-ban című európai felhívásban olvashat az adattárolással kapcsolatos információkért.

Integrálás JavaScripttel

webchat úgy tervezték, hogy integrálható legyen a meglévő webhelyével JavaScript vagy React használatával. A JavaScripttel való integráció némi stílust és testreszabhatóságot biztosít. További információ: Webchat integrálása a webhelyre.

Használhatja a teljes, tipikus botframework-webchat csomagot, amely a leggyakrabban használt funkciókat tartalmazza.

<!DOCTYPE html>
<html>
   <body>
      <div id="webchat" role="main"></div>
      <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
      <script>
         window.WebChat.renderWebChat(
            {
               directLine: window.WebChat.createDirectLine({
                  token: 'YOUR_DIRECT_LINE_TOKEN'
               }),
               userID: 'YOUR_USER_ID'
            },
            document.getElementById('webchat')
         );
      </script>
   </body>
</html>

Tekintse meg a teljes webchat csomag munkamintáját.

Integrálás a Reacttel

A teljes testreszabhatóság érdekében a React használatával újrakomponálni tudja a webchat összetevőit.

Az éles build npm-ből való telepítéséhez futtassa a következőt npm install botframework-webchat: .

import { DirectLine } from 'botframework-directlinejs';
import React from 'react';
import ReactWebChat from 'botframework-webchat';

export default class extends React.Component {
  constructor(props) {
    super(props);

    this.directLine = new DirectLine({ token: 'YOUR_DIRECT_LINE_TOKEN' });
  }

  render() {
    return (
      <ReactWebChat directLine={ this.directLine } userID='YOUR_USER_ID' />
      element
    );
  }
}

A webchat GitHub-ágával master szinkronizált fejlesztői build telepítésére is futtathatónpm install botframework-webchat@master.

Tekintse meg a Reacten keresztül renderelt webchat működő mintáját.

Tipp.

Ha még csak most ismerkedik a React és a jsx szolgáltatásokkal, a Reacts Első lépések oldalán talál betanítást.

Webchat felhasználói felület testreszabása

webchat úgy lett kialakítva, hogy a forráskód elágaztatása nélkül testre szabható legyen. Az alábbi táblázat ismerteti, hogy milyen testreszabásokat érhet el a webchat különböző módokon történő importálása során. Ez a lista nem teljes.

Testreszabás CDN-csomag React
Színek módosítása ✔️ ✔️
Méretek módosítása ✔️ ✔️
CSS-stílusok frissítése/cseréje ✔️ ✔️
Események figyelése ✔️ ✔️
Weblap üzemeltetése ✔️ ✔️
Egyéni renderelési tevékenységek ✔️
Egyéni renderelési mellékletek ✔️
Új felhasználói felületi összetevők hozzáadása ✔️
A teljes felhasználói felület újrafordítása ✔️

A testreszabással kapcsolatos további információkért tekintse meg a webchat testreszabásával kapcsolatos további tudnivalókat.

Feljegyzés

A tartalomkézbesítési hálózatokkal (CDN-ekkel) kapcsolatos információkért lásd: Tartalomkézbesítési hálózatok (CDN-ek)

Migrálás webchat v3-ról v4-re

A migrálásnak három lehetséges útja lehet a 3-ról a v4-re való migráláskor. Hasonlítsa össze az első forgatókönyvet az alábbival.

  • Ha egy webchat vezérlőelemet szeretne frissíteni egy <iframe>beágyazott fájlba, tekintse meg a beágyazási csomag webchat adattárának dokumentációját.
  • Ha olyan webchat vezérlőt szeretne frissíteni, amely alig használ testreszabást, tekintse át a webchat 00.migration/a.v3-to-v4 mintát, amely leírja a folyamatot.
  • A nagymértékben testre szabott webchat elágazott verziójának frissítéséhez tekintse meg a webchat migrálási útmutatóját.

webchat API-referencia

A webchat React-összetevőnek (<ReactWebChat>) vagy a renderWebChat() metódusnak több tulajdonsága is lehet. Az elérhető tulajdonságok rövid leírását webchat API-referencia című témakörben talál. Emellett nyugodtan vizsgálja meg a forráskódot a következővel packages/component/src/Composer.jskezdve: .

Böngészőkompatibilitás

webchat támogatja a modern böngészők legújabb 2 verzióját, például a Chrome-ot, az Edge-t és a FireFoxot. Ha webchat kell az Internet Explorer 11-ben, tekintse meg az ES5 csomagot és a bemutatót.

  • webchat nem támogatja a 11-es verziónál régebbi Internet Explorert
  • Az Internet Explorer nem támogatja a nem ES5-mintákban látható testreszabást. Mivel az IE11 nem modern böngésző, nem támogatja az ES6-ot, és a nyílfüggvényeket és a modern ígéreteket használó számos mintát manuálisan kell ES5-be konvertálni. Ha komoly testreszabásra van szüksége az alkalmazáshoz, határozottan javasoljuk, hogy az alkalmazást egy modern böngészőhöz, például a Google Chrome-hoz vagy az Edge-hez fejlesszük.
  • webchat nem tervezi az IE11 (ES5) mintáinak támogatását.
  • Azoknak az ügyfeleknek, akik manuálisan szeretnék átírni a többi mintáinkat az IE11-ben való működéshez, javasoljuk, hogy az ES6+-ról ES5-re alakítsa át a kódokat olyan polifillek és transzpilátorok használatával, mint a babel.

Tesztelés webchat legújabb bitjeivel

A nem kiadható funkciók tesztelése jelenleg csak MyGet-csomagoláson keresztül érhető el.

Ha olyan funkciót vagy hibajavítást szeretne tesztelni, amely még nem jelent meg, érdemes a webchat csomagját webchat napi hírcsatornájára mutatni, szemben a hivatalos npmjs-hírcsatornával.

Jelenleg a MyGet-hírcsatornára való feliratkozással hozzáférhet webchat démonaihoz. Ehhez frissítenie kell a beállításjegyzéket a projektben. Ez a változás visszafordítható, és az irányaink közé tartozik, hogyan lehet visszaváltani a hivatalos kiadásra való feliratkozásra.

Feliratkozás a legújabb bitekre a következőn: myget.org

Ehhez hozzáadhatja a csomagokat, majd módosíthatja a projekt beállításjegyzékét.

  1. Adja hozzá a projektfüggőségeket a webchat kivételével.
  2. A projekt gyökérkönyvtárában hozzon létre egy .npmrc fájlt
  3. Adja hozzá a következő sort a fájlhoz: registry=https://botbuilder.myget.org/F/botframework-webchat/npm/
  4. Webchat hozzáadása a projektfüggőségekheznpm i botframework-webchat --save
  5. Az Ön package-lock.jsonáltal mutatott regisztrációs adatbázisok most MyGetek. A webchat projektben engedélyezve van a forrásproxy, amely átirányítja a nem MyGet-csomagokat.npmjs.com

A hivatalos kiadás újraküldése a következő napon: npmjs.com

Az újbóli feliratkozáshoz alaphelyzetbe kell állítania a beállításjegyzéket.

  1. Törölje a .npmrc file
  2. A gyökér törlése package-lock.json
  3. A node_modules címtár eltávolítása
  4. Csomagok újratelepítése a npm i
  5. Az Önben package-lock.jsona regisztrációs adatbázisok ismét rámutatnak https://npmjs.com/ .

Hozzájárulás

A projekt elkészítésének módjáról és a lekéréses kérelmekre vonatkozó adattárszabályzatunkról a Hozzájárulás oldalon tájékozódhat.

Ez a projekt a Microsoft nyílt forráskóddal kapcsolatos viselkedési szabályzata alapján működik. További információért tekintse át a viselkedési szabályzat GYIK dokumentumát, illetve további kérdések vagy megjegyzések esetén írjon az opencode@microsoft.com e-mail-címre.

Biztonsági problémák jelentése

A biztonsági problémákat és hibákat privát módon, e-mailben kell jelenteni a Microsoft Security Response Centerbe (MSRC) a következő címen secure@microsoft.com: . 24 órán belül választ kell kapnia. Ha valamilyen okból nem, kövesse e-mailben, hogy biztosan megkapjuk az eredeti üzenetet. További információk, beleértve az MSRC PGP-kulcsot is, a Security TechCenterben találhatók.