Hızlı Başlangıç: Visual Studio Code Extension ile geliştir

Azure Web PubSub, geliştiricilerin WebSocket'ler ve yayımla-abone olma desenini kullanarak gerçek zamanlı mesajlaşma web uygulamaları oluşturmalarına yardımcı olur.

Bu eğitimde, Visual Studio Code yardımıyla Azure Web PubSub kullanarak bir sohbet uygulaması oluşturuyorsunuz.

Önkoşullar

• Etkin aboneliği olan bir Azure hesabı gereklidir. Henüz bir hesabınız yoksa ücretsiz olarak bir hesap oluşturabilirsiniz.
• Visual Studio Code, ücretsiz indirme olarak kullanılabilir.
• Aşağıdaki Visual Studio Code uzantıları yüklü:
  • Azure Hesabı uzantısı
  • Azure Web PubSub extension

Projeyi klonla

1. Yeni bir Visual Studio Code penceresi açın.

2. Komut paletini açmak için F1'e basın.

3. Git: Kopyala yazın ve Enter tuşuna basın.

4. Örnek projeyi kopyalamak için aşağıdaki URL'yi girin:

   https://github.com/Azure/azure-webpubsub.git
   

   Uyarı

   Bu öğreticide JavaScript projesi kullanılır, ancak adımlar dilden bağımsızdır.

5. Projeyi kopyalamak için bir klasör seçin.

6. Visual Studio Code'da Open -> Open Folder seçeneğini seçin azure-webpubsub/samples/javascript/chatapp/nativeapi .

Azure'a Giriş Yap

1. Komut paletini açmak için F1'e basın.

2. Azure: Oturum Aç'ı seçin ve kimlik doğrulaması yapmak için istemleri izleyin.

3. Oturum açtıktan sonra Visual Studio Code'a dönün.

Create an Azure Web PubSub Service

Visual Studio Code için Azure Web PubSub uzantısı, kullanıcıların Azure Web PubSub Service ve geliştirici araçlarını (Azure Web PubSub Local Tunnel Tool) hızlıca oluşturabilmelerini, yönetmelerini ve kullanmalarını sağlar. Bu durumda, yeni bir Azure Web PubSub Service kaynağı oluşturur ve uygulamanızı barındıracak şekilde yapılandırırsınız. Web PubSub uzantısı yüklendikten sonra, Visual Studio Code'daki Azure kontrol paneli altında özelliklerine erişebilirsiniz.

1. F1 tuşuna basarak komut paletini açın ve Azure Web PubSub: Create Web PubSub Service komutunu çalıştırın.

2. Uzantı tarafından istendiği gibi aşağıdaki değerleri girin.

   Uyarı	Değer
   Aboneliği seçin	Kullanmak istediğiniz Azure aboneliğini seçin.
   Kaynak grubunu seçin	Kullanmak istediğiniz Azure kaynak grubunu seçin.
   Hizmet için bir isim girin	my-wps girin.
   Bir konum seçin	Size yakın bir Azure bölgesi seçin.
   Bir fiyatlandırma seviyesi seçin	Kullanmak istediğiniz bir fiyatlandırma seviyesini seçin.
   Bir birim sayısı seçin	Kullanmak istediğiniz birim sayısını seçin.

   Azure etkinlik günlüğü paneli açılır ve dağıtım ilerleme durumunu görüntüler. Bu işlemin tamamlanması birkaç dakika sürebilir.

3. Bu işlem tamamlandıktan sonra Visual Studio Code bir bildirim görüntüler.

Bir hub ayarı oluşturun

1. Visual Studio Code'un sol tarafındaki Aktivite Çubuğu'nda Azure simgesini açın.

   Uyarı

   Eğer etkinlik çubuğun gizliyse, uzantıya erişemezsin. Görünüm Göster > Etkinlik Barını Göster Göster Aktivite Barını Tıklayarak > Göster

2. Kaynak ağacında, oluşturduğunuz Azure Web PubSub kaynağını my-wps bulun ve genişletmek için tıklayın

3. Öğe Hub Ayarları'na sağ tıklayın ve ardından Merkez Ayarları Oluştur'u seçin

4. Hub adı olarak girin sample_chat ve hub ayarını oluşturun. Ekstra etkinlik yöneticileri oluşturup oluşturmamanız önemli değil. Bitti olarak gösterilen ilerleme bildirimini bekle

5. Öğe Hub Ayarlarının altında, yeni bir alt öğe Hub sample_chat görünecektir. Yeni öğeye sağ tıklayın ve ardından "Yerel Tünel Bağla"yı seçin.

6. Bir bildirim, tünel özellikli bir olay yöneticisi oluşturmanız gerektiğini hatırlatıyor. Evet butonuna tıklayın. Sonra uzantıdan gelen değerleri girin

   Uyarı	Değer
   Seç Kullanıcı Etkinlikleri	Herkesi Seç
   Sistem Etkinliklerini Seç	Bağlanmış Seç
   Giriş Sunucusu Portu	8080 ortaya çıktı

7. Uzantı, Yerel Tünel Aracı'nı çalıştırmak için yeni bir terminal oluşturuyor ve bir bildirim Yerel Tünel Portalı'nı açmanızı hatırlatıyor. "Evet" butonuna tıklayın veya "aç"http://localhost:4000" düğmesine tıklayın; Portalı görmek için web tarayıcısında manuel olarak kullanıyorum.

Sunucu uygulamasını çalıştır

1. Çalışma dizininin azure-webpubsub/samples/javascript/chatapp/nativeapi

2. Node.js bağımlılıklarını yükleme

   npm install
   

3. Activity Bar'da Azure simgesini açın ve Azure Web PubSub kaynağını my-wpsbulun. Sonra kaynak öğesine sağ tıklayın ve Bağlantı Dizisini Kopyalayın. Bağlantı dizisi panoya kopyalanır

4. Sunucu uygulamasını kopyalanmış bağlantı dizisiyle çalıştırın

   node server.js "<connection-string>"
   

5. Sohbet uygulamanızı denemek için tarayıcıyı açın http://localhost:8080/index.html .

Tavsiye

Sorun mu yaşıyorsunuz? Azure Web PubSub deposunda bir sorun açarak GitHub'da bize bildirin.