Nasıl yapılır: Akıcı Çerçeve hedef kitle özelliklerini kullanma

Bu öğreticide, kapsayıcıya bağlanan kullanıcıların görsel bir gösterimini oluşturmak için React ile Akıcı Çerçeve Hedef Kitlesini kullanmayı öğreneceksiniz. audience nesnesi, kapsayıcıya bağlı tüm kullanıcılarla ilgili bilgileri içerir. Bu örnekte, kapsayıcıyı ve hedef kitleyi oluşturmak için Azure İstemci kitaplığı kullanılacaktır.

Aşağıdaki resimde kimlik düğmeleri ve kapsayıcı kimliği giriş alanı gösterilmektedir. Kapsayıcı kimliği alanını boş bırakıp kullanıcı kimliği düğmesine tıklanması yeni bir kapsayıcı oluşturur ve seçilen kullanıcı olarak katılır. Alternatif olarak, son kullanıcı bir kapsayıcı kimliği girip mevcut bir kapsayıcıyı seçili kullanıcı olarak birleştirmek için bir kullanıcı kimliği seçebilir.

Sonraki görüntüde, kutular tarafından temsil edilen bir kapsayıcıya bağlı birden çok kullanıcı gösterilir. Mavi renkle özetlenen kutu, istemciyi görüntüleyen kullanıcıyı temsil ederken, siyah renkle özetlenen kutular diğer bağlı kullanıcıları temsil eder. Yeni kullanıcılar benzersiz kimliklere sahip kapsayıcıya eklendikçe kutu sayısı artar.

Not

Bu öğreticide, Akıcı Çerçeve Genel Bakış hakkında bilgi sahibi olduğunuz ve Hızlı Başlangıç'ı tamamladığınız varsayılır. Ayrıca React, React projeleri oluşturma ve React Kancaları ile ilgili temel bilgiler hakkında bilgi sahibi olmanız gerekir.

Proje oluşturma

1. Bir Komut İstemi açın ve projeyi oluşturmak istediğiniz üst klasöre gidin; örneğin, C:\My Fluid Projects.

2. İstemde aşağıdaki komutu çalıştırın. (CLI'nın npm değil npx olduğuna dikkat edin. Node.js yüklediğinizde yüklendi.)

   npx create-react-app fluid-audience-tutorial
   

3. Proje adlı fluid-audience-tutorialbir alt klasörde oluşturulur. komutuyla cd fluid-audience-tutorialbu dosyaya gidin.

4. Proje aşağıdaki Akışkan kitaplıklarını kullanır:

   Kitaplık	Açıklama
   fluid-framework	İstemciler arasında verileri eşitleyen SharedMap dağıtılmış veri yapısını içerir.
   @fluidframework/azure-client	Bir Fluid hizmeti sunucusuna bağlantıyı tanımlar ve Fluid kapsayıcısı için başlangıç şemasını tanımlar.
   @fluidframework/test-client-utils	Akıcı Hizmet bağlantısı oluşturmak için gereken InsecureTokenProvider'ı tanımlar.

   Kitaplıkları yüklemek için aşağıdaki komutu çalıştırın.

   npm install @fluidframework/azure-client @fluidframework/test-client-utils fluid-framework
   

Projeyi kodlayın

Durum değişkenlerini ve bileşen görünümünü ayarlama

1. Dosyayı \src\App.js kod düzenleyicisinde açın. Tüm varsayılan import deyimleri silin. Ardından deyimindeki tüm işaretlemeleri return silin. Ardından bileşenler ve React kancaları için içeri aktarma deyimleri ekleyin. sonraki adımlarda içeri aktarılan AudienceDisplay ve UserIdSelection bileşenlerini uygulayacağımızı unutmayın. Dosya aşağıdaki gibi görünmelidir:

       import { useState, useCallback } from "react";
       import { AudienceDisplay } from "./AudienceDisplay";
       import { UserIdSelection } from "./UserIdSelection";
   
       export const App = () => {
       // TODO 1: Define state variables to handle view changes and user input
       return (
       // TODO 2: Return view components
       );
       }
   

2. TODO 1 öğesini aşağıdaki kodla değiştirin. Bu kod, uygulama içinde kullanılacak yerel durum değişkenlerini başlatır. değeri AudienceDisplay displayAudience bileşenini mi yoksa UserIdSelection bileşenini mi işlediğimize karar verir (bkzTODO 2. ). userId değeri ile kapsayıcıya bağlanacak kullanıcı tanımlayıcısı ve containerId yüklenecek kapsayıcı değeridir. handleSelectUser ve handleContainerNotFound işlevleri, iki görünüme geri çağırma olarak geçirilir ve durum geçişlerini yönetir. handleSelectUser bir kapsayıcı oluşturmaya/yüklemeye çalışırken çağrılır. handleContainerNotFound kapsayıcı oluşturma/yükleme başarısız olduğunda çağrılır.

   userId ve containerId değerlerinin işlev aracılığıyla handleSelectUser bir UserIdSelection bileşeninden geleceğini unutmayın.

       const [displayAudience, setDisplayAudience] = useState(false);
       const [userId, setUserId] = useState();
       const [containerId, setContainerId] = useState();
   
       const handleSelectUser = useCallback((userId, containerId) => {
       setDisplayAudience(true)
       setUserId(userId);
       setContainerId(containerId);
       }, [displayAudience, userId, containerId]);
   
       const handleContainerNotFound = useCallback(() => {
       setDisplayAudience(false)
       }, [setDisplayAudience]);
   

3. TODO 2 öğesini aşağıdaki kodla değiştirin. Yukarıda belirtildiği gibi, displayAudience değişken AudienceDisplay bileşenini mi yoksa UserIdSelection bileşenini mi işleyebileceğimizi belirler. Ayrıca, durum değişkenlerini güncelleştirme işlevleri bileşenlere özellik olarak geçirilir.

       (displayAudience) ?
       <AudienceDisplay userId={userId} containerId={containerId} onContainerNotFound={handleContainerNotFound}/> :
       <UserIdSelection onSelectUser={handleSelectUser}/>
   

AudienceDisplay bileşenini ayarlama

1. Kod düzenleyicisinde bir dosya \src\AudienceDisplay.js oluşturun ve açın. Aşağıdaki import deyimlerini ekleyin:

       import { useEffect, useState } from "react";
       import { SharedMap } from "fluid-framework";
       import { AzureClient } from "@fluidframework/azure-client";
       import { InsecureTokenProvider } from "@fluidframework/test-client-utils";
   

   Akıcı Çerçeve kitaplığından içeri aktarılan nesnelerin kullanıcıları ve kapsayıcıları tanımlamak için gerekli olduğunu unutmayın. Aşağıdaki adımlarda, istemci hizmetini yapılandırmak için AzureClient ve InsecureTokenProvider kullanılırkenTODO 1, SharedMap kapsayıcı oluşturmak için gerekenleri containerSchema yapılandırmak için kullanılır (bkzTODO 2. ).

2. Aşağıdaki işlevsel bileşenleri ve yardımcı işlevleri ekleyin:

       const tryGetAudienceObject = async (userId, userName, containerId) => {
       // TODO 1: Create container and return audience object
       }
   
       export const AudienceDisplay = (props) => {
       //TODO 2: Configure user ID, user name, and state variables
       //TODO 3: Set state variables and set event listener on component mount
       //TODO 4: Return list view
       }
   
       const AudienceList = (data) => {
       //TODO 5: Append view elements to list array for each member
       //TODO 6: Return list of member elements
       }
   

   AudienceDisplay ve AudienceList'in, kapsayıcı ve hedef kitle hizmetlerinin oluşturulmasını işlerken tryGetAudienceObject hedef kitle verilerini alma ve işlemeyi işleyen işlevsel bileşenler olduğunu unutmayın.

Kapsayıcı ve hedef kitle alma

İzleyici nesnesinden görünüm katmanına (React durumu) Akışkan verilerini almak için yardımcı bir işlev kullanabilirsiniz. Bir tryGetAudienceObject kullanıcı kimliği seçildikten sonra görünüm bileşeni yüklendiğinde yöntemi çağrılır. Döndürülen değer bir React state özelliğine atanır.

1. TODO 1 öğesini aşağıdaki kodla değiştirin. için userIduserNamecontainerId değerlerinin Uygulama bileşeninden geçirileceğini unutmayın. containerIdyoksa yeni bir kapsayıcı oluşturulur. Ayrıca, öğesinin containerId URL karmasında depolandığını unutmayın. Yeni bir tarayıcıdan oturum giren bir kullanıcı var olan bir oturum tarayıcısından URL'yi kopyalayabilir veya kapsayıcı kimliğine localhost:3000 gidip el ile girebilir. Bu uygulamayla, kullanıcının var olmayan bir kapsayıcı kimliği girdisi durumunda çağrıyı bir deneme yakalamasına sarmalamak getContainer istiyoruz. Daha fazla bilgi için Kapsayıcılar belgelerini ziyaret edin.

       const userConfig = {
           id: userId,
           name: userName,
           additionalDetails: {
               email: userName.replace(/\s/g, "") + "@example.com",
               date: new Date().toLocaleDateString("en-US"),
           },
       };
   
       const serviceConfig = {
           connection: {
               type: "local",
               tokenProvider: new InsecureTokenProvider("", userConfig),
               endpoint: "http://localhost:7070",
           },
       };
   
       const client = new AzureClient(serviceConfig);
   
       const containerSchema = {
           initialObjects: { myMap: SharedMap },
       };
   
       let container;
       let services;
       if (!containerId) {
           ({ container, services } = await client.createContainer(containerSchema));
           const id = await container.attach();
           location.hash = id;
       } else {
           try {
               ({ container, services } = await client.getContainer(containerId, containerSchema));
           } catch (e) {
               return;
           }
       }
       return services.audience;
   

Hedef kitleyi bileşen bağlamaya alma

Akıcı hedef kitlenin nasıl alındığını tanımladığımıza göre İzleyici Ekranı bileşeni bağlandığında React'e çağrıda tryGetAudienceObject bulunduğunu söylememiz gerekiyor.

1. TODO 2 öğesini aşağıdaki kodla değiştirin. Kullanıcı kimliğinin üst bileşenden veya randomolarak user1user2 geleceğini unutmayın. Kimlik ise random , kimlik olarak rastgele bir sayı oluşturmak için kullanırız Math.random() . Ayrıca, içinde belirtilen userNameListkimliğine göre kullanıcıya bir ad eşlenir. Son olarak, bağlı üyeleri ve geçerli kullanıcıyı depolayacak durum değişkenlerini tanımlarız. fluidMembers kapsayıcıya currentMember bağlı tüm üyelerin listesini depolarken, tarayıcı bağlamını görüntüleyen geçerli kullanıcıyı temsil eden üye nesnesini içerir.

       const userId = props.userId == "random" ? Math.random() : props.userId;
       const userNameList = {
       "user1" : "User One",
       "user2" : "User Two",
       "random" : "Random User"
       };
       const userName = userNameList[props.userId];
   
       const [fluidMembers, setFluidMembers] = useState();
       const [currentMember, setCurrentMember] = useState();
   

2. TODO 3 öğesini aşağıdaki kodla değiştirin. Bu, bileşen bağlandığında öğesini tryGetAudienceObject çağırır ve döndürülen izleyici üyelerini ve currentMemberolarak fluidMembers ayarlar. Bir kullanıcının mevcut olmayan bir containerId girişi yapıp yapmaması ve bunları UserIdSelection görünümüne döndürmemiz gerekmesi durumunda bir hedef kitle nesnesinin döndürülip döndürülmediğini denetleriz (props.onContainerNotFound() görünümün değiştirilmesini işler). Ayrıca, React bileşeni döndürerek audience.offçıkarıldığında olay işleyicilerinin kaydını kaldırmak iyi bir uygulamadır.

       useEffect(() => {
       tryGetAudienceObject(userId, userName, props.containerId).then(audience => {
           if(!audience) {
           props.onContainerNotFound();
           alert("error: container id not found.");
           return;
           }
   
           const updateMembers = () => {
           setFluidMembers(audience.getMembers());
           setCurrentMember(audience.getMyself());
           }
   
           updateMembers();
   
           audience.on("membersChanged", updateMembers);
   
           return () => { audience.off("membersChanged", updateMembers) };
       });
       }, []);
   

3. TODO 4 öğesini aşağıdaki kodla değiştirin. veya currentMember başlatılmamışsa fluidMembers boş bir ekran işlendiğini unutmayın. AudienceList bileşeni, üye verilerini stil (sonraki bölümde uygulanacak) ile işler.

       if (!fluidMembers || !currentMember) return (<div/>);
   
       return (
           <AudienceList fluidMembers={fluidMembers} currentMember={currentMember}/>
       )
   

   Not

   Bağlan ion geçişleri, döndürdüğü getMyselfundefinedkısa zamanlama pencerelerine neden olabilir. Bunun nedeni, geçerli istemci bağlantısının henüz hedef kitleye eklenmemesidir, bu nedenle eşleşen bir bağlantı kimliği bulunamaz. React'in hedef kitle üyesi olmayan bir sayfayı işlemesini önlemek için üzerinde membersChangedçağrısı updateMembers yapmak üzere bir dinleyici ekleriz. Bu, hizmet izleyicisi kapsayıcı bağlandığında bir membersChanged olay yaydığından çalışır.

Görünümü oluşturma

1. TODO 5 öğesini aşağıdaki kodla değiştirin. AudienceDisplay bileşeninden geçirilen her üye için bir liste bileşeni işlendiğimizi unutmayın. Her üye içincurrentMember.userId, önce öğesini ile karşılaştırarak member.userId bu üyenin isSelfolup olmadığını denetleriz. Bu şekilde, istemci kullanıcıyı diğer kullanıcılardan ayırt edebilir ve bileşeni farklı bir renkle görüntüleyebiliriz. Ardından liste bileşenini bir list diziye göndereceğiz. Her bileşen ve additionalDetailsgibi userIduserName üye verilerini görüntüler.

       const currentMember = data.currentMember;
       const fluidMembers = data.fluidMembers;
   
       const list = [];
       fluidMembers.forEach((member, key) => {
           const isSelf = (member.userId === currentMember.userId);
           const outlineColor = isSelf ? 'blue' : 'black';
   
           list.push(
           <div style={{
               padding: '1rem',
               margin: '1rem',
               display: 'flex',
               outline: 'solid',
               flexDirection: 'column',
               maxWidth: '25%',
               outlineColor
           }} key={key}>
               <div style={{fontWeight: 'bold'}}>Name</div>
               <div>
                   {member.userName}
               </div>
               <div style={{fontWeight: 'bold'}}>ID</div>
               <div>
                   {member.userId}
               </div>
               <div style={{fontWeight: 'bold'}}>Connections</div>
               {
                   member.connections.map((data, key) => {
                       return (<div key={key}>{data.id}</div>);
                   })
               }
               <div style={{fontWeight: 'bold'}}>Additional Details</div>
               { JSON.stringify(member.additionalDetails, null, '\t') }
           </div>
           );
       });
   

2. TODO 6 öğesini aşağıdaki kodla değiştirin. Bu işlem, diziye list iletmiş olduğumuz tüm üye öğelerini işler.

       return (
           <div>
               {list}
           </div>
       );
   

UserIdSelection bileşenini ayarlama

1. Kod düzenleyicisinde bir dosya \src\UserIdSelection.js oluşturun ve açın. Bu bileşen, son kullanıcıların kullanıcı kimliklerini ve işbirliği oturumlarını seçmesine olanak tanıyan kullanıcı kimliği düğmeleri ve kapsayıcı kimliği giriş alanlarını içerir. Aşağıdaki import deyimleri ve işlevsel bileşenleri ekleyin:

   import { useState } from 'react';
   
   export const UserIdSelection = (props) => {
       // TODO 1: Define styles and handle user inputs
       return (
       // TODO 2: Return view components
       );
   }
   

2. TODO 1 öğesini aşağıdaki kodla değiştirin. İşlevin onSelectUser üst Uygulama bileşenindeki durum değişkenlerini güncelleştireceğini ve bir görünüm değişikliği soracağını unutmayın. handleSubmit yöntemi, içinde TODO 2uygulanacak düğme öğeleri tarafından tetiklenir. Ayrıca, durum değişkenini handleChangecontainerId güncelleştirmek için yöntemi kullanılır. Bu yöntem, içinde TODO 2uygulanan bir giriş öğesi olay dinleyicisinden çağrılır. Ayrıca, değerini kimliğiyle containerIdInput (içinde tanımlanan) bir HTML öğesinden alarak güncelleştirdiğimize containerIdTODO 2de dikkat edin.

       const selectionStyle = {
       marginTop: '2rem',
       marginRight: '2rem',
       width: '150px',
       height: '30px',
       };
   
       const [containerId, setContainerId] = (location.hash.substring(1));
   
       const handleSubmit = (userId) => {
       props.onSelectUser(userId, containerId);
       }
   
       const handleChange = () => {
       setContainerId(document.getElementById("containerIdInput").value);
       };
   

3. TODO 2 öğesini aşağıdaki kodla değiştirin. Bu işlem hem kullanıcı kimliği düğmelerini hem de kapsayıcı kimliği giriş alanını işler.

       <div style={{display: 'flex', flexDirection:'column'}}>
       <div style={{marginBottom: '2rem'}}>
           Enter Container Id:
           <input type="text" id="containerIdInput" value={containerId} onChange={() => handleChange()} style={{marginLeft: '2rem'}}></input>
       </div>
       {
           (containerId) ?
           (<div style={{}}>Select a User to join container ID: {containerId} as the user</div>)
           : (<div style={{}}>Select a User to create a new container and join as the selected user</div>)
       }
       <nav>
           <button type="submit" style={selectionStyle} onClick={() => handleSubmit("user1")}>User 1</button>
           <button type="submit" style={selectionStyle} onClick={() => handleSubmit("user2")}>User 2</button>
           <button type="submit" style={selectionStyle} onClick={() => handleSubmit("random")}>Random User</button>
       </nav>
       </div>
   

Fluid sunucusunu başlatın ve uygulamayı çalıştırın

Not

Bu nasıl yapılır işleminin geri kalanıyla eşleştirmek için bu bölümde ve npm komutları kullanarak npx bir Akıcı sunucu başlatabilirsiniz. Ancak, bu makaledeki kod bir Azure Fluid Relay sunucusunda da çalıştırılabilir. Daha fazla bilgi için bkz. Nasıl yapılır: Azure Fluid Relay hizmeti sağlama ve Nasıl yapılır: Azure Fluid Relay hizmetine Bağlan

Komut İstemi'nde aşağıdaki komutu çalıştırarak Fluid hizmetini başlatın.

npx @fluidframework/azure-local-service@latest

Yeni bir Komut İstemi açın ve projenin köküne gidin; örneğin, C:/My Fluid Projects/fluid-audience-tutorial. Aşağıdaki komutla uygulama sunucusunu başlatın. Uygulama tarayıcıda açılır. Bu işlem birkaç dakika sürebilir.

npm run start

localhost:3000 Çalışan uygulamayı görüntülemek için tarayıcı sekmesine gidin. Yeni kapsayıcı oluşturmak için, kapsayıcı kimliği girişini boş bırakırken bir kullanıcı kimliği düğmesi seçin. Kapsayıcı oturumuna katılan yeni bir kullanıcının benzetimini yapmak için yeni bir tarayıcı sekmesi açın ve adresine localhost:3000gidin. Bu kez, ilk tarayıcı sekmesinin URL'si devam http://localhost:3000/#eden öğesinden bulunabilecek kapsayıcı kimliği değerini girin.

Not

Bu tanıtımı Webpack 5 ile uyumlu hale getirmek için ek bir bağımlılık yüklemeniz gerekebilir. "Arabellek" veya "URL" paketiyle ilgili bir derleme hatası alırsanız, lütfen komutunu çalıştırın npm install -D buffer url ve yeniden deneyin. Bu, Akıcı Çerçeve'in gelecekteki bir sürümünde çözülecektir.

Sonraki adımlar

• tanıtımını alanındaki daha fazla anahtar/değer çifti ile genişletmeyi additionalDetailsuserConfigdeneyin.
• Hedef kitleyi SharedMap veya SharedString gibi dağıtılmış veri yapılarını kullanan işbirliğine dayalı bir uygulamayla tümleştirmeyi göz önünde bulundurun.
• İzleyiciler hakkında daha fazla bilgi edinin.

İpucu

Kodda değişiklik yaptığınızda proje otomatik olarak yeniden derlenir ve uygulama sunucusu yeniden yüklenir. Ancak, kapsayıcı şemasında değişiklik yaparsanız, bunlar yalnızca uygulama sunucusunu kapatıp yeniden başlattığınızda geçerlilik kazanır. Bunu yapmak için, odağı Komut İstemi'ne verin ve Ctrl-C tuşlarına iki kez basın. Ardından yeniden çalıştırın npm run start .