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.

Kembali ke terminal untuk membuat sumber daya SignalR.
Navigasi ke setup-resources subdirektori untuk membuat sumber daya.
```
cd setup-resources && bash create-signalr-resources.sh & cd ..
```
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

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.

Buka Palet Perintah Visual Studio Code dengan menekan F1.
Cari dan pilih perintah Azure Functions: Buat Fungsi.
Pilih Atur default lalu pilih mulai/server untuk mengatur lokasi aplikasi Fungsi.
Pilih Ya saat diminta untuk Menginisialisasi proyek untuk digunakan dengan Visual Studio Code?.
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.

Nama	Nilai
Templat	Pemicu HTTP
Nama	signalr-open-connection

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

Buka Palet Perintah Visual Studio Code dengan menekan F1.
Cari dan pilih perintah Azure Functions: Buat Fungsi.
Pilih lokasi aplikasi Fungsi sebagai mulai/server.

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.

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 dataToMessage dalam tabel dan mengirim setiap item yang diubah satu per satu melalui SignalR menggunakan stocks hub extraOutputsyang default sama .
Sambungkan ke aplikasi: Mengikat app.CosmosDB pengikatan ke nama send-signalr-messagesfungsi .

Menerapkan perubahan dan mendorong ke GitHub

Di terminal, terapkan perubahan pada repositori.

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

Membuat aplikasi Azure Functions

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

Buka portal Azure untuk membuat aplikasi fungsi baru.

Gunakan informasi berikut untuk menyelesaikan tab Dasar pembuatan sumber daya.

Nama	Nilai
Hosting	Pilih Paket Konsumsi.
Grup sumber daya	Buat nama `stock-prototype`grup 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.

Jangan isi tab lain dan pilih Tinjau + buat lalu pilih Buat. Tunggu hingga penerapan selesai sebelum melanjutkan.
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.

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

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.
Jenis autentikasi	Pilih Identitas yang ditetapkan pengguna.
Langganan	Pilih langganan yang sama seperti yang terlihat di bagian atas halaman.
Identitas	Pilih Buat baru.

Pilih Simpan di bagian atas bagian untuk menyimpan pengaturan. Ini membuat file alur kerja baru di repositori fork Anda.
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

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.
Buka file alur kerja dan ubah name nilai di bagian atas file menjadi Server.
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'
```

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

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.

Simpan file dan terapkan perubahan ke repositori.
```
git add .
git commit -m "Update deployment workflow to use package path"
git push origin main
```
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

Di portal Microsoft Azure, temukan aplikasi fungsi Anda dan pilih Pengaturan>variabel Lingkungan lalu pilih + Tambahkan.
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.
Pilih Simpan untuk menyimpan pengaturan.

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

Menguji penyebaran Fungsi API

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

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.