Bagikan melalui

Cara: membangun papan tulis kolaboratif real-time menggunakan Azure Web PubSub dan menyebarkannya ke Azure App Service

  • Artikel

Kelas aplikasi baru menata ulang apa yang bisa dilakukan oleh pekerjaan modern. Sementara Microsoft Word menyaingkan editor, Figma mengumpulkan perancang pada upaya kreatif yang sama. Kelas aplikasi ini dibangun berdasarkan pengalaman pengguna yang membuat kami merasa terhubung dengan kolaborator jarak jauh kami. Dari sudut pandang teknis, aktivitas pengguna perlu disinkronkan di seluruh layar pengguna dengan latensi rendah.

Penting

String koneksi mentah muncul dalam artikel ini hanya untuk tujuan demonstrasi.

String koneksi menyertakan informasi otorisasi yang diperlukan agar aplikasi Anda mengakses layanan Azure Web PubSub. Kunci akses di dalam string koneksi mirip dengan kata sandi root untuk layanan Anda. Di lingkungan produksi, selalu lindungi kunci akses Anda. Gunakan Azure Key Vault untuk mengelola dan memutar kunci Anda dengan aman dan mengamankan koneksi Anda dengan WebPubSubServiceClient.

Hindari mendistribusikan kunci akses ke pengguna lain, melakukan hard-coding, atau menyimpannya di mana saja dalam teks biasa yang dapat diakses orang lain. Putar kunci Anda jika Anda yakin bahwa kunci tersebut mungkin telah disusupi.

Gambaran Umum

Dalam panduan cara ini, kami mengambil pendekatan cloud-native dan menggunakan layanan Azure untuk membangun papan tulis kolaboratif real time dan kami menyebarkan proyek sebagai Aplikasi Web ke Azure App Service. Aplikasi papan tulis dapat diakses di browser dan memungkinkan siapa pun dapat menggambar di kanvas yang sama.

Gif dari proyek yang sudah selesai.

Lihat demo papan tulis langsung

Sistem

Nama layanan Azure Tujuan Keuntungan
Azure App Service Menyediakan lingkungan hosting untuk aplikasi backend, yang dibangun dengan Express Lingkungan yang dikelola sepenuhnya untuk backend aplikasi, tanpa perlu khawatir tentang infrastruktur tempat kode berjalan
Azure Web PubSub Menyediakan saluran pertukaran data dua arah latensi rendah antara aplikasi backend dan klien Secara drastis mengurangi beban server dengan membebaskan server dari mengelola koneksi WebSocket persisten dan menskalakan ke koneksi klien bersamaan 100 K hanya dengan satu sumber daya

Diagram arsitektur aplikasi papan tulis kolaboratif.

Prasyarat

Anda dapat menemukan penjelasan terperinci tentang aliran data di akhir panduan cara ini karena kami akan fokus membangun dan menyebarkan aplikasi papan tulis terlebih dahulu.

Untuk mengikuti panduan langkah demi langkah, Anda perlu

Membuat sumber daya Azure menggunakan Azure CLI

1. Masuk

  1. Masuk ke Azure CLI dengan menjalankan perintah berikut.

    az login

  2. Buat grup sumber daya di Azure.

    az group create \
  --location "westus" \  
  --name "whiteboard-group"

2. Buat sumber daya Aplikasi Web

  1. Buat paket App Service gratis.

    az appservice plan create \ 
  --resource-group "whiteboard-group" \ 
  --name "demo" \ 
  --sku FREE
  --is-linux

  2. Membuat sumber daya Aplikasi Web

    az webapp create \
  --resource-group "whiteboard-group" \
  --name "whiteboard-app" \ 
  --plan "demo" \
  --runtime "NODE:18-lts"

3. Membuat sumber daya Web PubSub

  1. Buat sumber daya Web PubSub.

    az webpubsub create \
  --name "whiteboard-app" \
  --resource-group "whiteboard-group" \
  --location "westus" \
  --sku Free_F1

  2. Tampilkan dan simpan nilai primaryConnectionString suatu tempat untuk digunakan nanti.

    String koneksi mentah muncul dalam artikel ini hanya untuk tujuan demonstrasi. Di lingkungan produksi, selalu lindungi kunci akses Anda. Gunakan Azure Key Vault untuk mengelola dan memutar kunci Anda dengan aman dan mengamankan koneksi Anda dengan WebPubSubServiceClient.

    az webpubsub key show \
  --name "whiteboard-app" \
  --resource-group "whiteboard-group"

Mendapatkan kode aplikasi

Jalankan perintah berikut untuk mendapatkan salinan kode aplikasi. Anda dapat menemukan penjelasan terperinci tentang aliran data di akhir panduan cara ini.

git clone https://github.com/Azure/awps-webapp-sample.git

Menyebarkan aplikasi ke App Service

  1. App Service mendukung banyak alur kerja penyebaran. Untuk panduan ini, kita akan menyebarkan paket ZIP. Jalankan perintah berikut untuk menyiapkan ZIP.

    npm install
npm run build
zip -r app.zip *

  2. Gunakan perintah berikut untuk menyebarkannya ke Azure App Service.

    az webapp deployment source config-zip \
--resource-group "whiteboard-group" \
--name "whiteboard-app" \
--src app.zip

  3. Atur string koneksi Azure Web PubSub di pengaturan aplikasi. Gunakan nilai yang primaryConnectionString Anda simpan dari langkah sebelumnya.

    az webapp config appsettings set \
--resource-group "whiteboard-group" \
--name "whiteboard-app" \
--setting Web_PubSub_ConnectionString="<primaryConnectionString>"

Mengonfigurasi server upstream untuk menangani peristiwa yang berasal dari Web PubSub

Setiap kali klien mengirim pesan ke layanan Web PubSub, layanan mengirimkan permintaan HTTP ke titik akhir yang Anda tentukan. Mekanisme inilah yang digunakan server backend Anda untuk memproses pesan lebih lanjut, misalnya, jika Anda dapat mempertahankan pesan dalam database pilihan.

Seperti halnya permintaan HTTP, layanan Web PubSub perlu mengetahui di mana menemukan server aplikasi Anda. Karena aplikasi backend sekarang disebarkan ke App Service, kami mendapatkan nama domain yang dapat diakses publik untuk aplikasi tersebut.

  1. Tampilkan dan simpan nilai di name suatu tempat.

    az webapp config hostname list \
  --resource-group "whiteboard-group"
  --webapp-name "whiteboard-app"

  2. Titik akhir yang kami putuskan untuk diekspos di server backend adalah /eventhandler dan hub nama untuk aplikasi papan tulis "sample_draw"

    az webpubsub hub create \ 
  --resource-group "whiteboard-group" \
  --name "whiteboard-app" \
  --hub-name "sample_draw" \
  --event-handler url-template="https://<Replace with the hostname of your Web App resource>/eventhandler" user-event-pattern="*" system-event="connected" system-event="disconnected"

Penting

url-template memiliki tiga bagian: protokol + nama host + jalur, yang dalam kasus kami adalah https://<The hostname of your Web App resource>/eventhandler.

Menampilkan aplikasi papan tulis di browser

Sekarang buka browser Anda dan kunjungi Aplikasi Web yang Anda sebarkan. Disarankan untuk membuka beberapa tab browser sehingga Anda dapat mengalami aspek kolaboratif aplikasi secara real time. Atau lebih baik, bagikan tautan dengan kolega atau teman.

Aliran Data

Gambaran Umum

Bagian aliran data mendalami cara aplikasi papan tulis dibuat. Aplikasi papan tulis memiliki dua metode transportasi.

  • Layanan HTTP ditulis sebagai aplikasi Express dan dihosting di App Service.
  • Koneksi WebSocket yang dikelola oleh Azure Web PubSub.

Dengan menggunakan Azure Web PubSub untuk mengelola koneksi WebSocket, beban pada Aplikasi Web berkurang. Selain mengautentikasi klien dan menyajikan gambar, Aplikasi Web tidak terlibat dalam sinkronisasi aktivitas menggambar. Aktivitas menggambar klien langsung dikirim ke Web PubSub dan disiarkan ke semua klien dalam grup.

Kapan saja, mungkin ada lebih dari satu klien menggambar. Jika Aplikasi Web mengelola koneksi WebSocket sendiri, Aplikasi Web harus menyiarkan setiap aktivitas menggambar ke semua klien lain. Lalu lintas dan pemrosesan yang besar adalah beban besar bagi server.

Klien, yang dibangun dengan Vue, membuat permintaan HTTP untuk Token Akses Klien ke titik /negotiateakhir . Aplikasi backend adalah aplikasi Express dan dihosting sebagai Aplikasi Web menggunakan Azure App Service.

Cuplikan layar langkah salah satu aliran data aplikasi.

Ketika aplikasi backend berhasil mengembalikan Token Akses Klien ke klien yang menghubungkan, klien menggunakannya untuk membuat koneksi WebSocket dengan Azure Web PubSub.

Cuplikan layar langkah dua aliran data aplikasi.

Jika jabat tangan dengan Azure Web PubSub berhasil, klien ditambahkan ke grup bernama draw, secara efektif berlangganan pesan yang diterbitkan ke grup ini. Selain itu, klien diberi izin untuk mengirim pesan ke draw grup.

Cuplikan layar langkah tiga aliran data aplikasi.

Catatan

Agar panduan cara ini tetap terfokus, semua klien yang terhubung ditambahkan ke grup yang sama bernama draw dan diberi izin untuk mengirim pesan ke grup ini. Untuk mengelola koneksi klien pada tingkat terperinci, lihat referensi lengkap API yang disediakan oleh Azure Web PubSub.

Azure Web PubSub memberi tahu aplikasi backend bahwa klien telah tersambung. Aplikasi backend menangani onConnected peristiwa dengan memanggil sendToAll(), dengan payload jumlah terbaru klien yang terhubung.

Cuplikan layar langkah empat aliran data aplikasi.

Catatan

Penting untuk dicatat bahwa jika ada sejumlah besar pengguna online dalam draw grup, dengan satu panggilan jaringan dari aplikasi backend, semua pengguna online akan diberi tahu bahwa pengguna baru baru saja bergabung. Ini secara drastis mengurangi kompleksitas dan beban aplikasi backend.

Segera setelah klien membuat koneksi persisten dengan Web PubSub, klien membuat permintaan HTTP ke aplikasi backend untuk mengambil bentuk dan data latar belakang terbaru di /diagram. Layanan HTTP yang dihosting di App Service dapat dikombinasikan dengan Web PubSub. App Service menangani penyajian titik akhir HTTP, sementara Web PubSub mengurus pengelolaan koneksi WebSocket.

Cuplikan layar langkah lima aliran data aplikasi.

Sekarang setelah klien dan aplikasi backend memiliki dua cara untuk bertukar data. Salah satunya adalah siklus respons permintaan HTTP konvensional dan yang lainnya adalah saluran dua arah yang persisten melalui Web PubSub. Tindakan menggambar, yang berasal dari satu pengguna dan perlu disiarkan ke semua pengguna segera setelah itu terjadi, dikirimkan melalui Web PubSub. Ini tidak memerlukan keterlibatan aplikasi backend.

Cuplikan layar langkah enam aliran data aplikasi.

Membersihkan sumber daya

Meskipun aplikasi hanya menggunakan tingkat gratis dari kedua layanan, praktik terbaik adalah menghapus sumber daya jika Anda tidak lagi membutuhkannya. Anda dapat menghapus grup sumber daya bersama dengan sumber daya di dalamnya menggunakan perintah berikut,

az group delete 
  --name "whiteboard-group"

Langkah berikutnya

Lihat lebih banyak demo yang dibangun dengan Web PubSub