LearningSky.io

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

Archer -

內容

  • 學習目標
  • 前置準備作業
  • 建立 Azure SignalR Service
  • 建立 Azure Functions
  • 撰寫 Web 程式
  • 執行 Web 程式
  • 透過 Postman 測試

學習目標

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

前置準備作業

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

建立 Azure SignalR Service

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

Step 2. 點選 + Create

Step 3. 輸入相關資訊

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

Step 4. 建立服務

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

Step 5. 點選 Go to resource

Step 6. 啟用 Severless 服務模式

  • 點選左側的 Settings > Service Mode 中的 Serverless > 再點選上方的 Save

Step 7. 取得 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

  • 選擇 SignalR negotiate HTTP trigger

  • Template details 輸入相關資訊
    • New Function 欄位請輸入 negotiate
    • 中樞名稱 欄位請輸入 Azure SignalR Service 所建立的服務名稱
    • SignalR Service 連線 欄位請點選 New
      • Key 欄位請輸入 AzureSignalRConnectionString
      • Value 欄位請輸入 Azure SignalR Service 所取得 Connection String
    • 當輸入完成後點選 Create

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

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

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

Step 7. 建立 broadcast

  • 回到剛才所建立的 Function 頁面

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

  • 選擇 SignalR negotiate HTTP trigger

  • Template details 輸入相關資訊
    • New Function 欄位請輸入 broadcast
    • 中樞名稱 欄位請輸入 Azure SignalR Service 所建立的服務名稱
    • SignalR Service 連線 欄位請點選 New
      • Key 欄位請輸入 AzureSignalRConnectionString
      • Value 欄位請輸入 Azure SignalR Service 所取得 Connection String
    • 當輸入完成後點選 Create

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

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

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

撰寫 Web 程式

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

Step 2. 修改 URL

  • 請點選剛才所建立的 Azure Function 左側的 Overview 即可在右側看到需要的 URL，再將此 URL 貼到 index.html 中第 9 行中的 請輸入 Signalr 的 Azure Function URL 的位置

執行 Web 程式

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

Step 2. 啟動 index.html

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

  • 啟動後畫面

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

  • 下載 Ngrok

  • 於終端機輸入下方指令

    ./ngrok http 5500

  • 複製 https 的網址

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

  • 新開瀏覽器頁籤並輸入上上步驟所複製 https 的網址並開啟主控台

透過 Postman 測試

Step 1. 下載 Postman 並安裝

Step 2. 設定 Request

  • Body
    • 選擇 raw 與 JSON
    • 內容如下
      {
  "sender": "other",
  "text": "test"
}

Step 3. 送出 Request

  • 點選 Send 如果成功右下角會出現 Status: 200 OK

Step 4. 剛才透過瀏覽器開啟的 Web 會收到 Postman 傳送過來的資訊

Reference

GitHub

List of blogs