Aracılığıyla paylaş


Öğretici: Azure İşlevleri ve Azure Web PubSub hizmetiyle sunucusuz bildirim uygulaması oluşturma

Azure Web PubSub hizmeti, WebSockets kullanarak gerçek zamanlı mesajlaşma web uygulamaları oluşturmanıza yardımcı olur. Azure İşlevleri, herhangi bir altyapı yönetimine gerek kalmadan kodunuzu çalıştırmanıza olanak tanıyan sunucusuz bir platformdur. Bu öğreticide, bildirim senaryoları altında gerçek zamanlı mesajlaşma ile sunucusuz bir uygulama oluşturmak için Azure Web PubSub hizmetini kullanmayı ve Azure İşlevleri öğreneceksiniz.

Bu öğreticide aşağıdakilerin nasıl yapılacağını öğreneceksiniz:

  • Sunucusuz bildirim uygulaması oluşturma
  • Web PubSub işlevi giriş ve çıkış bağlamalarıyla çalışma
  • Örnek işlevleri yerel olarak çalıştırma
  • İşlevi Azure İşlev Uygulamasına dağıtma

Önkoşullar

Azure aboneliğiniz yoksa başlamadan önce birücretsiz Azure hesabı oluşturun.

Azure'da oturum açma

Azure hesabınızla Azure portalın https://portal.azure.com/ sayfasında oturum açın.

Azure Web PubSub hizmet örneği oluşturma

Uygulamanız Azure'da bir Web PubSub hizmet örneğine bağlanır.

  1. Azure portalın sol üst köşesinde bulunan Yeni düğmesini seçin. Yeni ekranında, arama kutusuna Web PubSub yazın ve Enter tuşuna basın. (Kategoriden Azure Web PubSub'da Web da arama da edebilirsiniz.)

    Screenshot of searching the Azure Web PubSub in portal.

  2. Arama sonuçlarından Web PubSub'ı ve ardından Oluştur'u seçin.

  3. Aşağıdaki ayarları girin.

    Ayar Önerilen değer Açıklama
    Kaynak adı Genel olarak benzersiz bir ad Yeni Web PubSub hizmet örneğinizi tanımlayan genel olarak benzersiz Ad. Geçerli karakterler : a-z, A-Z, 0-9ve -.
    Abonelik Aboneliğiniz Bu yeni Web PubSub hizmet örneğinin oluşturulduğu Azure aboneliği.
    Kaynak Grubu myResourceGroup Web PubSub hizmet örneğinizin oluşturulacağı yeni kaynak grubunun adı.
    Konum Batı ABD Size yakın olan bir bölgeyi seçin.
    Fiyatlandırma katmanı Ücretsiz Önce Azure Web PubSub hizmetini ücretsiz deneyebilirsiniz. Azure Web PubSub hizmeti fiyatlandırma katmanları hakkında daha fazla bilgi edinin
    Birim sayısı - Birim sayısı, Web PubSub hizmet örneğinizin kabul edebileceği bağlantı sayısını belirtir. Her birim en fazla 1.000 eşzamanlı bağlantıyı destekler. Bu yalnızca Standart katmanda yapılandırılabilir.

    Screenshot of creating the Azure Web PubSub instance in portal.

  4. Web PubSub hizmet örneğini dağıtmaya başlamak için Oluştur'u seçin.

İşlevleri yerel olarak oluşturma ve çalıştırma

  1. Azure İşlevleri Temel Araçları'nın yüklü olduğundan emin olun. Şimdi proje için boş bir dizin oluşturun. Komutunu bu çalışma dizininin altında çalıştırın. Aşağıdaki seçeneklerden birini kullanın.

    func init --worker-runtime javascript --model V4
    
  2. yükleme Microsoft.Azure.WebJobs.Extensions.WebPubSubadımlarını izleyin.

    Web PubSub desteği almak için uzantısıBundle'ı sürüm 4.* veya sonraki bir sürüme onaylayın veya güncelleştirinhost.json. 'yi host.jsongüncelleştirmek için dosyayı düzenleyicide açın ve ardından mevcut sürüm uzantısıBundle'ı sürüm 4.* veya sonraki bir sürümle değiştirin.

    {
        "extensionBundle": {
            "id": "Microsoft.Azure.Functions.ExtensionBundle",
            "version": "[4.*, 5.0.0)"
        }
    }
    
  3. İstemciler için statik bir index web sayfasını okumak ve barındırmak için bir işlev oluşturun.

    func new -n index -t HttpTrigger
    
    • Aşağıdaki kodları güncelleştirin src/functions/index.js ve kopyalayın.
      const { app } = require('@azure/functions');
      const { readFile } = require('fs/promises');
      
      app.http('index', {
          methods: ['GET', 'POST'],
          authLevel: 'anonymous',
          handler: async (context) => {
              const content = await readFile('index.html', 'utf8', (err, data) => {
                  if (err) {
                      context.err(err)
                      return
                  }
              });
      
              return { 
                  status: 200,
                  headers: { 
                      'Content-Type': 'text/html'
                  }, 
                  body: content, 
              };
          }
      });
      
  4. İstemcilerin erişim belirteci ile hizmet bağlantısı URL'sini almasına yardımcı olacak bir negotiate işlev oluşturun.

    func new -n negotiate -t HttpTrigger
    
    • Aşağıdaki kodları güncelleştirin src/functions/negotiate.js ve kopyalayın.
      const { app, input } = require('@azure/functions');
      
      const connection = input.generic({
          type: 'webPubSubConnection',
          name: 'connection',
          hub: 'notification'
      });
      
      app.http('negotiate', {
          methods: ['GET', 'POST'],
          authLevel: 'anonymous',
          extraInputs: [connection],
          handler: async (request, context) => {
              return { body: JSON.stringify(context.extraInputs.get('connection')) };
          },
      });
      
  5. ile TimerTriggerbildirim oluşturmak için bir notification işlev oluşturun.

    func new -n notification -t TimerTrigger
    
    • Aşağıdaki kodları güncelleştirin src/functions/notification.js ve kopyalayın.
      const { app, output } = require('@azure/functions');
      
      const wpsAction = output.generic({
          type: 'webPubSub',
          name: 'action',
          hub: 'notification'
      });
      
      app.timer('notification', {
          schedule: "*/10 * * * * *",
          extraOutputs: [wpsAction],
          handler: (myTimer, context) => {
              context.extraOutputs.set(wpsAction, {
                  actionName: 'sendToAll',
                  data: `[DateTime: ${new Date()}] Temperature: ${getValue(22, 1)}\xB0C, Humidity: ${getValue(40, 2)}%`,
                  dataType: 'text',
              });
          },
      });
      
      function getValue(baseNum, floatNum) {
          return (baseNum + 2 * floatNum * (Math.random() - 0.5)).toFixed(3);
      }
      
  6. Proje kök klasörüne istemci tek sayfasını index.html ekleyin ve içeriği kopyalayın.

    <html>
        <body>
        <h1>Azure Web PubSub Notification</h1>
        <div id="messages"></div>
        <script>
            (async function () {
                let messages = document.querySelector('#messages');
                let res = await fetch(`${window.location.origin}/api/negotiate`);
                let url = await res.json();
                let ws = new WebSocket(url.url);
                ws.onopen = () => console.log('connected');
    
                ws.onmessage = event => {
                    let m = document.createElement('p');
                    m.innerText = event.data;
                    messages.appendChild(m);
                };
            })();
        </script>
        </body>
    </html>
    
  7. Azure İşlev Uygulamasını yapılandırıp çalıştırma

    • Tarayıcıda Azure portalını açın ve daha önce dağıtmış olduğunuz Web PubSub Hizmeti örneğinin başarıyla oluşturulduğunu onaylayın. Örneğe gidin.
    • Anahtarlar'ı seçin ve bağlantı dizesi kopyalayın.

    Screenshot of copying the Web PubSub connection string.

    hizmet bağlantı dizesi ayarlamak için işlev klasöründe komutunu çalıştırın. değerini gerektiği gibi değeriniz ile değiştirin <connection-string> .

    func settings add WebPubSubConnectionString "<connection-string>"
    

    Dekont

    TimerTriggerörneğinde kullanılanların Azure Depolama bağımlılığı vardır, ancak İşlev yerel olarak çalışırken yerel depolama öykünücüsü kullanabilirsiniz. gibi There was an error performing a read operation on the Blob Storage Secret Repository. Please ensure the 'AzureWebJobsStorage' connection string is valid.bir hata alırsanız Depolama Öykünücüsü'yü indirip etkinleştirmeniz gerekir.

    Artık yerel işlevinizi komutla çalıştırabilirsiniz.

    func start --port 7071
    

    Çalışan günlükleri de denetleyerek yerel ana bilgisayar statik sayfanızı ziyaret edebilirsiniz: http://localhost:7071/api/index.

    Dekont

    Bazı brower'lar otomatik olarak bu url'ye https yönlendirilir ve bu da yanlış URL'ye yol açar. İşleme başarılı değilse url'yi kullanmayı Edge ve iki kez denetlemeyi önerin.

İşlev Uygulamasını Azure'a dağıtma

İşlev kodunuzu Azure'a dağıtabilmeniz için önce üç kaynak oluşturmanız gerekir:

  • İlgili kaynaklar için mantıksal bir kapsayıcı olan kaynak grubu.
  • İşlevleriniz hakkındaki durumu ve diğer bilgileri korumak için kullanılan bir depolama hesabı.
  • İşlev kodunuzu yürütmek için ortam sağlayan bir işlev uygulaması. İşlev uygulaması yerel işlev projenize eşler ve kaynakların daha kolay yönetilmesi, dağıtılması ve paylaşılması için işlevleri mantıksal birim olarak gruplandırmanıza olanak tanır.

Bu öğeleri oluşturmak için aşağıdaki komutları kullanın.

  1. Azure'da Oturum Açın:

    az login
    
  2. Kaynak grubu oluşturun veya Azure Web PubSub hizmetinden birini yeniden kullanarak atlayabilirsiniz:

    az group create -n WebPubSubFunction -l <REGION>
    
  3. Kaynak grubunuz ve bölgenizde genel amaçlı bir depolama hesabı oluşturun:

    az storage account create -n <STORAGE_NAME> -l <REGION> -g WebPubSubFunction
    
  4. Azure'da işlev uygulamasını oluşturun:

    az functionapp create --resource-group WebPubSubFunction --consumption-plan-location <REGION> --runtime node --runtime-version 18 --functions-version 4 --name <FUNCIONAPP_NAME> --storage-account <STORAGE_NAME>
    

    Dekont

    Parametreyi desteklenen değere ayarlamak --runtime-version için Azure İşlevleri çalışma zamanı sürümleri belgelerine bakın.

  5. İşlev projesini Azure'a dağıtma:

    İşlev uygulamanızı Azure'da oluşturduktan sonra, artık func azure functionapp publish komutunu kullanarak yerel işlevler projenizi dağıtmaya hazır olursunuz.

    func azure functionapp publish <FUNCIONAPP_NAME> --publish-local-settings
    

    Dekont

    Burada komut parametresiyle --publish-local-settingsbirlikte yerel ayarları local.settings.json dağıtıyoruz. Microsoft Azure Depolama Öykünücüsü kullanıyorsanız, şu istem iletisini izleyerek Azure'da bu değerin üzerine yazmayı atlamak için yazabilirsinizno: App setting AzureWebJobsStorage is different between azure and local.settings.json, Would you like to overwrite value in azure? [yes/no/show]. Ayrıca, İşlev Uygulaması ayarlarını Azure Portal -Ayarlar ->>Configuration'da güncelleştirebilirsiniz.

  6. Artık URL'ye giderek Azure İşlev Uygulaması'ndan sitenizi de kontrol edebilirsiniz: https://<FUNCIONAPP_NAME>.azurewebsites.net/api/index.

Kaynakları temizleme

Bu uygulamayı kullanmaya devam etmeyecekseniz, ücret ödememek için aşağıdaki adımları izleyerek bu belge tarafından oluşturulan tüm kaynakları silin:

  1. Azure portalında, en solda bulunan Kaynak grupları’nı ve ardından oluşturduğunuz kaynak grubunu seçin. Bunun yerine kaynak grubunu adına göre bulmak için arama kutusunu kullanın.

  2. Açılan pencerede kaynak grubunu seçin ve ardından Kaynak grubunu sil'i seçin.

  3. Yeni pencerede, silinecek kaynak grubunun adını yazın ve sil'i seçin.

Sonraki adımlar

Bu hızlı başlangıçta sunucusuz sohbet uygulamasını çalıştırmayı öğrendiniz. Artık kendi uygulamanızı oluşturmaya başlayabilirsiniz.