Alıştırma - SignalR Hizmeti’ni kullanarak bir web uygulamasında otomatik güncelleştirmeleri etkinleştirme

  • 12 dakika

Bu prototipe SignalR eklemek için şunları oluşturmanız gerekir:

  • Azure SignalR kaynağı
  • SignalR'yi desteklemek için birkaç yeni işlev
  • İstemciyi SignalR'yi destekleyecek şekilde güncelleştirme

SignalR kaynağı oluşturma

Bir Azure SignalR kaynağı oluşturmanız gerekir.

  1. SignalR kaynağını oluşturmak için terminale dönün.

  2. Kaynağı oluşturmak için setup-resources alt dizine gidin.

    cd stock-prototype/setup-resources && bash create-signalr-resources.sh & cd ..

  3. SignalR kaynağının bağlantı dizesi kopyalayın. Sunucu kodunu güncelleştirmek için buna ihtiyacınız olacaktır.

    Kaynak Türü Ortam değişkeni
    Azure SignalR SIGNALR_CONNECTION_STRING olarak adlandırılır

Sunucu yapılandırma ortamı değişkenlerini güncelleştirme

./start/server/local.settings.json içinde, terminalde listelenen değerle adlı SIGNALR_CONNECTION_STRING Values nesnesine bir değişken ekleyin ve dosyayı kaydedin.

İşlevi signalr-open-connection oluşturma

Web istemcisi, sunucuyla bağlantı kurmak için SignalR istemcisi SDK’sını kullanır. SDK, hizmete bağlanmak için signalr-open-connection adlı bir işlev aracılığıyla bağlantıyı alır.

  1. F1’e basarak Visual Studio Code komut paletini açın.

  2. Azure İşlevleri: İşlev Oluştur komutunu arayın ve seçin.

  3. Varsayılanı ayarla'yı ve ardından başlat/sunucu'ya seçerek İşlev uygulamasının konumunu ayarlayın.

  4. VS Code ile kullanmak üzere projeyi başlatmanız istendiğinde Evet'i seçin.

  5. İstendiğinde aşağıdaki bilgileri girin.

    Veri Akışı Adı Değer
    Template HTTP Tetikleyicisi
    Veri Akışı Adı signalr-open-connection

    signalr-open-connection.ts adlı bir dosya artık adresinde ./start/server/src/functionskullanılabilir.

  6. signalr-open-connection.ts açın ve her şeyi aşağıdaki kodla değiştirin.

    import { app, input } from '@azure/functions';

const inputSignalR = input.generic({
    type: 'signalRConnectionInfo',
    name: 'connectionInfo',
    hubName: 'default',
    connectionStringSetting: 'SIGNALR_CONNECTION_STRING',
});

app.http('open-signalr-connection', {
    authLevel: 'anonymous',
    handler: (request, context) => {
        return { body: JSON.stringify(context.extraInputs.get(inputSignalR)) }
    },
    route: 'negotiate',
    extraInputs: [inputSignalR]
});

    SignalR bağlantı bilgileri işlevinden döndürülür.

İşlevi signalr-send-message oluşturma

  1. F1’e basarak Visual Studio Code komut paletini açın.

  2. Azure İşlevleri: İşlev Oluştur komutunu arayın ve seçin.

  3. İşlev uygulamasının başlangıç/sunucu olarak konumunu seçin.

  4. İstendiğinde aşağıdaki bilgileri girin.

    Veri Akışı Adı Değer
    Template Azure Cosmos DB tetikleyicisi
    Veri Akışı Adı signalr-send-message
    Cosmos DB bağlantı dizesi COSMOSDB_CONNECTION_STRING
    İzlenecek veritabanı adı stocksdb
    Koleksiyon adı stocks
    Varlığı denetler ve kira koleksiyonunu otomatik olarak oluşturur true

    Güncelleştirmeleri görmek için Visual Studio Code’un Gezgin penceresini yenileyin. signalr-open-connection adlı bir dosya artık adresinde ./start/server/src/functionskullanılabilir.

  5. signalr-send-message.ts açın ve her şeyi aşağıdaki kodla değiştirin.

    import { app, output, CosmosDBv4FunctionOptions, InvocationContext } from "@azure/functions";

const goingOutToSignalR = output.generic({
    type: 'signalR',
    name: 'signalR',
    hubName: 'default',
    connectionStringSetting: 'SIGNALR_CONNECTION_STRING',
});

export async function dataToMessage(documents: unknown[], context: InvocationContext): Promise<void> {

    try {

        context.log(`Documents: ${JSON.stringify(documents)}`);

        documents.map(stock => {
            // @ts-ignore
            context.log(`Get price ${stock.symbol} ${stock.price}`);
            context.extraOutputs.set(goingOutToSignalR,
                {
                    'target': 'updated',
                    'arguments': [stock]
                });
        });
    } catch (error) {
        context.log(`Error: ${error}`);
    }
}

const options: CosmosDBv4FunctionOptions = {
    connection: 'COSMOSDB_CONNECTION_STRING',
    databaseName: 'stocksdb',
    containerName: 'stocks',
    createLeaseContainerIfNotExists: true,
    feedPollDelay: 500,
    handler: dataToMessage,
    extraOutputs: [goingOutToSignalR],
};

app.cosmosDB('send-signalr-messages', options);
  • Gelen verileri tanımlama: comingFromCosmosDB Nesne, değişiklikleri izlemek için Cosmos DB tetikleyicisini tanımlar.
  • Giden aktarımı tanımlama: goingOutToSignalR Nesnesi aynı SignalR bağlantısını tanımlar. hubName aynı hub'dır default.
  • Taşınacak verileri Bağlan: , dataToMessage tablodaki stocks değiştirilen öğeleri alır ve aynı hub'ı defaultkullanarak signalR aracılığıyla değiştirilen her öğeyi extraOutputs tek tek gönderir.
  • Uygulamaya Bağlan: app.CosmosDB Bağlamaları işlev adına send-signalr-messagesbağlar.

Değişiklikleri işleme ve GitHub'a gönderme

  1. Terminalde değişiklikleri depoya işleyin.

    git add .
git commit -m "Add SignalR functions"
git push

İşlevi signalr-send-message oluşturma

Azure'da yeni işlev kodunu yayımlayabileceğiniz bir işlev uygulaması ve ilgili kaynaklar oluşturun.

  1. Yeni bir işlev uygulaması oluşturmak için Azure portalını açın.

  2. Kaynak oluşturma temel bilgileri sekmesini tamamlamak için aşağıdaki bilgileri kullanın.

    Veri Akışı Adı Değer
    Kaynak grubu Yeni bir kaynak grubu adı stock-prototypeoluşturun.
    İşlev Uygulamasının adı Adınızı adresine postayla apiekleyin. Örneğin, api-jamie.
    Kod veya kapsayıcı Kodu seçin.
    Çalışma zamanı yığını Node.js’yi seçin.
    Sürüm Node.js lts sürümünü seçin.
    Bölge Size yakın bir bölge seçin.
    İşletim Sistemi Linux'ı seçin.
    Barındırma Tüketim Planı'nı seçin.

  3. Diğer sekmeleri doldurmayın ve Gözden geçir + oluştur'u ve ardından Oluştur'u seçin. Devam etmeden önce dağıtımın tamamlanmasını bekleyin.

  4. Yeni işlev uygulamasını açmak için Kaynağa git'i seçin.

GitHub dağıtımını yapılandırma

Sürekli dağıtımı etkinleştirmek için yeni işlev uygulamanızı GitHub deposuna Bağlan. Üretim ortamında, kod değişikliklerini üretim ortamına değiştirmeden önce hazırlama yuvasına dağıtırsınız.

  1. Yeni işlev uygulamasının Azure portalı sayfasında sol taraftaki menüden Dağıtım Merkezi'ni seçin.

  2. GitHub Kaynağı'nı seçin.

  3. Dağıtım yapılandırmasını tamamlamak için aşağıdaki bilgileri kullanın.

    Veri Akışı Adı Değer
    Kuruluş GitHub hesabınızı seçin.
    Depo mslearn-advocates.azure-functions-and-signalr araması yapın ve sonuçlardan bunu seçin.
    Şube Ana dalı seçin.
    İş Akışı Seçeneği İş akışı ekle .... öğesini seçin.
    Authentication type Kullanıcı tarafından atanan kimlik'i seçin.
    Abonelik Sayfanın üst kısmında gösterildiği gibi aynı aboneliği seçin.
    Kimlik Yeni oluştur’u seçin.

  4. Ayarları kaydetmek için bölümün üst kısmındaki Kaydet'i seçin. Bu, çatallanmış deponuzda yeni bir iş akışı dosyası oluşturur.

  5. Bu dağıtım yapılandırması, depoda bir GitHub Actions iş akışı dosyası oluşturur. İş akışı dosyasını işlev uygulaması için doğru paket yolunu kullanacak şekilde güncelleştirmeniz gerekir.

GitHub dağıtım iş akışını düzenleme

  1. Visual Studio Code terminalinde, çatalınızdan (kaynak) yeni iş akışı dosyasını aşağı çekin.

    git pull origin main

    Bu, .github'a iş akışı dosyanızın yolunu içeren yeni bir klasör yerleştirmelidir: '.github/workflows/main_RESOURCE_NAME.yml; burada RESOURCE_NAME Azure İşlevleri uygulama adıdır.

  2. İş akışı dosyasını açın.

  3. name Dosyanın en üstündeki değeri olarak Serverdeğiştirin.

  4. Kaynak depoda alt dizinde Azure İşlevleri uygulaması olduğundan, eylem dosyasının bunu yansıtacak şekilde değiştirilmesi gerekir. env bölümünde, paket yolunu kullanmak için adlı PACKAGE_PATH yeni bir değişken ekleyin.

    env:
  PACKAGE_PATH: 'start/server'

  5. Npm Kullanarak Proje Bağımlılıklarını Çözümle adımını bulun ve paket alt dizini yolunu da kullanmak için içeriği aşağıdaki YAML ile değiştirin. Kritik değişiklik, komutunda pushd değişkenin dahil olduğu env.PACKAGE_PATH yoldur.

    - name: 'Resolve Project Dependencies Using Npm'
  shell: bash
  run: |
    pushd './${{ env.AZURE_FUNCTIONAPP_PACKAGE_PATH }}/${{ env.PACKAGE_PATH }}'
    npm install
    npm run build --if-present
    npm run test --if-present
    popd

  6. Dağıtım adımı için Zip yapıtını bulun ve paket alt dizinini de kullanmak için içeriği aşağıdaki YAML ile değiştirin.

    - name: Upload artifact for deployment job
  uses: actions/upload-artifact@v3
  with:
    name: node-app
    path: release.zip

    Zip dosyası deponun köküne yerleştirilir, bu nedenle ../ zip dosyasını köke yerleştirmek için değer gereklidir.

  7. Dosyayı kaydedin ve değişiklikleri depoya işleyin.

    git add .
git commit -m "Update deployment workflow to use package path"
git push

    Bu değişiklik iş akışının çalıştırılmasını tetikler. GitHub'da çatalın Eylemler bölümünden iş akışını izleyebilirsiniz.

API işlevleri için ortam değişkenlerini yapılandırma

  1. Azure portalında Ayarlar -> Yapılandırma'yı ve ardından Yeni uygulama ayarı'nı seçin.

  2. Cosmos DB ve SignalR bağlantı dizesi ayarlarını girin. değerlerini local.settings.jsonstart/server klasöründe bulabilirsiniz.

    Veri Akışı Adı Değer
    COSMOSDB_CONNECTION_STRING Cosmos DB hesabının bağlantı dizesi.
    SIGNALR_CONNECTION_STRING SignalR hesabının bağlantı dizesi.

  3. Ayarları kaydetmek için Kaydet’i seçin.

API İşlevlerinin dağıtımını test edin

  1. Azure portalında Genel Bakış'ı seçin ve url'yi seçerek uygulamayı tarayıcıda açın.
  2. URL'yi kopyalayın; 7. Ünite'de çalışırken değerin BACKEND_URL istemci .env dosyasını güncelleştirirken buna ihtiyacınız olur.
  3. API işlevlerini test etmek için TARAYıCıDA URL'yi açın.
  4. Tarayıcıda URL'ye ekleyin /api/getStocks ve Enter tuşuna basın. Stok verileri içeren bir JSON dizisi görmeniz gerekir.

SignalR ile hisse senetlerini iade etmek için sunucu kodunu güncelleştirdiniz ve bir işlev uygulamasına dağıttınız. Ardından istemciyi güncelleştirmeleri almak için SignalR kullanacak şekilde güncelleştireceksiniz.