快速入門:使用 Java 搭配 Azure Functions 與 SignalR Service 來建立聊天室Quickstart: Create a chat room with Azure Functions and SignalR Service using Java

Azure SignalR 服務可讓您輕鬆地新增即時功能到您的應用程式。Azure SignalR Service lets you easily add real-time functionality to your application. Azure Functions 是無伺服器平台,可讓您在不需要管理任何基礎結構的情況下執行您的程式碼。Azure Functions is a serverless platform that lets you run your code without managing any infrastructure. 在此快速入門中,了解如何使用 SignalR 服務與 Functions 來建置無伺服器的即時聊天應用程式。In this quickstart, learn how to use SignalR Service and Functions to build a serverless, real-time chat application.

必要條件Prerequisites

此快速入門可以在 macOS、Windows 或 Linux 上執行。This quickstart can be run on macOS, Windows, or Linux.

請確定您已安裝程式碼編輯器,如 Visual Studio Code (英文)。Make sure you have a code editor such as Visual Studio Code installed.

安裝 Azure Functions Core Tools (v2) 以在本機執行 Azure Function 應用程式。Install the Azure Functions Core Tools (v2) to run Azure Function apps locally.

注意

若要在 Java 中使用 SignalR Service 繫結,請確定您使用的是 2.4.419 版或更新版本的 Azure Functions Core Tools (主機版本 2.0.12332)。To use the SignalR Service bindings in Java, make sure you are using version 2.4.419 or higher of the Azure Functions Core Tools (host version 2.0.12332).

為了安裝延伸模組,Azure Functions Core Tools 目前需要安裝 .NET Core SDKIn order to install extensions, Azure Functions Core Tools currently require the .NET Core SDK installed. 不過,建置 JavaScript Azure Function 應用程式不需要 .NET 知識。However, no knowledge of .NET is required to build JavaScript Azure Function apps.

若要使用 Java 開發函式應用程式,您必須安裝下列項目:To develop functions app with Java, you must have the following installed:

如果您沒有 Azure 訂用帳戶,請在開始前建立免費帳戶If you don't have an Azure subscription, create a free account before you begin.

登入 AzureLog in to Azure

使用您的 Azure 帳戶登入 Azure 入口網站 (https://portal.azure.com/)。Sign in to the Azure portal at https://portal.azure.com/ with your Azure account.

建立 Azure SignalR 服務執行個體Create an Azure SignalR Service instance

您的應用程式將會連線至 Azure 中的 SignalR 服務執行個體。Your application will connect to a SignalR Service instance in Azure.

  1. 選取 Azure 入口網站左上角的 [新增] 按鈕。Select the New button found on the upper left-hand corner of the Azure portal. 在 [新增] 畫面的搜尋方塊中輸入 SignalR 服務並按 Enter。In the New screen, type SignalR Service in the search box and press enter.

    搜尋 SignalR 服務

  2. 從搜尋結果中選取 [SignalR 服務] ,然後選取 [建立] 。Select SignalR Service from the search results, then select Create.

  3. 輸入下列設定。Enter the following settings.

    設定Setting 建議的值Suggested value 說明Description
    資源名稱Resource name 全域唯一的名稱Globally unique name 能識別您的新 SignalR 服務執行個體的名稱。Name that identifies your new SignalR Service instance. 有效字元是 a-z0-9-Valid characters are a-z, 0-9, and -.
    訂用帳戶Subscription 您的訂用帳戶Your subscription 將在其下建立這個新 SignalR 服務執行個體的訂用帳戶。The subscription under which this new SignalR Service instance is created.
    資源群組Resource Group myResourceGroupmyResourceGroup 要在其中建立 SignalR 服務執行個體之新資源群組的名稱。Name for the new resource group in which to create your SignalR Service instance.
    位置Location 美國西部West US 選擇您附近的區域Choose a region near you.
    定價層Pricing tier 免費Free 免費試用 Azure SignalR 服務。Try Azure SignalR Service for free.
    單位計數Unit count 不適用Not applicable 單位計數會指出您的 SignalR 服務執行個體可接受的連線數目。Unit count specifies how many connections your SignalR Service instance can accept. 它只能在標準層中設定。It is only configurable in the Standard tier.
    服務模式Service mode 無伺服器Serverless 用於 Azure Functions 或 REST API。For use with Azure Functions or REST API.

    建立 SignalR 服務

  4. 選取 [建立] 以開始部署 SignalR 服務執行個體。Select Create to start deploying the SignalR Service instance.

  5. 在部署執行個體之後,請在入口網站中開啟它,然後找出其 [設定] 頁面。After the instance is deployed, open it in the portal and locate its Settings page. 只有透過 Azure Functions 繫結或 REST API 使用 Azure SignalR 服務時,才要將 [服務模式] 設定變更為 [無伺服器] 。Change the Service Mode setting to Serverless only if you are using Azure SignalR Service through Azure Functions binding or REST API. 否則,將它保留為 [傳統] 或 [預設] 。Leave it in Classic or Default otherwise.

複製範例應用程式Clone the sample application

在服務部署期間,讓我們來處理程式碼。While the service is deploying, let's switch to working with code. 複製 GitHub 上的範例應用程式 (英文),設定 SignalR 服務連接字串,然後在本機執行該應用程式。Clone the sample app from GitHub, set the SignalR Service connection string, and run the application locally.

  1. 開啟 git 終端機視窗。Open a git terminal window. 變更至您想要複製範例專案的資料夾。Change to a folder where you want to clone the sample project.

  2. 執行下列命令來複製範例存放庫。Run the following command to clone the sample repository. 此命令會在您的電腦上建立範例應用程式副本。This command creates a copy of the sample app on your computer.

    git clone https://github.com/Azure-Samples/signalr-service-quickstart-serverless-chat.git
    

設定及執行 Azure Function 應用程式Configure and run the Azure Function app

  1. 在開啟 Azure 入口網站的瀏覽器中,透過在入口網站頂端的搜尋方塊中搜尋您稍早部署的 SignalR 服務執行個體名稱,以確認該執行個體已成功建立。In the browser where the Azure portal is opened, confirm the SignalR Service instance you deployed earlier was successfully created by searching for its name in the search box at the top of the portal. 選取該執行個體以開啟它。Select the instance to open it.

    搜尋 SignalR 服務執行個體

  2. 選取 [金鑰] 以檢視 SignalR 服務執行個體的連接字串。Select Keys to view the connection strings for the SignalR Service instance.

  3. 選取並複製主要連接字串。Select and copy the primary connection string.

    建立 SignalR 服務

  4. 在您的程式碼編輯器中,開啟複製的存放庫中包含的 src/chat/java 資料夾。In your code editor, open the src/chat/java folder in the cloned repository.

  5. local.settings.sample.json 重新命名為 local.settings.jsonRename local.settings.sample.json to local.settings.json.

  6. local.settings.json 中,將連接字串貼到 AzureSignalRConnectionString 設定的值中。In local.settings.json, paste the connection string into the value of the AzureSignalRConnectionString setting. 儲存檔案。Save the file.

  7. 包含的函式的主要檔案位於 src/chat/java/src/main/java/com/function/Functions.javaThe main file that contains the functions are in src/chat/java/src/main/java/com/function/Functions.java:

    • negotiate - 使用 SignalRConnectionInfo 輸入繫結來產生並傳回有效的連線資訊。negotiate - Uses the SignalRConnectionInfo input binding to generate and return valid connection information.
    • sendMessage - 在要求本文中接收聊天訊息,並使用 SignalR 輸出繫結將訊息廣播給所有已連線的用戶端應用程式。sendMessage - Receives a chat message in the request body and uses the SignalR output binding to broadcast the message to all connected client applications.
  8. 在終端機中,確定您處於 src/chat/java 資料夾中。In the terminal, ensure that you are in the src/chat/java folder. 建置函式應用程式。Build the function app.

    mvn clean package
    
  9. 在本機執行函式應用程式。Run the function app locally.

    mvn azure-functions:run
    

執行 Web 應用程式Run the web application

  1. GitHub 中有裝載範例的單一頁面 Web 應用程式,以方便您使用。There is a sample single page web application hosted in GitHub for your convenience. 在瀏覽器中開啟 https://azure-samples.github.io/signalr-service-quickstart-serverless-chat/demo/chat-v2/Open your browser to https://azure-samples.github.io/signalr-service-quickstart-serverless-chat/demo/chat-v2/.

    注意

    HTML 檔案的來源位於 /docs/demo/chat-v2/index.htmlThe source of the HTML file is located at /docs/demo/chat-v2/index.html.

  2. 當系統提示您輸入函數應用程式基底 URL 時,請輸入 http://localhost:7071When prompted for the function app base URL, enter http://localhost:7071.

  3. 在收到系統提示時輸入使用者名稱。Enter a username when prompted.

  4. Web 應用程式會呼叫函數應用程式中的 GetSignalRInfo 函式,以擷取連線至 Azure SignalR 服務的連線資訊。The web application calls the GetSignalRInfo function in the function app to retrieve the connection information to connect to Azure SignalR Service. 連線完成時,螢幕會出現聊天訊息輸入方塊。When the connection is complete, the chat message input box appears.

  5. 輸入訊息,然後按 Enter。Type a message and press enter. 應用程式會將該訊息傳送至 Azure 函數應用程式中的 SendMessage 函式,該函式會使用 SignalR 輸出繫結將該訊息廣播至所有已連線的用戶端。The application sends the message to the SendMessage function in the Azure Function app, which then uses the SignalR output binding to broadcast the message to all connected clients. 如果一切皆運作正常,該訊息應該會出現在應用程式中。If everything is working correctly, the message should appear in the application.

    執行應用程式

  6. 在不同的瀏覽器視窗中開啟另一個 Web 應用程式執行個體。Open another instance of the web application in a different browser window. 您將會看見所有已傳送的訊息都會出現在該應用程式的所有執行個體中。You will see that any messages sent will appear in all instances of the application.

重要

HTML 頁面會使用 HTTPS 處理,但本機 Azure Functions 執行階段預設使用 HTTP,因此您的瀏覽器可能會強制使用混合內容原則,而封鎖從網頁向您的函式發出的要求。Because the HTML page is served using HTTPS, but the local Azure Functions runtime is using HTTP by default, your browser (such as Firefox) may enforce a mixed-content policy that blocks the requests from the web page to your functions. 為了解決這個問題,請使用沒有這項限制的瀏覽器,或在 /docs/demo/chat-v2 目錄中啟動本機 HTTP 伺服器,例如 http-serverTo solve this, use a browser that does not have this restriction or start a local HTTP server such as http-server in the /docs/demo/chat-v2 directory. 確定已將原點新增至 local.settings.json 中的 CORS 設定。Ensure the origin is added to the CORS setting in local.settings.json.

清除資源Clean up resources

如果您將不繼續使用此應用程式,請使用下列步驟來刪除本快速入門所建立的全部資源,這樣才不會產生任何費用:If you're not going to continue to use this app, delete all resources created by this quickstart with the following steps so you don't incur any charges:

  1. 在 Azure 入口網站中選取靠左側的 [資源群組] ,然後選取您所建立的群組。In the Azure portal, select Resource groups on the far left, and then select the resource group you created. 或者,您也可以使用搜尋方塊來依資源群組的名稱尋找它。Alternatively, you may use the search box to find the resource group by its name.

  2. 在開啟的視窗中選取資源群組,然後按一下 [刪除資源群組] 。In the window that opens, select the resource group, and then click Delete resource group.

  3. 在新視窗中輸入要刪除之資源群組的名稱,然後按一下 [刪除] 。In the new window, type the name of the resource group to delete, and then click Delete.

後續步驟Next steps

在此快速入門中,您已使用 Maven 建置並執行即時無伺服器應用程式。In this quickstart, you built and ran a real-time serverless application using Maven. 接著,請了解如何從頭建立 Java Azure Functions。Next, learn about how to create Java Azure Functions from scratch.