【 Cloud 】使用 Node.js 透過 Azure Functions 與 Azure Web PubSub Service 建立即時通訊 Web

內容

• 學習目標
• 前置準備作業
• 建立 Azure Web PubSub Service
• 建立 Azure Functions
• 撰寫 Node.js 版傳送與接收程式
• 撰寫 Web 程式
• 執行 Web 程式
• Node.js 傳送與 Web 接收測試

學習目標

• 如何使用 Node.js 透過 Azure Functions 與 Azure Web PubSub Service 建立即時通訊 Web。

前置準備作業

• 已建立 Azure 帳號並能正常登入
• 本地端電腦已安裝瀏覽器
• 已於電腦端安裝 Node.js
• 已於電腦端安裝 IDE，本範例使用 Visual Studio Code

建立 Azure Web PubSub Service

Step 1. 在上方搜尋框輸入 pubsub 關鍵字並點選 Web PubSub Service 的搜尋結果

Step 2. 點選 + Create

Step 3. 輸入相關資訊

• Subscription 欄位選擇所要使用的訂閱。
• Resource group 欄位輸入此 Web PubSub 所要歸屬於的群組。
• Resource Name 欄位輸入一個可識別的名稱。
• Region 欄位請選擇 Web PubSub 服務所要位於的資料中心。
• Pricing tier 欄位請選擇此 Web PubSub 服務所要使用的等級，請選擇 Standard。
• 當輸入完成後點選 Review + create。

Step 4. 建立服務

• 確認資訊正確則點選 Create。

Step 5. 點選 Go to resource

Step 6. 取得 Connection String

• 點選左側的 Keys > 再點選 Primary 中的 Connection string 右邊的複製按鈕

建立 Azure Functions

Step 1. 在上方搜尋框輸入 function 關鍵字並點選 Function App 的搜尋結果

Step 2. 點選 + Create

Step 3. 輸入相關資訊

• Subscription 欄位選擇所要使用的訂閱。
• Resource group 欄位輸入此 Function 所要歸屬於的群組。
• Function App name 欄位輸入一個可識別的名稱。
• Publish 欄位請選擇 Code。
• Runtime stack 欄位請選擇 Node.js。
• Version 欄位請選擇 14 LTS。
• Region 欄位請選擇 SignalR 服務所要位於的資料中心。
• 當輸入完成後點選 Review + create

Step 4. 建立服務

• 確認資訊正確則點選 Create

Step 5. 點選 Go to resource

Step 6. 建立 negotiate

• 點選左側的 Functions > 再點選上方的 + Create

• 選擇 HTTP trigger

• Template details 輸入相關資訊
  • New Function 欄位請輸入 negotiate
  • 當輸入完成後點選 Create

• 設定 negotiate
  • 點選左側的 Code + Test

• 點選上方的選單選擇 index.js 再輸入下方程式後再點選上方的 Save 按鈕

• 點選上方的選單選擇 function.json 再輸入下方的設定後再點選上方的 Save 按鈕

Step 7. 設定 Config

• 點選左側的 Configuration

• 點選 + New application setting

• 設定 Azure Web PubSub 連接字串
  • Name 欄位請輸入 PubSubConnectionString
  • Value 欄位請輸入建立 Azure Web PubSub 時所取得 Connection String
  • 當輸入完成後點選 OK

• 再點選 + New application setting

• 設定 Azure Web PubSub 的服務名稱
  • Name 欄位請輸入 PubSubHubName
  • Value 欄位請輸入建立 Azure Web PubSub 時所建立的名稱
  • 當輸入完成後點選 OK

• 點選 Save

• 點選 Continue

Step 8. 安裝套件

• 點選左側的 Advanced Tools > 再點選 Go →

• 點選上方的 Debug console > CMD

• 切換路徑到 negotiate 資料夾
  • 請輸入 cd site\wwwroot\negotiate

• 初始化專案
  • 請輸入 npm init -y

• 安裝 @azure/web-pubsub 套件 ( 需花一段時間進行安裝 )
  • 請輸入 npm install @azure/web-pubsub

• 安裝 dotenv 套件 ( 需花一段時間進行安裝 )
  • 請輸入 npm install dotenv

撰寫 Node.js 版傳送與接收程式

Step 1. 在本地端電腦建立 sub.js 且再輸入下方程式

• 修改第 4 行中的 請輸入 Azure Web PubSub Service 的 Connection String
• 修改第 5 行中的 請輸入 Azure Web PubSub Service 的名字

Step 2. 在本地端電腦建立 pub.js 且再輸入下方程式

• 修改第 3 行中的 請輸入 Azure Web PubSub Service 的 Connection String
• 修改第 4 行中的 請輸入 Azure Web PubSub Service 的名字

Step 3. 初始化專案

• 開啟終端機輸入下方指令

  npm init -y
  

Step 4. 安裝 ws 套件

• 在終端機輸入下方指令

  npm i ws
  

Step 5. 執行 sub.js 程式

• 在終端機輸入下方指令

  node sub.js
  

Step 6. 執行 pub.js 程式

• 另開一個終端機輸入下方指令

  node pub.js
  

• 在執行 sub.js 程式的終端機會收到 pub.js 程式所傳送過來的訊息

撰寫 Web 程式

Step 1. 在本地端電腦建立 index.html 且再輸入下方程式

• 修改程式中的 請輸入 Azure Function URL 為取得到的 URL

執行 Web 程式

Step 1. 請安裝 Live Server 於 Visual Studio Code

• 安裝網址
  • https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

Step 2. 啟動 index.html

• 點選 index.html 右鍵 > Open with Live Server

• 啟動後畫面

Step 3. 設定 CORS 於剛才所建立的 Azure Function

• 下載 Ngrok

  • 網址 https://ngrok.com/

• 於終端機輸入下方指令

  ./ngrok http 5500
  

• 複製 https 的網址

• 啟用 CORS
  • ① 點選所建立的 Azure Function 左側的 CORS
  • ② 勾選 Enable Access-Control-Allow-Credentials
  • ③ 在 Allowed Origins 欄位輸入上步驟所複製 https 的網址
  • ④ 當輸入完成後點選上方的 Save 按鈕

• 新開瀏覽器頁籤並輸入上上步驟所複製 https 的網址並開啟主控台
  • 需等待一段時間在主控台會收到一些資訊

Node.js 傳送與 Web 接收測試

Step 1. 再執行剛才的 pub.js 程式

• 於終端機輸入下方指令

  node pub.js
  

Step 2. 在剛才的網頁會收到 pub.js 程式所傳送來的資訊

Reference

• https://docs.microsoft.com/zh-tw/azure/azure-web-pubsub/

GitHub

• ArcherHuang @ GitHub

List of blogs

• https://oranwind.org/author/archer/
• https://learningsky.io/author/archer/