Hızlı Başlangıç: Azure İşlevleri ve SignalR Service ile yıldız sayısını GitHub gösteren Azure İşlevleri JavaScript kullanma

Makale
11/24/2021
Okumak için 5 dakika

Azure SignalR Hizmeti uygulamanıza kolayca gerçek zamanlı işlevsellik eklemenize olanak sağlar ve Azure İşlevleri altyapıyı yönetmeden kodunuzu çalıştırmanıza olanak sağlayan sunucusuz bir platformdur. Bu hızlı başlangıçta SignalR Service'i kullanmayı ve istemcilere Azure İşlevleri JavaScript ile sunucusuz bir uygulama derlemeyi öğrenin.

Not

Makalede belirtilen tüm kodları aşağıdaki makaleden GitHub

Önkoşullar

Kod düzenleyicisi, örneğin Visual Studio Code
Etkin aboneliği olan bir Azure hesabı. Ücretsiz bir hesap oluşturun.
Azure Functions Core Tools, sürüm 2 veya üzeri. Azure İşlevi uygulamalarını yerel olarak çalıştırmak için kullanılır.
Node.js, sürüm 10.x

Not

Örneklerin diğer çalışma zamanı sürümleriyle çalışması Node.js daha fazla bilgi Azure İşlevleri çalışma zamanı sürümleri belgelerine bakın.

Not

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

Sorun mu var? Sorun giderme kılavuzunu deneyin veya bize haber ver.

Azure'da oturum açma

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

Sorun mu var? Sorun giderme kılavuzunu deneyin veya bize haber ver.

Azure SignalR Hizmeti örneği oluşturma

Uygulamanız Azure’da bir SignalR hizmeti örneğine bağlanır.

Azure portalın sol üst köşesinde bulunan Yeni düğmesini seçin. Yeni ekranda arama kutusuna SignalR hizmeti yazın ve Enter tuşuna basın.
Arama sonuçlarından SignalR Hizmeti’ni seçtikten sonra Oluştur’u seçin.

Aşağıdaki ayarları girin.

Ayar	Önerilen değer	Açıklama
Kaynak adı	Genel olarak benzersiz bir ad	Yeni SignalR Hizmeti örneğinizi tanımlayan ad. Geçerli karakterler: `a-z`, `0-9` ve `-`.
Abonelik	Aboneliğiniz	Yeni SignalR Hizmeti örneğinin oluşturulacağı abonelik.
Kaynak Grubu	myResourceGroup	SignalR Hizmeti örneğinizin oluşturulacağı yeni kaynak grubunun adı.
Konum	Batı ABD	Size yakın bir bölge seçin.
Fiyatlandırma katmanı	Ücretsiz	Azure SignalR Hizmetini ücretsiz deneyin.
Birim sayısı	Uygulanamaz	Birim sayısı, SignalR Hizmeti örneğinizin kaç bağlantı kabul edebileceğini belirtir. Bu yalnızca Standart katmanda yapılandırılabilir.
Hizmet modu	Sunucusuz	Azure Işlevleri veya REST API kullanmak için.

Ekran görüntüsünde, değer içeren SignalR temel kavramları sekmesi gösterilmektedir.

SignalR Hizmeti örneğini dağıtmaya başlamak için Oluştur’u seçin.
Örnek dağıtıldıktan sonra portalda açın ve ayarlar sayfasını bulun. Azure SignalR hizmetini Azure Işlevleri bağlama veya REST API aracılığıyla kullanıyorsanız, hizmet modu ayarını sunucusuz olarak değiştirin. Aksi halde Klasik veya varsayılan olarak bırakın.

Sorun mu var? Sorun giderme kılavuzunu deneyin veya bize haber ver.

Azure İşlevi'nin kurulumunu ve çalıştırması

Azure Function Core Tools'ların yüklü olduğundan emin olun. Boş bir dizin oluşturun ve komut satırıyla dizinine gidin.
```
# Initialize a function project
func init --worker-runtime javascript
```

Bir projeyi başlatıldıktan sonra işlev oluşturmanız gerekir. Bu örnekte 3 işlev oluşturmamız gerekir.

İstemci için bir web sayfası index barındıracak bir işlev oluşturmak için aşağıdaki komutu çalıştırın.

func new -n index -t HttpTrigger

Aşağıdaki index/function.json json kodlarını açın ve kopyalayın:

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

Aşağıdaki index/index.js kodları açın ve kopyalayın.

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 (error) {
        context.log.error(err);
        context.done(err);
    }
}

İstemcilerin negotiate erişim belirteci allarına bir işlev oluşturun.

func new -n negotiate -t SignalRNegotiateHTTPTrigger

Aşağıdaki negotiate/function.json json kodlarını açın ve kopyalayın:

{
  "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"
    }
  ]
}

İletileri broadcast tüm istemcilere yayınlamaya bir işlev oluşturun. Örnekte iletileri düzenli aralıklarla yayın yapmak için zaman tetikleyicisi kullanıyoruz.

func new -n broadcast -t TimerTrigger

Aşağıdaki broadcast/function.json kodları açın ve kopyalayın.

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

Aşağıdaki broadcast/index.js kodları açın ve kopyalayın.

var https = require('https');

module.exports = function (context) {
    var req = https.request("https://api.github.com/repos/azure/azure-signalr", {
        method: 'GET',
        headers: {'User-Agent': 'serverless'}
    }, res => {
        var body = "";

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

Bu örneğin istemci arabirimi bir web sayfasıdır. işlevinde dosyasından HTML içeriğini content/index.html index okuduğumuz kabul edilir, proje kök index.html content klasörünüz altında dizinde yeni bir dosya oluşturun. Ve aşağıdaki içeriği kopyalayın.

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

Neredeyse bitti. Son adım, SignalR Hizmeti'nin bağlantı dizesini Azure İşlevi ayarlarına ayarlamaktır.
1. Azure portalın açık olduğu tarayıcıda portalın üst kısmındaki arama kutusundan adını arayarak önceden dağıttığınız SignalR Hizmeti örneğinin başarılı bir şekilde oluşturulduğundan emin olun. Açmak için örneği seçin.
2. SignalR Hizmeti örneğinin bağlantı dizelerini görüntülemek için Anahtarlar’ı seçin.
3. Birincil bağlantı dizesini kopyalayın. Ve aşağıdaki komutu yürütün.
```
func settings add AzureSignalRConnectionString "<signalr-connection-string>"
```
Azure İşlevi'ne yerel olarak çalıştırın:
```
func start
```
Azure İşlevi yerel olarak çalıştır çalıştırktan sonra. Ziyaret etmek için tarayıcınızı http://localhost:7071/api/index kullanın; geçerli yıldız sayısını görebilir. Yıldız veya yıldız yıldızlarını GitHub, birkaç saniyede bir yenilenen bir yıldız sayısı elde olur.

Not

SignalR bağlaması için Azure Depolama gerekir, ancak İşlev yerel olarak çalıştırılabilirken yerel depolama öykünücüsü kullanabilirsiniz. İndirmeniz ve etkinleştirmeniz There was an error performing a read operation on the Blob Storage Secret Repository. Please ensure the 'AzureWebJobsStorage' connection string is valid. gerekiyor gibi bir hatayla karşılaştı Depolama Emulator

Sorun mu var? Sorun giderme kılavuzunu deneyin veya bize haber ver

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:

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.
Açılan pencerede kaynak grubunu seçin ve Kaynak grubunu sil’e tıklayın.
Yeni pencerede, silmek için kaynak grubunun adını yazıp Sil öğesine tıklayın.

Sorun mu var? Sorun giderme kılavuzunu deneyin veya bize haber ver.

Sonraki adımlar

Bu hızlı başlangıçta, yerel olarak gerçek zamanlı bir sunucusuz uygulama yaptı ve bu uygulamayı başlattın. Daha fazla bilgi için SignalR Hizmeti bağlamalarını Azure İşlevleri. 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 Service bağlamaları

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

VS Code ile Azure İşlevlerini dağıtma

Hızlı Başlangıç: Azure İşlevleri ve SignalR Service ile yıldız sayısını GitHub gösteren Azure İşlevleri JavaScript kullanma

Lütfen deneyiminizi değerlendirin

Önkoşullar

Azure'da oturum açma

Azure SignalR Hizmeti örneği oluşturma

Azure İşlevi'nin kurulumunu ve çalıştırması

Kaynakları temizleme

Sonraki adımlar