Web Sohbeti genel bakış

  • Makale

ŞUNLAR IÇIN GEÇERLIDIR: SDK v4

Bu makale, Bot Framework Web Sohbeti bileşeninin ayrıntılarını içerir. Bot Framework Web Sohbeti bileşeni, Bot Framework V4 SDK'sı için yüksek oranda özelleştirilebilir bir web tabanlı istemcidir. Bot Framework SDK v4, geliştiricilerin konuşmayı modellemesine ve gelişmiş bot uygulamaları oluşturmasına olanak tanır.

Web Sohbeti v3'ten v4'e geçiş yapmak istiyorsanız geçiş bölümüne atlayın.

Web Sohbeti kullanmaya başlama

Not

önceki Web Sohbeti (v3) sürümleri için Web Sohbeti v3 dalını ziyaret edin.

İlk olarak Azure AI Bot Hizmeti kullanarak bir bot oluşturun. Bot oluşturulduktan sonra Azure portalında bot Web Sohbeti gizli dizisini edinmeniz gerekir. Ardından gizli diziyi kullanarak bir belirteç oluşturun ve Web Sohbeti iletin.

Aşağıdaki örnekte web sitesine Web Sohbeti denetimi ekleme gösterilmektedir.

<!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, botAvatarInitialsve userAvatarInitials tüm isteğe bağlı parametreleri yöntemine geçirmek renderWebChat için. Stil hakkında daha fazla bilgi için bkz . Neden styleOptions?. Web Sohbeti özellikleri hakkında daha fazla bilgi edinmek için Web Sohbeti API Başvurusu bölümüne bakın.

Ayrıca, botunuz bölgesel bir botsa (bot kaynağınız "genel" dışında bir bölgedeyse), bunu yöntemdeki ek domain bir alanda ayarlayarak bölgesel doğrudan çizgi URL'sini window.WebChat.createDirectLine() belirtmeniz gerekir. Etki alanını, seçtiğiniz bölge için uygun olan veya olarak europe.webchat.botframework.comunitedstates.webchat.botframework.comindia.webchat.botframework.combelirtin. Veri yerleşimi hakkında bilgi için Avrupa'nın Çağrısını Yanıtlama: AB Verilerini AB'de Depolama ve İşleme bölümüne bakın.

JavaScript ile tümleştirme

Web Sohbeti, JavaScript veya React kullanarak mevcut web sitenizle tümleştirmek için tasarlanmıştır. JavaScript ile tümleştirme size stil ve özelleştirilebilirlik sağlar. Daha fazla bilgi için bkz. Web Sohbeti web sitenizle tümleştirme.

En sık kullanılan özellikleri içeren tam ve tipik botframework-webchat paketi kullanabilirsiniz.

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

Tam Web Sohbeti paketinin çalışma örneğine bakın.

React ile tümleştirme

Tam özelleştirilebilirlik için React'i kullanarak Web Sohbeti bileşenlerini yeniden derleyebilirsiniz.

Npm'den üretim derlemesini yüklemek için komutunu çalıştırın 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
    );
  }
}

Web Sohbeti GitHub master dalı ile eşitlenmiş bir geliştirme derlemesi yüklemek için de komutunu çalıştırabilirsiniznpm install botframework-webchat@master.

React aracılığıyla işlenen Web Sohbeti çalışma örneğine bakın.

İpucu

React ve jsx kullanmaya yeni başladıysanız Reacts Başlarken sayfasında eğitim bulabilirsiniz.

Web Sohbeti kullanıcı arabirimini özelleştirme

Web Sohbeti, kaynak kodu çatallamadan özelleştirilebilir olacak şekilde tasarlanmıştır. Aşağıdaki tabloda, Web Sohbeti farklı şekillerde içeri aktarırken ne tür özelleştirmeler yapabileceğiniz özetlenmiştir. Bu liste kapsamlı değil.

Özelleştirme CDN paketi React
Renkleri değiştirme ✔️ ✔️
Boyutları değiştirme ✔️ ✔️
CSS stillerini güncelleştirme/değiştirme ✔️ ✔️
Olayları dinleme ✔️ ✔️
Barındırma web sayfasıyla etkileşim kurma ✔️ ✔️
Özel işleme etkinlikleri ✔️
Özel işleme ekleri ✔️
Yeni kullanıcı arabirimi bileşenleri ekleme ✔️
Tüm kullanıcı arabirimini yeniden derleme ✔️

Özelleştirme hakkında daha fazla bilgi edinmek için Web Sohbeti özelleştirme hakkında daha fazla bilgi edinin.

Not

Content Delivery Networks (CDN) hakkında bilgi için bkz. İçerik teslim ağları (CDN'ler)

Web Sohbeti v3'ten v4'e geçiş

v3'ten v4'e geçiş yaparken geçişin izleyebilecekleri üç olası yol vardır. Başlangıç senaryonuzu aşağıda listelenen senaryoyla karşılaştırın.

  • içine eklenmiş <iframe>bir Web Sohbeti denetimini yükseltmek için ekleme paketinin Web Sohbeti deposundaki belgelere bakın.
  • Çok az veya hiç özelleştirme içermeyen bir Web Sohbeti denetimini yükseltmek için, işlemi açıklayan Web Sohbeti 00.migration/a.v3-to-v4 örneğini gözden geçirin.
  • Yüksek oranda özelleştirilmiş bir Web Sohbeti çatallı sürümünü yükseltmek için Web Sohbeti geçiş kılavuzuna bakın.

Web Sohbeti API Başvurusu

Web Sohbeti React Bileşeninize (<ReactWebChat>) veya renderWebChat() yönteminize geçirebilecek çeşitli özellikler vardır. Kullanılabilir özelliklerin kısa bir açıklaması için bkz. Web Sohbeti API Başvurusu. Ayrıca, ile packages/component/src/Composer.jsbaşlayan kaynak kodunu incelemekte çekinmeyin.

Tarayıcı uyumluluğu

Web Sohbeti Chrome, Edge ve FireFox gibi modern tarayıcıların en son 2 sürümünü destekler. Internet Explorer 11'de Web Sohbeti ihtiyacınız varsa ES5 paketine ve tanıtımına bakın.

  • Web Sohbeti Sürüm 11'den eski Internet Explorer'ı desteklemez
  • ES5 dışı örneklerde gösterildiği gibi özelleştirme Internet Explorer için desteklenmez. IE11 modern olmayan bir tarayıcı olduğundan ES6'yı desteklemez ve ok işlevleri ve modern vaatler kullanan birçok örneğin el ile ES5'e dönüştürülmesi gerekir. Uygulamanız için ağır özelleştirmeye ihtiyacınız varsa, uygulamanızı Google Chrome veya Edge gibi modern bir tarayıcı için geliştirmenizi kesinlikle öneririz.
  • Web Sohbeti IE11 (ES5) örneklerini desteklemeye yönelik bir planı yoktur.
  • Diğer örneklerimizi IE11'de çalışmak üzere el ile yeniden yazmak isteyen müşteriler için, gibi babelpolifill'leri ve çeviricileri kullanarak kodu ES6+'dan ES5'e dönüştürmeye bakmanızı öneririz.

Web Sohbeti'nin en son bitleriyle test etme

Yayınlanmamış özellikleri test etme işlemi şu anda yalnızca MyGet paketlemesi aracılığıyla kullanılabilir.

Henüz yayımlanmamış bir özelliği veya hata düzeltmesini test etmek istiyorsanız, resmi npmjs akışının aksine Web Sohbeti paketinizi Web Sohbeti günlük akışına yönlendirmek istersiniz.

Şu anda MyGet akışımıza abone olarak Web Sohbeti sıkıntılarına erişebilirsiniz. Bunu yapmak için projenizdeki kayıt defterini güncelleştirmeniz gerekir. Bu değişiklik geri döndürülebilir ve yönergelerimiz resmi sürüme aboneliğe nasıl geri dönüleceğini içerir.

En son bitlere abone olma myget.org

Bunu yapmak için paketlerinizi ekleyebilir ve ardından projenizin kayıt defterini değiştirebilirsiniz.

  1. proje bağımlılıklarınızı Web Sohbeti dışında ekleyin.
  2. Projenizin kök dizininde bir .npmrc dosya oluşturun
  3. Dosyanıza aşağıdaki satırı ekleyin: registry=https://botbuilder.myget.org/F/botframework-webchat/npm/
  4. Proje bağımlılıklarınıza Web Sohbeti eklemenpm i botframework-webchat --save
  5. 'nizde package-lock.json, işaret edilen kayıt defterleri artık MyGet'tır. Web Sohbeti projesinde, MyGet olmayan paketleri npmjs.comöğesine yönlendiren yukarı akış kaynak proxy'si etkindir.

Resmi sürüme yeniden abone ol npmjs.com

Yeniden abonelik için kayıt defterinizi sıfırlamanız gerekir.

  1. Sildiğiniz .npmrc file
  2. Kökünüzü silme package-lock.json
  3. Dizininizi node_modules kaldırma
  4. Paketlerinizi şu şekilde yeniden yükleyin: npm i
  5. içinde package-lock.jsonkayıt defterleri yeniden işaret ediyor https://npmjs.com/ .

Katkıda

Projenin nasıl derlenmesiyle ilgili ayrıntılar için Katkıda Bulunma sayfamıza ve Çekme İstekleri için depo yönergelerimize bakın.

Bu projede Microsoft Açık Kaynak Kullanım Şartları kabul edilmiştir. Daha fazla bilgi için Code of Conduct FAQ (Kullanım Kuralları Hakkında SSS) konusuna bakın veya sorularınızı ya da görüşlerinizi bildirmek için opencode@microsoft.com adresinden bize ulaşın.

Güvenlik Sorunlarını Bildirme

Güvenlik sorunları ve hataları, adresinden Microsoft Güvenlik Yanıt Merkezi'ne (MSRC) secure@microsoft.come-posta yoluyla özel olarak bildirilmelidir. Size 24 saat içerisinde yanıt verilecektir. Bazı nedenlerden dolayı bunu kullanmıyorsanız, özgün iletinizi aldığımızdan emin olmak için e-posta yoluyla takip edin. MSRC PGP anahtarı da dahil olmak üzere daha fazla bilgi Security TechCenter'nde bulunabilir.