Hızlı Başlangıç: Javascript kullanarak Azure İşlevleri ve SignalR Hizmeti ile sunucusuz uygulama oluşturma

  • Makale

Bu makalede, istemcilere ileti yayınlamak üzere sunucusuz bir uygulama oluşturmak için Azure SignalR Hizmeti, Azure İşlevleri ve JavaScript kullanacaksınız.

Dekont

Makalede kullanılan tüm kodları GitHub'dan alabilirsiniz.

Ön koşullar

Bu hızlı başlangıç; macOS, Windows veya Linux üzerinde çalıştırılabilir.

Önkoşul Açıklama
Bir Azure aboneliği Aboneliğiniz yoksa ücretsiz Azure hesabı oluşturun
Kod düzenleyicisi Visual Studio Code gibi bir kod düzenleyicisi gerekir.
Azure Functions Core Tools Python Azure İşlevi uygulamalarını yerel olarak çalıştırmak için 2.7.1505 veya üzeri bir sürüm gerekir.
Node.js Azure İşlevleri JavaScript geliştirici kılavuzunda desteklenen node.js sürümlerine bakın.
Azurite SignalR bağlaması için Azure Depolama gerekir. bir işlev yerel olarak çalışırken yerel depolama öykünücüsü kullanabilirsiniz.
Azure CLI İsteğe bağlı olarak, azure CLI kullanarak bir Azure SignalR Hizmeti örneği oluşturabilirsiniz.

Bir Azure SignalR Hizmeti örneği oluşturma

Bu bölümde, uygulamanız için kullanılacak temel bir Azure SignalR örneği oluşturacaksınız. Aşağıdaki adımlarda yeni bir örnek oluşturmak için Azure portalı kullanılır, ancak Azure CLI'yı da kullanabilirsiniz. Daha fazla bilgi için Azure SignalR Hizmeti CLI Başvurusu'ndaki az signalr create komutuna bakın.

  1. Azure Portal oturum açın.
  2. Sayfanın sol üst kısmında + Kaynak oluştur'u seçin.
  3. Kaynak oluştur sayfasında, Arama hizmeti s ve market metin kutusuna signalr yazın ve listeden SignalR Hizmeti seçin.
  4. SignalR Hizmeti sayfasında Oluştur'u seçin.
  5. Temel Bilgiler sekmesinde, yeni SignalR Hizmeti örneğinin temel bilgilerini girersiniz. Aşağıdaki değerleri girin:
Alan Önerilen Değer Tanım
Abonelik Aboneliğinizi seçin Yeni bir SignalR Hizmeti örneği oluşturmak için kullanmak istediğiniz aboneliği seçin.
Kaynak grubu SignalRTestResources adlı bir kaynak grubu oluşturma SignalR kaynağınız için bir kaynak grubu seçin veya oluşturun. Mevcut bir kaynak grubunu kullanmak yerine bu öğretici için yeni bir kaynak grubu oluşturmak yararlı olur. Öğreticiyi tamamladıktan sonra kaynakları boşaltmak için kaynak grubunu silin.

Bir kaynak grubunun silinmesi, gruba ait olan tüm kaynakları da siler. Bu eylem geri alınamaz. Bir kaynak grubunu silmeden önce, tutmak istediğiniz kaynakları içermediğinden emin olun.

Daha fazla bilgi için bkz. Azure kaynaklarınızı yönetmek için kaynak gruplarını kullanma.
Kaynak adı testsignalr SignalR kaynağı için kullanılacak benzersiz kaynak adını girin. Testsignalr bölgenizde zaten alınmışsa, ad benzersiz olana kadar bir basamak veya karakter ekleyin.

Ad 1 ile 63 karakter arasında bir dize olmalı ve yalnızca sayı, harf ve kısa çizgi (-) karakteri içermelidir. Ad kısa çizgi karakteriyle başlayamaz veya bitemez ve ardışık kısa çizgi karakterleri geçerli değildir.
Bölge Bölgenizi seçin Yeni SignalR Hizmeti örneğiniz için uygun bölgeyi seçin.

Azure SignalR Hizmeti şu anda tüm bölgelerde kullanılamamaktadır. Daha fazla bilgi için bkz. Azure SignalR Hizmeti bölge kullanılabilirliği
Fiyatlandırma katmanı Değiştir'i ve ardından Ücretsiz (Yalnızca Geliştirme/Test) seçeneğini belirleyin. Fiyatlandırma katmanı seçiminizi onaylamak için Seç'i seçin. Azure SignalR Hizmeti üç fiyatlandırma katmanı vardır: Ücretsiz, Standart ve Premium. Öğreticiler, önkoşullarda aksi belirtilmedikçe Ücretsiz katmanını kullanır.

Katmanlar ve fiyatlandırma arasındaki işlevsellik farkları hakkında daha fazla bilgi için bkz. fiyatlandırma Azure SignalR Hizmeti
Hizmet modu Uygun hizmet modunu seçin Web uygulamalarınızda SignalR hub mantığını barındırırken ve SignalR hizmetini ara sunucu olarak kullanırken Varsayılan'ı kullanın. SignalR hub mantığını barındırmak için Azure İşlevleri gibi Sunucusuz teknolojileri kullanırken Sunucusuz'u kullanın.

Klasik mod yalnızca geriye dönük uyumluluk içindir ve kullanılması önerilmez.

Daha fazla bilgi için bkz. Azure SignalR Hizmeti'de hizmet modu.

SignalR öğreticileri için Ağ ve Etiketler sekmelerindeki ayarları değiştirmeniz gerekmez.

  1. Temel Bilgiler sekmesinin en altındaki Gözden Geçir + oluştur düğmesini seçin.
  2. Gözden geçir ve oluştur sekmesinde değerleri gözden geçirin ve Oluştur'u seçin. Dağıtımın tamamlanması birkaç dakika sürer.
  3. Dağıtım tamamlandığında Kaynağa git düğmesini seçin.
  4. SignalR kaynağı sayfasında, soldaki menüden Ayarlar altında Anahtarlar'ı seçin.
  5. Birincil anahtar için Bağlan ion dizesini kopyalayın. Bu öğreticinin ilerleyen bölümlerinde uygulamanızı yapılandırmak için bu bağlantı dizesi gerekir.

İşlev projelerini ayarlama

Azure İşlevleri Temel Araçları'nın yüklü olduğundan emin olun.

  1. Bir komut satırı açın.
  2. Proje dizini oluşturun ve sonra bu dizine geçin.
  3. Yeni bir proje başlatmak için Azure İşlevleri func init komutunu çalıştırın.
# Initialize a function project
func init --worker-runtime javascript

Proje işlevlerini oluşturma

Projeyi başlatdıktan sonra işlevler oluşturmanız gerekir. Bu proje için üç işlev gerekir:

  • index: İstemci için bir web sayfası barındırıyor.
  • negotiate: İstemcinin erişim belirteci almasına izin verir.
  • broadcast: İletileri tüm istemcilere düzenli aralıklarla yayınlamak için bir zaman tetikleyicisi kullanır.

Komutu projenin kök dizininden çalıştırdığınızdafunc new, Azure İşlevleri Core Tools bunları işlev adıyla bir klasörde depolayan işlev kaynak dosyalarını oluşturur. Varsayılan kodu uygulama koduyla değiştirerek dosyaları gerektiği gibi düzenleyeceksiniz.

Dizin işlevini oluşturma

  1. İşlevi oluşturmak index için aşağıdaki komutu çalıştırın.

    func new -n index -t HttpTrigger

  2. index/function.json dosyasını düzenleyin ve içeriğini aşağıdaki json koduyla değiştirin:

    {
  "bindings": [
    {
      "authLevel": "anonymous",
      "type": "httpTrigger",
      "direction": "in",
      "name": "req",
      "methods": [
        "get",
        "post"
      ]
    },
    {
      "type": "http",
      "direction": "out",
      "name": "res"
    }
  ]
}

  3. index/index.js dosyasını düzenleyin ve içeriğini aşağıdaki kodla değiştirin:

    var fs = require('fs').promises

module.exports = async function (context, req) {
    const path = context.executionContext.functionDirectory + '/../content/index.html'
    try {
        var data = await fs.readFile(path);
        context.res = {
            headers: {
                'Content-Type': 'text/html'
            },
            body: data
        }
        context.done()
    } catch (err) {
        context.log.error(err);
        context.done(err);
    }
}

Negotiate işlevini oluşturma

  1. İşlevi oluşturmak negotiate için aşağıdaki komutu çalıştırın.

    func new -n negotiate -t HttpTrigger

  2. negotiate/function.json dosyasını düzenleyin ve içeriğini aşağıdaki json koduyla değiştirin:

    {
  "disabled": false,
  "bindings": [
    {
      "authLevel": "anonymous",
      "type": "httpTrigger",
      "direction": "in",
      "methods": [
        "post"
      ],
      "name": "req",
      "route": "negotiate"
    },
    {
      "type": "http",
      "direction": "out",
      "name": "res"
    },
    {
      "type": "signalRConnectionInfo",
      "name": "connectionInfo",
      "hubName": "serverless",
      "connectionStringSetting": "AzureSignalRConnectionString",
      "direction": "in"
    }
  ]
}

  3. negotiate/index.js dosyasını düzenleyin ve içeriği aşağıdaki JavaScript koduyla değiştirin:

    module.exports = async function (context, req, connectionInfo) {
    context.res.body = connectionInfo;
};

Yayın işlevi oluşturma.

  1. İşlevi oluşturmak broadcast için aşağıdaki komutu çalıştırın.

    func new -n broadcast -t TimerTrigger

  2. broadcast/function.json dosyasını düzenleyin ve içeriğini aşağıdaki kodla değiştirin:

    {
  "bindings": [
    {
      "name": "myTimer",
      "type": "timerTrigger",
      "direction": "in",
      "schedule": "*/5 * * * * *"
    },
    {
      "type": "signalR",
      "name": "signalRMessages",
      "hubName": "serverless",
      "connectionStringSetting": "AzureSignalRConnectionString",
      "direction": "out"
    }
  ]
}

  3. broadcast/index.js dosyasını düzenleyin ve içeriğini aşağıdaki kodla değiştirin:

    var https = require('https');

var etag = '';
var star = 0;

module.exports = function (context) {
    var req = https.request("https://api.github.com/repos/azure/azure-signalr", {
        method: 'GET',
        headers: {'User-Agent': 'serverless', 'If-None-Match': etag}
    }, res => {
        if (res.headers['etag']) {
            etag = res.headers['etag']
        }

        var body = "";

        res.on('data', data => {
            body += data;
        });
        res.on("end", () => {
            if (res.statusCode === 200) {
                var jbody = JSON.parse(body);
                star = jbody['stargazers_count'];
            }

            context.bindings.signalRMessages = [{
                "target": "newMessage",
                "arguments": [ `Current star count of https://github.com/Azure/azure-signalr is: ${star}` ]
            }]
            context.done();
        });
    }).on("error", (error) => {
        context.log(error);
        context.res = {
          status: 500,
          body: error
        };
        context.done();
    });
    req.end();
}

index.html dosyasını oluşturma

Bu uygulamanın istemci arabirimi bir web sayfasıdır. İşlev, index content/index.html dosyasındaki HTML içeriğini okur.

  1. Proje kök klasörünüzde adlı content bir klasör oluşturun.

  2. Dosya content/index.html oluşturun.

  3. Aşağıdaki içeriği content/index.html dosyasına kopyalayın ve kaydedin:

    <html>

<body>
  <h1>Azure SignalR Serverless Sample</h1>
  <div id="messages"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/3.1.7/signalr.min.js"></script>
  <script>
    let messages = document.querySelector('#messages');
    const apiBaseUrl = window.location.origin;
    const connection = new signalR.HubConnectionBuilder()
        .withUrl(apiBaseUrl + '/api')
        .configureLogging(signalR.LogLevel.Information)
        .build();
      connection.on('newMessage', (message) => {
        document.getElementById("messages").innerHTML = message;
      });

      connection.start()
        .catch(console.error);
  </script>
</body>

</html>

SignalR Hizmeti bağlantı dizesi işlev uygulaması ayarlarına ekleme

Azure İşlevleri çalışması için bir depolama hesabı gerekir. Azure Depolama Öykünücüsü'ni yükleyebilir ve çalıştırabilirsiniz. Alternatif olarak, aşağıdaki komutla gerçek depolama hesabınızı kullanmak için ayarı güncelleştirebilirsiniz: bash func settings add AzureWebJobsStorage "<storage-connection-string>"

Neredeyse bitti. Son adım, Azure İşlevi uygulama ayarlarında SignalR Hizmeti bağlantı dizesi ayarlamaktır.

  1. Azure portalında daha önce dağıtılan SignalR örneğine gidin.

  2. SignalR Hizmeti örneğinin bağlantı dizelerini görüntülemek için Anahtarlar’ı seçin.

    Screenshot of Azure SignalR service Keys page.

  3. Birincil bağlantı dizesi kopyalayın ve komutunu yürütür:

func settings add AzureSignalRConnectionString "<signalr-connection-string>"

Azure İşlevi uygulamasını yerel olarak çalıştırma

Azurite depolama öykünücüsİnİ başlatın:

azurite

Azure İşlevi uygulamasını yerel ortamda çalıştırın:

func start

Dekont

Blob depolamada okuma hatalarını gösteren bir hata görürseniz local.settings.json dosyasındaki 'AzureWebJobs Depolama' ayarının olarak UseDevelopmentStorage=trueayarlandığından emin olun.

Azure İşlevi yerel olarak çalıştırıldıktan sonra adresine http://localhost:7071/api/indexgidin. Sayfada GitHub Azure/azure-signalr deposu için geçerli yıldız sayısı görüntülenir. GitHub'da depoyu yıldızladığınızda veya depoyu açtığınızda, birkaç saniyede bir yenilenen sayıyı görürsünüz.

Sorun mu yaşıyorsunuz? Sorun giderme kılavuzunu deneyin veya bize bildirin

Kaynakları temizleme

Bu uygulamayı kullanmaya devam etmeyecekseniz, herhangi bir ücret ödememek için aşağıdaki adımları kullanarak bu hızlı başlangıç 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. Alternatif olarak kaynak grubunu adıyla bulmak için arama kutusunu kullanabilirsiniz.

  2. Açılan pencerede kaynak grubunu seçin ve Kaynak grubunu sil’e tıklayın.

  3. Yeni pencerede, silmek için kaynak grubunun adını yazıp Sil öğesine tıklayın.

Sonraki adımlar

Bu hızlı başlangıçta, localhost'ta gerçek zamanlı sunucusuz bir uygulama oluşturup çalıştırmıştınız. Ardından, SignalR Hizmeti ile istemciler ile Azure İşlevi arasında çift yönlü iletişim kurma hakkında daha fazla bilgi edinin.

Azure İşlevleri için SignalR Hizmeti bağlamaları

Sunucusuz'da çift yönlü iletişim

VS Code ile Azure İşlevlerini dağıtma