Quickstart: Create a chat room with Azure Functions and SignalR Service using Java

Azure SignalR Service lets you easily add real-time functionality to your application. Azure Functions is a serverless platform that lets you run your code without managing any infrastructure. In this quickstart, learn how to use SignalR Service and Functions to build a serverless, real-time chat application.

Prerequisites

This quickstart can be run on macOS, Windows, or Linux.

Make sure you have a code editor such as Visual Studio Code installed.

Install the Azure Functions Core Tools (v2) to run Azure Function apps locally.

Note

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).

In order to install extensions, Azure Functions Core Tools currently require the .NET Core SDK installed. However, no knowledge of .NET is required to build JavaScript Azure Function apps.

To develop functions app with Java, you must have the following installed:

If you don't have an Azure subscription, create a free account before you begin.

Log in to Azure

Sign in to the Azure portal at https://portal.azure.com/ with your Azure account.

Create an Azure SignalR Service instance

Your application will connect to a SignalR Service instance in Azure.

  1. Select the New button found on the upper left-hand corner of the Azure portal. In the New screen, type SignalR Service in the search box and press enter.

    Search for SignalR Service

  2. Select SignalR Service from the search results, then select Create.

  3. Enter the following settings.

    Setting Suggested value Description
    Resource name Globally unique name Name that identifies your new SignalR Service instance. Valid characters are a-z, 0-9, and -.
    Subscription Your subscription The subscription under which this new SignalR Service instance is created.
    Resource Group myResourceGroup 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 Try Azure SignalR Service for free.
    Unit count Not applicable Unit count specifies how many connections your SignalR Service instance can accept. It is only configurable in the Standard tier.

    Create SignalR Service

  4. 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. 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. Clone the sample app from GitHub, set the SignalR Service connection string, and run the application locally.

  1. 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
    

Configure and run the Azure Function app

  1. 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.

    Search for the SignalR Service instance

  2. Select Keys to view the connection strings for the SignalR Service instance.

  3. Select and copy the primary connection string.

    Create SignalR Service

  4. In your code editor, open the src/chat/java folder in the cloned repository.

  5. Rename local.settings.sample.json to local.settings.json.

  6. In local.settings.json, paste the connection string into the value of the AzureSignalRConnectionString setting. Save the file.

  7. The main file that contains the functions are in src/chat/java/src/main/java/com/function/Functions.java:

    • negotiate - Uses the SignalRConnectionInfo input binding to generate and return valid connection information.
    • 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. 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
    

Run the web application

  1. There is a sample single page web application hosted in GitHub for your convenience. Open your browser to https://azure-samples.github.io/signalr-service-quickstart-serverless-chat/demo/chat-v2/.

    Note

    The source of the HTML file is located at /docs/demo/chat-v2/index.html.

  2. When prompted for the function app base URL, enter http://localhost:7071.

  3. Enter a username when prompted.

  4. 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. Type a message and press enter. 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.

    Run the application

  6. 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.

Important

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. To 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. 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. 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

In this quickstart, you built and ran a real-time serverless application using Maven. Next, learn about how to create Java Azure Functions from scratch.