Sdílet prostřednictvím

přehled Webový chat

  • Článek

PLATÍ PRO: SDK v4

Tento článek obsahuje podrobnosti o komponentě bot Framework Webový chat. Komponenta Webový chat Bot Framework je vysoce přizpůsobitelný webový klient pro sadu SDK služby Bot Framework verze 4. Sada SDK služby Bot Framework v4 umožňuje vývojářům modelovat konverzaci a vytvářet sofistikované aplikace robotů.

Pokud chcete migrovat z Webový chat v3 na v4, přejděte k části migrace.

Začínáme s Webový chat

Poznámka:

Předchozí verze Webový chat (v3) najdete ve větvi Webový chat v3.

Nejprve vytvořte robota pomocí služby Azure AI Bot Service. Po vytvoření robota budete muset získat tajný kód Webový chat robota na webu Azure Portal. Pak pomocí tajného kódu vygenerujte token a předejte ho Webový chat.

Následující příklad ukazuje, jak přidat ovládací prvek Webový chat na web.

<!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, , localeusername, botAvatarInitialsa userAvatarInitials jsou všechny volitelné parametry, které se mají předat do renderWebChat metody. Další informace o stylu naleznete v tématu Proč styleOptions?. Další informace o Webový chat vlastnostech najdete v části referenční informace k Webový chat rozhraní API.

Pokud je váš robot regionálním robotem (to znamená, že váš prostředek robota je v jiné oblasti než globální), musíte zadat místní adresu URL přímé linky tak, že ji v metodě nastavíte do window.WebChat.createDirectLine() dalšího domain pole. Zadejte doménu jako europe.webchat.botframework.comdoménu nebo unitedstates.webchat.botframework.com india.webchat.botframework.compodle toho, která z nich je vhodná pro vaši zvolenou oblast. Read Answering Europe's Call: Storing and Processing EU Data in the EU for information about data residency.

Integrace s JavaScriptem

Webový chat je navržená tak, aby se integrovala s existujícím webem pomocí JavaScriptu nebo Reactu. Integrace s JavaScriptem vám poskytne určitý styl a přizpůsobitelnost, další informace najdete v tématu Integrace Webový chat do vašeho webu.

Můžete použít úplný, typický botframework-webchat balíček, který obsahuje nejčastěji používané funkce.

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

Podívejte se na funkční ukázku úplného Webový chat sady.

Integrace s Reactem

Pro úplné přizpůsobení můžete použít React k opětovnému sestavení komponent Webový chat.

Pokud chcete nainstalovat produkční build z npm, spusťte npm install botframework-webchatpříkaz .

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
    );
  }
}

Můžete také spustit npm install botframework-webchat@master instalaci vývojového buildu, který se synchronizuje s větví GitHubu master Webový chat.

Podívejte se na funkční ukázku Webový chat vykreslených prostřednictvím Reactu.

Tip

Pokud s Reactem a jsx začínáte, najdete školení na stránce Začínáme s Reacts.

Přizpůsobení uživatelského rozhraní Webový chat

Webový chat je navržený tak, aby byl přizpůsobitelný bez forku zdrojového kódu. Následující tabulka popisuje, jakého druhu přizpůsobení můžete dosáhnout při importu Webový chat různými způsoby. Tento seznam není vyčerpávající.

Vlastní nastavení Sada CDN React
Změna barev ✔️ ✔️
Změna velikostí ✔️ ✔️
Aktualizace nebo nahrazení stylů CSS ✔️ ✔️
Naslouchání událostem ✔️ ✔️
Interakce s webovou stránkou hostování ✔️ ✔️
Vlastní aktivity vykreslování ✔️
Vlastní přílohy vykreslování ✔️
Přidání nových komponent uživatelského rozhraní ✔️
Překompisování celého uživatelského rozhraní ✔️

Další informace o přizpůsobení Webový chat najdete v tématu přizpůsobení.

Poznámka:

Informace o sítích pro doručování obsahu (CDN) najdete v tématu Sítě pro doručování obsahu (CDN)

Migrace z Webový chat v3 na v4

Existují tři možné cesty, které migrace může při migraci z v3 na v4 trvat. Porovnejte počáteční scénář s následujícím scénářem.

  • Pokud chcete upgradovat ovládací prvek Webový chat vložený do Webový chat <iframe>balíčku pro vložení, přečtěte si dokumentaci v úložišti Webový chat.
  • Pokud chcete upgradovat ovládací prvek Webový chat, který nepoužívá žádné přizpůsobení, projděte si ukázku Webový chat 00.migration/a.v3-to-v4, která popisuje proces.
  • Pokud chcete upgradovat forkovanou verzi vysoce přizpůsobeného Webový chat, přečtěte si pokyny k migraci Webový chat.

Referenční informace k rozhraní API Webový chat

Existuje několik vlastností, které můžete předat do Webový chat React Component (<ReactWebChat>) nebo renderWebChat() metody. Stručný popis dostupných vlastností najdete v tématu Webový chat reference k rozhraní API. Nebojte se také prozkoumat zdrojový kód začínající .packages/component/src/Composer.js

Kompatibilita s prohlížeči

Webový chat podporuje nejnovější 2 verze moderních prohlížečů, jako je Chrome, Edge a FireFox. Pokud potřebujete Webový chat v Internet Exploreru 11, přečtěte si sadu ES5 a ukázku.

  • Webový chat nepodporuje Internet Explorer starší než verze 11.
  • Přizpůsobení, jak je znázorněno v ukázkách jiných než ES5, se pro Internet Explorer nepodporuje. Vzhledem k tomu, že IE11 je nemodární prohlížeč, nepodporuje ES6 a mnoho ukázek, které používají funkce se šipkami a moderní přísliby, by bylo nutné ručně převést na ES5. Pokud potřebujete velké přizpůsobení aplikace, důrazně doporučujeme vyvíjet aplikaci pro moderní prohlížeč, jako je Google Chrome nebo Edge.
  • Webový chat nemá žádný plán podporovat vzorky pro IE11 (ES5).
  • Zákazníkům, kteří chtějí ručně přepsat naše další ukázky pro práci v IE11, doporučujeme podívat se na převod kódu z ES6+ na ES5 pomocí polyfillů a transpilátorů, jako je babel.

Testování pomocí nejnovějších bitů Webový chat

Testování neuvolněných funkcí je v tuto chvíli dostupné pouze prostřednictvím balení MyGet.

Pokud chcete otestovat funkci nebo opravu chyb, která ještě nebyla vydána, budete chtít nasměrovat balíček Webový chat na denní informační kanál Webový chat, na rozdíl od oficiálního informačního kanálu npmjs.

V současné době můžete získat přístup k dailies Webový chat přihlášením k odběru našeho informačního kanálu MyGet. K tomu budete muset v projektu aktualizovat registr. Tato změna je nevratná a naše pokyny zahrnují, jak se vrátit k odběru oficiální verze.

Přihlášení k odběru nejnovějších bitů na myget.org

Uděláte to tak, že přidáte balíčky a pak změníte registr projektu.

  1. Přidejte jiné závislosti projektu než Webový chat.
  2. V kořenovém .npmrc adresáři projektu vytvořte soubor.
  3. Do souboru přidejte následující řádek: registry=https://botbuilder.myget.org/F/botframework-webchat/npm/
  4. Přidání Webový chat do závislostí projektunpm i botframework-webchat --save
  5. Ve vašem package-lock.jsonregistru jsou nyní MyGet. Projekt Webový chat má povolený nadřazený zdrojový proxy server, který přesměruje balíčky jiného typu než MyGet do npmjs.com.

Opětovné přihlášení k oficiálnímu vydání npmjs.com

Opětovné přihlášení k odběru vyžaduje resetování registru.

  1. Odstranění .npmrc file
  2. Odstranění kořenového adresáře package-lock.json
  3. node_modules Odebrání adresáře
  4. Přeinstalujte balíčky pomocí npm i
  5. Ve vaší package-lock.json, registry ukazují na https://npmjs.com/ znovu.

Přispívající

Podrobnosti o tom, jak sestavit projekt a pokyny pro žádosti o přijetí změn v úložišti, najdete na naší stránce přispívání.

Tento projekt se řídí Pravidly chování pro Microsoft Open Source. Další informace najdete v nejčastějších dotazech k pravidlům chování. S případnými dalšími dotazy nebo připomínkami se obraťte na adresu opencode@microsoft.com.

Hlášení problémů se zabezpečením

Problémy se zabezpečením a chyby by se měly hlásit soukromě prostřednictvím e-mailu do centra Microsoft Security Response Center (MSRC) na adrese secure@microsoft.com. Odpověď byste měli obdržet do 24 hodin. Pokud z nějakého důvodu ne, pokračujte e-mailem a ujistěte se, že jsme dostali vaši původní zprávu. Další informace, včetně klíče PGP MSRC, najdete na webu Security TechCenter.