第一次接觸使用 Azure SignalR，順便玩玩看雲端託管的服務，那我們就來開始吧～

因為我習慣用 Vscode 開發，所以下面說明都是以 Vscode 為主。

安裝環境

查看 Azure Functions Core Tools 版本

1
func --Version

查看 dotnet core 版本

1
dotnet --Version

登入 Azure 建立 Azuer SignalR

新增 SignalR service 如下圖設定。

SignalR 設定

注意：這篇介紹的是無伺服器的方式，所以 Service Mode 要選擇 Serverless。一個 Azure SignalR 只能選擇一個 Service Mode，所以傳統的 Classic 方式和 Serverless 只能擇一，兩者不能共用同一個 Service。

設定 Azure Function

  1. 開啟建立好的服務，複製主要連接字串。

複製主要連接字串

  1. 複製官網 sample

  2. 進入 src/chat/csharp。 將 local.settings.sample.json 重新命名為 local.settings.json。 將連接字串貼到 AzureSignalRConnectionString 並設定如下。

1
2
3
4
5
6
7
8
9
10
11
12
{
  "IsEncrypted": false,
  "Values": {
    "FUNCTIONS_WORKER_RUNTIME": "dotnet",
    "AzureSignalRConnectionString": "Your connection string here"
  },
  "Host": {
    "LocalHttpPort": 7071,
    "CORS": "http://127.0.0.1:8080,http://localhost:8080,https://azure-samples.github.io",
    "CORSCredentials": true
  }
}

注意：Host 的部分是在 local 測試時，為了避免 CORS 的限制所設定。請務必將 local 要測試的網域加到 CORS 的值裡面。

  1. 開啟 Functions.cs。 官方解釋如下：此函數應用程式中有兩個 HTTP 觸發的函式

  • GetSignalRInfo - 使用 SignalRConnectionInfo 輸入繫結來產生並傳回有效的連線資訊。

  • SendMessage - 在要求主體中接收聊天訊息，並使用 SignalR 輸出繫結來將訊息廣播給所有已連線的用戶端應用程式。

  1. 啟動 local function 測試。
1
func start

local function 啟動

Local Web 測試

  1. 因為瀏覽器若打開 html 頁面會預設使用 https 處理。所以為了避免 CORS 限制。請安裝啟動本機的 http 伺服器。 Live Server

Live Server

  1. 用 Live Server 開啟 sample html 範本 /docs/demo/chat-v2/index.html。

開啟 sample html 範本

  1. 自動開啟後，務必輸入 apiBaseUrl local 測試為 http://localhost:7071， Name 也是必填，請輸入聊天室的使用者名稱即可。

  2. 成功之後就可以輸入訊息測試。並能多開數個分頁，測試訊息的接收是否正常。

測試訊息接收

發布 Azure Function

Azure Functions

安裝完後請務必重開 VScode。接下來我們開始發布 Azure Function。

  1. 請務必確定 VScode 只開啟 src/chat/csharp 中的 csharp 資料夾。

csharp 資料夾

  1. 從擴充功能登入 Azure 帳號。

登入 Azure 帳號

  1. 選擇要發布的地方上傳。

上傳 Azure Functions

測試連線上 Azure Functions

  1. 拷貝 Azure Function url，將 html 中 apiBaseUrl 改為線上的 url。

Copy Azure Function url

修改 apiBaseUrl

  1. 因為不同網域去打 API 會有 CORS 的限制，所以需要將測試的網址加到 Azure Function CORS 清單。

功能設定

CORS 清單

  1. 一樣使用 Live Server 開啟範本，就會成功連上囉~

把 web 放到線上 server 測試

注意：剛剛上面都是使用 local web 測試。若要把 web 放在線上測試的話，需要在 Azure Function 設定連線變數。官網沒寫這段，害我鬼打牆了好一陣子呀～怎麼設定變數如下圖。

Configuration

Add Variable

記得如果是線上 web 都要把網域再加到 CORS 清單喔～

以上是無伺服器的雲端 Azure SignalR 基本安裝與設定，如果要玩地端的話可以參考官方這篇，那我們下次見～

參考資料