Cara: Membangun papan tulis kolaboratif real-time menggunakan Web PubSub untuk Socket.IO dan menyebarkannya ke Azure App Service

Kelas aplikasi baru menggambarkan kembali 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.

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 untuk Azure App Service. Aplikasi papan tulis dapat diakses di browser dan memungkinkan siapa pun dapat menggambar di kanvas yang sama.

Prasyarat

Untuk mengikuti panduan langkah demi langkah, Anda perlu

• Akun Azure . Jika Anda tidak memiliki langganan Azure, buat akun gratis Azure sebelum memulai.
• Azure CLI (versi 2.39.0 atau lebih tinggi) atau Azure Cloud Shell untuk mengelola sumber daya Azure.

Membuat sumber daya Azure menggunakan Azure CLI

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 "<resource-group-name>"
   

Membuat sumber daya Aplikasi Web

1. Buat paket App Service gratis.

   az appservice plan create \ 
     --resource-group "<resource-group-name>" \ 
     --name "<app-service-plan-name>" \ 
     --sku FREE
     --is-linux
   

2. Membuat sumber daya Aplikasi Web

   az webapp create \
     --resource-group "<resource-group-name>" \
     --name "<webapp-name>" \ 
     --plan "<app-service-plan-name>" \
     --runtime "NODE:16-lts"
   

Membuat Web PubSub untuk Socket.IO

1. Membuat sumber daya Web PubSub.

   az webpubsub create \
     --name "<socketio-name>" \
     --resource-group "<resource-group-name>" \
     --kind SocketIO
     --sku Premium_P1
   

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

   az webpubsub key show \
     --name "<socketio-name>" \
     --resource-group "<resource-group-name>"
   

Mendapatkan kode aplikasi

Jalankan perintah berikut untuk mendapatkan salinan kode aplikasi.

git clone https://github.com/Azure-Samples/socket.io-webapp-integration

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 menginstal dan membangun proyek.

   npm install
   npm run build
   
   # bash
   zip -r app.zip *
   
   # Poweshell
   

2. Memadatkan ke dalam zip

   Menggunakan Bash

   zip -r app.zip *
   

   Gunakan PowerShell

   Compress-Archive -Path * -DestinationPath 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 "<resource-group-name>" \
   --name "<webapp-name>" \
   --setting Web_PubSub_ConnectionString="<primaryConnectionString>"
   

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

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

Menampilkan aplikasi papan tulis di browser

Sekarang buka browser Anda dan kunjungi Aplikasi Web yang Anda sebarkan. Url biasanya adalah https://<webapp-name>.azurewebsites.net . Disarankan untuk membuka beberapa tab browser sehingga Anda dapat mengalami aspek kolaboratif real-time aplikasi. Atau lebih baik, bagikan tautan dengan kolega atau teman.

Langkah berikutnya

Lihat sampel Socket.IO lainnya