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.
  • Koneksi data yang akan diangkut: Mendapatkan dataToMessageitem yang diubah dalam stocks tabel dan mengirim setiap item yang diubah satu per satu melalui SignalR menggunakan extraOutputs hub defaultyang sama .
  • Koneksi 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

Koneksi 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 SumberGitHub.

  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.

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 Azure Functions.

  2. Buka file alur kerja.

  3. name Ubah nilai di bagian atas file menjadi Server.

  4. Karena repositori sumber memiliki aplikasi Azure Functions dalam subdirektori, file tindakan perlu berubah untuk mencerminkan hal tersebut. Di bagian env , tambahkan variabel baru bernama PACKAGE_PATH untuk menggunakan jalur paket.

    env:
  PACKAGE_PATH: 'start/server'

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

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

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

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

  7. 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, pilih Pengaturan -> Konfigurasi lalu pilih Pengaturan aplikasi baru.

  2. Masukkan pengaturan untuk string koneksi Cosmos DB dan SignalR. Anda dapat menemukan nilai dalam local.settings.jsonstart/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.