Quickstart: Create a serverless app with Azure Functions and SignalR Service using JavaScript

In this article, you use Azure SignalR Service, Azure Functions, and JavaScript to build a serverless application to broadcast messages to clients.

Prerequisites

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

Create an Azure SignalR Service instance

In this section, you create a basic Azure SignalR instance to use for your app. The following steps use the Azure portal to create a new instance, but you can also use the Azure CLI. For more information, see the az signalr create command in the Azure SignalR Service CLI Reference.

1. Sign in to the Azure portal.
2. In the upper-left side of the page, select + Create a resource.
3. On the Create a resource page, in the Search services and marketplace text box, enter signalr and then select SignalR Service from the list.
4. On the SignalR Service page, select Create.
5. On the Basics tab, you enter the essential information for your new SignalR Service instance. Enter the following values:

You don't need to change the settings on the Networking and Tags tabs for the SignalR tutorials.

6. Select the Review + create button at the bottom of the Basics tab.
7. On the Review + create tab, review the values and then select Create. It takes a few moments for deployment to complete.
8. When the deployment is complete, select the Go to resource button.
9. On the SignalR resource page, select Keys from the menu on the left, under Settings.
10. Copy the Connection string for the primary key. You need this connection string to configure your app later in this tutorial.

Setup function project

Make sure you have Azure Functions Core Tools installed.

1. Open a command line.
2. Create project directory and then change into it.
3. Run the Azure Functions func init command to initialize a new project.

func init --worker-runtime javascript --language javascript --model V4

Create the project functions

After you initialize a project, you need to create functions. This project requires three functions:

• index: Hosts a web page for a client.
• negotiate: Allows a client to get an access token.
• broadcast: Uses a time trigger to periodically broadcast messages to all clients.

When you run the func new command from the root directory of the project, the Azure Functions Core Tools creates the function source files storing them in a folder with the function name. You edit the files as necessary replacing the default code with the app code.

Create the index function

1. Run the following command to create the index function.

   func new -n index -t HttpTrigger
   

2. Edit src/functions/httpTrigger.js and replace the contents with the following json code:

   const { app } = require('@azure/functions');
   const fs = require('fs').promises;
   const path = require('path');
   
   app.http('index', {
       methods: ['GET', 'POST'],
       authLevel: 'anonymous',
       handler: async (request, context) => {
   
           try {
   
               context.log(`Http function processed request for url "${request.url}"`);
   
               const filePath = path.join(__dirname,'../content/index.html');
               const html = await fs.readFile(filePath);
   
               return {
                   body: html,
                   headers: {
                       'Content-Type': 'text/html'
                   }
               };
   
           } catch (error) {
               context.log(error);
               return {
                   status: 500,
                   jsonBody: error
               }
           }
       }
   });
   

Create the negotiate function

1. Run the following command to create the negotiate function.

   func new -n negotiate -t HttpTrigger
   

2. Edit src/functions/negotiate.js and replace the contents with the following json code:

   const { app, input } = require('@azure/functions');
   
   const inputSignalR = input.generic({
       type: 'signalRConnectionInfo',
       name: 'connectionInfo',
       hubName: 'serverless',
       connectionStringSetting: 'SIGNALR_CONNECTION_STRING',
   });
   
   app.post('negotiate', {
       authLevel: 'anonymous',
       handler: (request, context) => {
           try {
               return { body: JSON.stringify(context.extraInputs.get(inputSignalR)) }
           } catch (error) {
               context.log(error);
               return {
                   status: 500,
                   jsonBody: error
               }
           }
       },
       route: 'negotiate',
       extraInputs: [inputSignalR],
   });
   

Create a broadcast function.

1. Run the following command to create the broadcast function.

   func new -n broadcast -t TimerTrigger
   

2. Edit src/functions/broadcast.js and replace the contents with the following code:

   const { app, output } = require('@azure/functions');
   const getStars = require('../getStars');
   
   var etag = '';
   var star = 0;
   
   const goingOutToSignalR = output.generic({
       type: 'signalR',
       name: 'signalR',
       hubName: 'serverless',
       connectionStringSetting: 'SIGNALR_CONNECTION_STRING',
   });
   
   app.timer('sendMessasge', {
       schedule: '0 * * * * *',
       extraOutputs: [goingOutToSignalR],
       handler: async (myTimer, context) => {
   
           try {
               const response = await getStars(etag);
   
               if(response.etag === etag){
                   console.log(`Same etag: ${response.etag}, no need to broadcast message`);
                   return;
               }
           
               etag = response.etag;
               const message = `${response.stars}`;
   
               context.extraOutputs.set(goingOutToSignalR,
                   {
                       'target': 'newMessage',
                       'arguments': [message]
                   });
           } catch (error) {
               context.log(error);
           }
   
       }
   });
   

Create the index.html file

The client interface for this app is a web page. The index function reads HTML content from the content/index.html file.

1. Create a folder called content in your project root folder.

2. Create the file content/index.html.

3. Copy the following content to the content/index.html file and save it:

   <html>
   
   <body>
     <h1>Azure SignalR Serverless Sample</h1>
     <div>Instructions: Goto <a href="https://github.com/Azure/azure-signalr">GitHub repo</a> and star the repository.</div>
     <hr>
     <div>Star count: <div id="messages"></div></div>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/8.0.0/signalr.min.js"></script>
     <script>
       let messages = document.querySelector('#messages');
       const apiBaseUrl = window.location.origin;
       console.log(`apiBaseUrl: ${apiBaseUrl}`);
       const connection = new signalR.HubConnectionBuilder()
           .withUrl(apiBaseUrl + '/api')
           .configureLogging(signalR.LogLevel.Information)
           .build();
         connection.on('newMessage', (message) => {
           console.log(`message: ${message}`);
           document.getElementById("messages").innerHTML = message;
         });
   
         connection.start()
           .catch(console.error);
     </script>
   </body>
   
   </html>
   

Setup Azure Storage

Azure Functions requires a storage account to work. Choose either of the two following options:

• Run the free Azure Storage Emulator.
• Use the Azure Storage service. This may incur costs if you continue to use it.

func settings add AzureWebJobsStorage "<storage-connection-string>"

Add the SignalR Service connection string to the function app settings

You're almost done now. The last step is to set the SignalR Service connection string in Azure Function app settings.

1. In the Azure portal, go to the SignalR instance you deployed earlier.

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

   

3. Copy the primary connection string, and execute the command:

   func settings add AzureSignalRConnectionString "<signalr-connection-string>"
   

Run the Azure Function app locally

Run the Azure Function app in the local environment:

func start

After the Azure Function is running locally, go to http://localhost:7071/api/index. The page displays the current star count for the GitHub Azure/azure-signalr repository. When you star or unstar the repository in GitHub, you'll see the refreshed count every few seconds.

Having issues? Try the troubleshooting guide or let us know.

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.

Sample code

You can get all code used in the article from GitHub repository:

• aspnet/AzureSignalR-samples.

Next steps

In this quickstart, you built and ran a real-time serverless application in localhost. Next, learn more about how to bi-directional communicating between clients and Azure Function with SignalR Service.