Udostępnij za pośrednictwem

omówienie czat internetowy

  • Artykuł

DOTYCZY: ZESTAW SDK w wersji 4

Ten artykuł zawiera szczegółowe informacje o składniku bot framework czat internetowy. Składnik bot framework czat internetowy to wysoce dostosowywalny klient internetowy dla zestawu SDK platformy Bot Framework w wersji 4. Zestaw Bot Framework SDK w wersji 4 umożliwia deweloperom modelowanie konwersacji i tworzenie zaawansowanych aplikacji botów.

Jeśli chcesz przeprowadzić migrację z wersji 3 czat internetowy do wersji 4, przejdź do sekcji migracji.

Wprowadzenie do czat internetowy

Uwaga

W przypadku poprzednich wersji czat internetowy (wersja 3) odwiedź gałąź czat internetowy w wersji 3.

Najpierw utwórz bota przy użyciu usługi Azure AI Bot Service. Po utworzeniu bota należy uzyskać wpis tajny czat internetowy bota w witrynie Azure Portal. Następnie użyj wpisu tajnego, aby wygenerować token i przekazać go do czat internetowy.

W poniższym przykładzie pokazano, jak dodać kontrolkę czat internetowy do witryny internetowej.

<!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, botAvatarInitialslocale, i userAvatarInitials są parametrami opcjonalnymi, które mają być przekazywane do renderWebChat metody . Aby uzyskać więcej informacji na temat stylu, zobacz Dlaczego styleOptions?. Aby dowiedzieć się więcej o właściwościach czat internetowy, zapoznaj się z sekcją czat internetowy API Reference (Dokumentacja interfejsu API czat internetowy).

Ponadto jeśli bot jest botem regionalnym (co oznacza, że zasób bota znajduje się w regionie innym niż "globalny"), musisz określić regionalny adres URL wiersza bezpośredniego, ustawiając go w dodatkowym domain polu w metodzie window.WebChat.createDirectLine() . Określ domenę jako europe.webchat.botframework.com, unitedstates.webchat.botframework.com lub india.webchat.botframework.com, w zależności od tego, która jest odpowiednia dla wybranego regionu. Przeczytaj Artykuł Answering Europe's Call: Przechowywanie i przetwarzanie danych UE w UE , aby uzyskać informacje na temat rezydencji danych.

Integracja z językiem JavaScript

czat internetowy jest przeznaczony do integracji z istniejącą witryną internetową przy użyciu języka JavaScript lub React. Integracja z językiem JavaScript zapewnia pewne style i możliwości dostosowywania, aby uzyskać więcej informacji, zobacz Integrowanie czat internetowy z witryną internetową.

Możesz użyć pełnego, typowego botframework-webchat pakietu zawierającego najczęściej używane funkcje.

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

Zobacz przykład roboczy pełnego pakietu czat internetowy.

Integracja z platformą React

Aby zapewnić pełną możliwość dostosowywania, możesz użyć platformy React do ponownego skompilowania składników czat internetowy.

Aby zainstalować kompilację produkcyjną z poziomu narzędzia npm, uruchom polecenie 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
    );
  }
}

Można również uruchomić polecenie npm install botframework-webchat@master , aby zainstalować kompilację programową zsynchronizowaną z gałęzią GitHub master czat internetowy.

Zobacz działającą próbkę czat internetowy renderowanych za pośrednictwem platformy React.

Napiwek

Jeśli dopiero zaczynasz pracę z platformą React i jsx, możesz znaleźć szkolenie na stronie Wprowadzenie do platformy Reacts.

Dostosowywanie interfejsu użytkownika czat internetowy

czat internetowy jest przeznaczony do dostosowywania bez rozwidle kodu źródłowego. W poniższej tabeli opisano, jakie dostosowania można osiągnąć podczas importowania czat internetowy na różne sposoby. Ta lista nie jest wyczerpująca.

Dostosowanie Pakiet CDN React
Zmienianie kolorów ✔️ ✔️
Zmienianie rozmiarów ✔️ ✔️
Aktualizowanie/zastępowanie stylów CSS ✔️ ✔️
Nasłuchiwanie zdarzeń ✔️ ✔️
Interakcja z hostem strony internetowej ✔️ ✔️
Niestandardowe działania renderowania ✔️
Niestandardowe załączniki renderowania ✔️
Dodawanie nowych składników interfejsu użytkownika ✔️
Ponowne komponowanie całego interfejsu użytkownika ✔️

Zobacz więcej na temat dostosowywania czat internetowy, aby dowiedzieć się więcej na temat dostosowywania.

Uwaga

Aby uzyskać informacje na temat sieci dostarczania zawartości (CDN), zobacz Sieci dostarczania zawartości (CDN)

Migrowanie z czat internetowy w wersji 3 do wersji 4

Podczas migracji z wersji 3 do wersji 4 mogą wystąpić trzy możliwe ścieżki migracji. Porównaj swój początkowy scenariusz z poniższym scenariuszem.

  • Aby uaktualnić kontrolkę czat internetowy osadzoną w elemecie <iframe>, zobacz dokumentację w repozytorium czat internetowy dla pakietu osadzania.
  • Aby uaktualnić kontrolkę czat internetowy, która nie korzysta z niewielkiego dostosowania, zapoznaj się z przykładem czat internetowy 00.migration/a.v3-to-v4, który opisuje proces.
  • Aby uaktualnić rozwidlenie wersji wysoce dostosowanej czat internetowy, zobacz wskazówki dotyczące migracji czat internetowy.

Dokumentacja interfejsu API czat internetowy

Istnieje kilka właściwości, które można przekazać do czat internetowy React Component (<ReactWebChat>) lub renderWebChat() metody . Aby uzyskać krótki opis dostępnych właściwości, zobacz czat internetowy Dokumentacja interfejsu API. Ponadto możesz zapoznać się z kodem źródłowym rozpoczynającym packages/component/src/Composer.jssię od .

Zgodność przeglądarek

czat internetowy obsługuje najnowsze 2 wersje nowoczesnych przeglądarek, takich jak Chrome, Edge i FireFox. Jeśli potrzebujesz czat internetowy w programie Internet Explorer 11, zobacz pakiet ES5 i pokaz.

  • czat internetowy nie obsługuje programu Internet Explorer starszego niż wersja 11
  • Dostosowywanie, jak pokazano w przykładach innych niż ES5, nie jest obsługiwane w programie Internet Explorer. Ponieważ program IE11 jest nie modernną przeglądarką, nie obsługuje wersji ES6, a wiele przykładów korzystających z funkcji strzałek i nowoczesnych obietnic wymaga ręcznej konwersji na ES5. Jeśli potrzebujesz dużego dostosowania aplikacji, zdecydowanie zalecamy opracowanie aplikacji dla nowoczesnej przeglądarki, takiej jak Google Chrome lub Edge.
  • czat internetowy nie ma planu obsługi przykładów dla programu IE11 (ES5).
  • W przypadku klientów, którzy chcą ręcznie przepisać inne próbki do pracy w programie IE11, zalecamy przekonwertowanie kodu z wersji ES6+ na ES5 przy użyciu polifills i transpilatorów, takich jak babel.

Jak przetestować najnowsze bity czat internetowy

Testowanie funkcji nieopublikowanych jest obecnie dostępne tylko za pośrednictwem pakietu MyGet.

Jeśli chcesz przetestować funkcję lub poprawkę błędów, która nie została jeszcze wydana, należy wskazać pakiet czat internetowy do codziennego kanału informacyjnego czat internetowy, w przeciwieństwie do oficjalnego kanału informacyjnego npmjs.

Obecnie możesz uzyskać dostęp do czat internetowy demonów, subskrybując nasz kanał informacyjny MyGet. W tym celu należy zaktualizować rejestr w projekcie. Ta zmiana jest odwracalna, a nasze wskazówki obejmują sposób powrotu do subskrybowania oficjalnego wydania.

Subskrybowanie najnowszych bitów myget.org

W tym celu możesz dodać pakiety, a następnie zmienić rejestr projektu.

  1. Dodaj zależności projektu inne niż czat internetowy.
  2. W katalogu głównym projektu utwórz .npmrc plik
  3. Dodaj następujący wiersz do pliku: registry=https://botbuilder.myget.org/F/botframework-webchat/npm/
  4. Dodawanie czat internetowy do zależności projektunpm i botframework-webchat --save
  5. W systemie package-lock.jsonrejestry wskazywane na to są teraz MyGet. Projekt czat internetowy ma włączony nadrzędny serwer proxy źródła, który przekierowuje pakiety inne niż MyGet do .npmjs.com

Ponowne przypisanie do oficjalnego wydania w dniu npmjs.com

Ponowne subskrybowanie wymaga zresetowania rejestru.

  1. Usuń .npmrc file
  2. Usuwanie katalogu głównego package-lock.json
  3. node_modules Usuwanie katalogu
  4. Ponowne instalowanie pakietów za pomocą polecenia npm i
  5. W systemie package-lock.jsonrejestry wskazują ponownie https://npmjs.com/ .

Przyczyniając się

Zobacz naszą stronę Współtworzenia, aby uzyskać szczegółowe informacje na temat tworzenia projektu i naszych wytycznych dotyczących repozytorium dla żądań ściągnięcia.

W tym projekcie jest używany Kodeks postępowania firmy Microsoft dla oprogramowania typu open source. Aby uzyskać więcej informacji, zobacz Code of Conduct FAQ (Często zadawane pytania dotyczące kodeksu postępowania) lub wyślij wiadomość e-mail na adres opencode@microsoft.com w przypadku jakichkolwiek dodatkowych pytań lub komentarzy.

Zgłaszanie problemów z zabezpieczeniami

Problemy z zabezpieczeniami i błędy powinny być zgłaszane prywatnie za pośrednictwem poczty e-mail do Centrum zabezpieczeń firmy Microsoft (MSRC) pod adresem secure@microsoft.com. Odpowiedź wysyłamy zazwyczaj w ciągu 24 godzin. Jeśli z jakiegoś powodu tego nie zrobisz, wykonaj czynności e-mail, aby upewnić się, że otrzymaliśmy oryginalną wiadomość. Więcej informacji, w tym klucza PGP MSRC, można znaleźć w centrum zabezpieczeń TechCenter.