Latihan – Mengaktifkan pembaruan otomatis dalam aplikasi web menggunakan SignalR Service

  • 12 menit

Untuk menambahkan SignalR ke prototipe ini, Anda perlu membuat:

  • Sumber daya Azure SignalR
  • Beberapa fungsi baru untuk mendukung SignalR
  • Memperbarui klien untuk mendukung SignalR

Membuat sumber daya SignalR

Anda perlu membuat sumber daya Azure SignalR.

  1. Kembali ke terminal untuk membuat sumber daya SignalR.

  2. Navigasi ke setup-resources subdirektori untuk membuat sumber daya.

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

  3. Salin string koneksi untuk sumber daya SignalR. Anda akan memerlukan ini untuk memperbarui kode server.

    Jenis Sumber Daya Variabel lingkungan
    Azure SignalR Disebut sebagai SIGNALR_CONNECTION_STRING

Memperbarui variabel lingkungan konfigurasi server

Di ./start/server/local.settings.json, tambahkan variabel ke objek Nilai bernama SIGNALR_CONNECTION_STRING dengan nilai yang tercantum di terminal dan simpan file.

signalr-open-connection Membuat fungsi

Klien web menggunakan SDK klien SignalR untuk membuat koneksi ke server. SDK mengambil koneksi melalui fungsi bernama signalr-open-connection untuk terhubung ke layanan.

  1. Buka Palet Perintah Visual Studio Code dengan menekan F1.

  2. Cari dan pilih perintah Azure Functions: Buat Fungsi.

  3. Pilih Atur default lalu pilih mulai/server untuk mengatur lokasi aplikasi Fungsi.

  4. Pilih Ya saat diminta untuk Menginisialisasi proyek untuk digunakan dengan Visual Studio Code?.

  5. Jika diminta, berikan informasi berikut.

    Nama Nilai
    Templat Pemicu HTTP
    Nama signalr-open-connection

    File bernama signalr-open-connection.ts sekarang tersedia di ./start/server/src/functions.

  6. Buka signalr-open-connection.ts dan ganti semuanya dengan kode berikut.

    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]
});

    Informasi koneksi SignalR dikembalikan dari fungsi .

signalr-send-message Membuat fungsi

  1. Buka Palet Perintah Visual Studio Code dengan menekan F1.

  2. Cari dan pilih perintah Azure Functions: Buat Fungsi.

  3. Pilih lokasi aplikasi Fungsi sebagai mulai/server.

  4. Jika diminta, berikan informasi berikut.

    Nama Nilai
    Templat Pemicu Azure Cosmos DB
    Nama signalr-send-message
    String koneksi Cosmos DB COSMOSDB_CONNECTION_STRING
    Nama database yang akan dipantau stocksdb
    Nama koleksi stocks
    Memeriksa keberadaan dan secara otomatis membuat koleksi sewa benar

    Refresh jendela Explorer di Visual Studio Code untuk melihat pembaruan. File bernama signalr-open-connection sekarang tersedia di ./start/server/src/functions.

  5. Buka signalr-send-message.ts dan ganti semuanya dengan kode berikut.

    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);
  • Tentukan data masuk: comingFromCosmosDB Objek menentukan pemicu Cosmos DB untuk mengawasi perubahan.
  • Tentukan transportasi keluar: Objek goingOutToSignalR menentukan koneksi SignalR yang sama. HubName adalah hub defaultyang sama.
  • Menyambungkan data ke transportasi: Mendapatkan item yang diubah dalam stocks tabel dan mengirim setiap item yang diubah satu per satu melalui SignalR menggunakan extraOutputs hub defaultyang dataToMessage sama .
  • Sambungkan ke aplikasi: Mengikat app.CosmosDB pengikatan ke nama send-signalr-messagesfungsi .

Menerapkan perubahan dan mendorong ke GitHub

  1. Di terminal, terapkan perubahan pada repositori.

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

signalr-send-message Membuat fungsi

Buat aplikasi fungsi dan sumber daya terkait di Azure tempat Anda dapat menerbitkan kode fungsi baru.

  1. Buka portal Azure untuk membuat aplikasi fungsi baru.

  2. Gunakan informasi berikut untuk menyelesaikan tab Dasar pembuatan sumber daya.

    Nama Nilai
    Grup sumber daya Buat nama stock-prototypegrup sumber daya baru .
    Nama Aplikasi Fungsi Pascapending nama Anda ke api. Contohnya,api-jamie.
    Kode atau kontainer Pilih kode.
    Tumpukan runtime Pilih Node.js.
    Versi Pilih versi LTS Node.js.
    Wilayah Pilih wilayah yang dekat dengan Anda.
    Sistem Operasi Pilih Linux.
    Hosting Pilih Paket Konsumsi.

  3. Jangan isi tab lain dan pilih Tinjau + buat lalu pilih Buat. Tunggu hingga penerapan selesai sebelum melanjutkan.

  4. Pilih Buka sumber daya untuk membuka aplikasi fungsi baru.

Mengonfigurasi penyebaran GitHub

Hubungkan aplikasi fungsi baru Anda ke repositori GitHub untuk mengaktifkan penyebaran berkelanjutan. Di lingkungan produksi, Anda akan menyebarkan perubahan kode ke slot penahapan sebelum menukarnya ke dalam produksi.

  1. Di halaman portal Azure untuk aplikasi fungsi baru, pilih Pusat Penyebaran dari menu sebelah kiri.

  2. Pilih Sumber GitHub.

  3. Gunakan informasi berikut untuk menyelesaikan konfigurasi penyebaran.

    Nama Nilai
    Organization Pilih akun GitHub Anda.
    Repositori Cari dan pilih mslearn-advocates.azure-functions-and-signalr.
    Cabang Pilih cabang utama.
    Opsi Alur Kerja Pilih Tambahkan alur kerja ....
    Jenis autentikasi Pilih Identitas yang ditetapkan pengguna.
    Langganan Pilih langganan yang sama seperti yang terlihat di bagian atas halaman.
    Identitas Pilih Buat baru.

  4. Pilih Simpan di bagian atas bagian untuk menyimpan pengaturan. Ini membuat file alur kerja baru di repositori fork Anda.

  5. Konfigurasi penyebaran ini membuat file alur kerja GitHub Actions di repositori. Anda perlu memperbarui file alur kerja untuk menggunakan jalur paket yang benar untuk aplikasi fungsi.

Pada titik ini, penyebaran GitHub Anda mungkin menghasilkan kesalahan karena konfigurasi yang salah dalam identitas terkelola yang ditetapkan pengguna yang dibuat di grup sumber daya Anda di Azure.

Memperbarui identitas terkelola

  1. Di halaman aplikasi fungsi baru Anda di portal Azure, pilih grup sumber daya Anda di EsensiAlat Gambaran Umum>, lalu pilih identitas terkelola di bawah Sumber Daya. Identitas terkelola ini dibuat oleh Functions saat Anda mengaktifkan penyebaran GitHub.
  2. Di halaman Identitas Terkelola, pilih Pengaturan>Kredensial federasi lalu pilih kredensial yang ada.
  3. Di Sambungkan akun Github Anda, ubah pengaturan untuk Entitas ke Lingkungan dan masukkan Production untuk Lingkungan.
  4. Pilih Perbarui untuk memperbarui kredensial.

Edit alur kerja penyebaran GitHub

  1. Di terminal Visual Studio Code, tarik ke bawah file alur kerja baru dari fork Anda (asal).

    git pull origin main

    Ini harus menempatkan folder baru di .github dengan jalur ke file alur kerja Anda: .github/workflows/main_RESOURCE_NAME.yml di mana RESOURCE_NAME adalah nama aplikasi fungsi.

  2. Buka file alur kerja dan ubah name nilai di bagian atas file menjadi Server.

  3. Karena repositori sumber memiliki aplikasi fungsi dalam subdirektori, file tindakan perlu berubah untuk mencerminkan itu. Di bagian env , tambahkan variabel baru bernama PACKAGE_PATH untuk menggunakan jalur paket.

    env:
  PACKAGE_PATH: 'start/server'

  4. Temukan langkah Atasi Dependensi Proyek Menggunakan Npm dan ganti konten dengan YAML berikut untuk juga menggunakan jalur subdirektori paket. Perubahan kritis adalah jalur dalam pushd perintah untuk menyertakan env.PACKAGE_PATH variabel.

    - 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

  5. Temukan artefak Zip untuk langkah penyebaran dan ganti konten dengan YAML berikut untuk juga menggunakan jalur subdirektori paket.

    - name: Zip artifact for deployment
  run: |
    pushd './${{ env.AZURE_FUNCTIONAPP_PACKAGE_PATH }}/${{ env.PACKAGE_PATH }}'
    zip -r release.zip .
    popd
    cp ./${{ env.AZURE_FUNCTIONAPP_PACKAGE_PATH }}/${{ env.PACKAGE_PATH }}/release.zip ./release.zip

    File zip ditempatkan di akar repositori sehingga ../ nilai diperlukan untuk menempatkan file zip di root.

  6. Simpan file dan terapkan perubahan ke repositori.

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

    Perubahan ini akan memicu alur kerja untuk dijalankan. Anda dapat menonton alur kerja dari bagian Tindakan fork di GitHub.

Mengonfigurasi variabel lingkungan untuk fungsi API

  1. Di portal Azure, temukan aplikasi fungsi Anda dan pilih Konfigurasi Pengaturan>lalu pilih Pengaturan aplikasi baru.

  2. Masukkan pengaturan untuk string koneksi Cosmos DB dan SignalR. Anda dapat menemukan nilai dalam local.settings.json start/server folder .

    Nama Nilai
    COSMOSDB_CONNECTION_STRING string koneksi untuk akun Cosmos DB.
    SIGNALR_CONNECTION_STRING string koneksi untuk akun SignalR.

  3. Pilih Simpan untuk menyimpan pengaturan.

Menguji penyebaran Fungsi API

  1. Di portal Azure, pilih Gambaran Umum dan pilih URL untuk membuka aplikasi di browser.
  2. Salin URL, Anda akan memerlukannya saat memperbarui file klien .env untuk BACKEND_URL nilai saat Anda bekerja di Unit 7.
  3. Buka URL di browser untuk menguji fungsi API.
  4. Tambahkan /api/getStocks ke URL di browser dan tekan Enter. Anda akan melihat array JSON dengan data stok.

Anda telah memperbarui kode server untuk mengembalikan saham dengan SignalR dan Anda telah menyebarkan ke aplikasi fungsi. Selanjutnya, Anda akan memperbarui klien untuk menggunakan SignalR untuk menerima pembaruan.