This repo contains a reusable solution that creates a complete serverless scenario for a chat application that stores data in Azure Cosmos DB, Azure Functions for hosting and event processing and Azure SignalR for websocket client messaging.
To achieve complete serverless, this solution is using:
- Azure Functions as a serverless Web host for static html/js/css files (the chat client).
- Azure Functions HTTP API to receive client calls to store data in Azure Cosmos DB using Output bindings.
- Azure Functions CosmosDB Trigger to send all generated chat lines to Azure SignalR.
- The web client is using Azure SignalR's npm package for connectivity and transport protocol resolution.
The solution will provision one Azure Function App with multiple Functions.
- FileServer: Acts as a serverless File server for static files that will let a Web client browse and obtain the files in the www folder.
- SaveChat: Will receive data from the connected Web clients and save it to Azure Cosmos DB.
- SignalRConfiguration: Will send the required information to the Web client to initialize SignalR Websocket connection.
- FeedToSignalR: Will trigger on new data in Azure Cosmos DB and broadcast it through Azure Signal R to all connected clients.
In order to support custom routes (particularly for the static Web host), it implements Azure Functions Proxies through a proxies.json file. So when browsing the base URL, it is instead calling one of the HTTP triggered Functions.
-
When the Web client loads the static resources, it pulls the SignalR configuration from SignalRConfiguration.
-
It will then negotiate with Azure SignalR the best transport protocol.
-
When the user writes a message, it will save it to Azure Cosmos DB via an Ajax call to SaveChat
-
The FeedToSignalR will trigger and broadcast it to all Azure SignalR connected clients.
This solution does not create any server instance on your subscription, it runs completely on Azure Function's Consumption Plan and consumes Azure Cosmos DB as a serverless database and Azure SignalR as a serverless websocket notification service.
- Have a pre-existing Azure Cosmos DB account to obtain the Connection String, the account needs to be a SQL API account. REMARKS: the format of the connection string should be "Endpoint=https://{cosmosdb-name}.service.signalr.net;AccessKey={key};".
- Create a database called chat and a collection called lines (it can be the smallest possible 400RU collection).
- Have a pre-existing Azure SignalR account to obtain the Connection String.
Clone this repo, fill out the local.settings.json file with the Connection Strings for Azure Cosmos DB and Azure SignalR and run it with F5!
Open your browser in the base address informed by the Azure Function's runtime (something along the lines of http://localhost:<some-port>
).
Just click in the Deploy to Azure button and it will guide you into automatically creating the Azure Function app with all the code deployed on Azure.
Open your browser in the base address informed by the Azure Function's Portal (something along the lines of https://<your-app-name>.azurewebsites.net
).
- The web client code was based on Azure SignalR's official samples repo.
- The Azure Function's static web server is based on @anthonychu's sample.