Add the following code to the file:<\/li>\n<\/ol>\n<!DOCTYPE html>\n<html>\n<head>\n <title>Chat<\/title>\n <script src=\"https:\/\/code.jquery.com\/jquery-3.5.1.min.js\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@microsoft\/signalr@3.1.8\/dist\/browser\/signalr.min.js\"><\/script>\n<\/head>\n<body>\n <h1>Chat<\/h1>\n <div>\n <input type=\"text\" id=\"username\" placeholder=\"Enter your username\" \/>\n <button id=\"join\">Join<\/button>\n <\/div>\n <div>\n <textarea id=\"messages\" cols=\"50\" rows=\"10\"><\/textarea>\n <\/div>\n <div>\n <input type=\"text\" id=\"message\" placeholder=\"Enter your message\" \/>\n <button id=\"send\">Send<\/button>\n <\/div>\n <script>\n \/\/ TODO: Add SignalR client code here\n <\/script>\n<\/body>\n<\/html>\n<\/code><\/pre>\nThis code creates a simple chat UI with an input field to enter your username, a button to join the chat, a textarea to display all the messages, an input field to enter your message, and a button to send your message.<\/p>\n
\n- Add the following code inside the
TODO<\/code> block to create a SignalR client and handle the “join” and “send” button clicks:<\/li>\n<\/ol>\nconst usernameInput = document.getElementById(\"username\");\nconst joinButton = document.getElementById(\"join\");\nconst messagesTextarea = document.getElementById(\"messages\");\nconst messageInput = document.getElementById(\"message\");\nconst sendButton = document.getElementById(\"send\");\n\n\/\/ Create a new SignalR connection\nconst connection = new signalR.HubConnectionBuilder()\n .withUrl(\"https:\/\/your-signalr-service-name.service.signalr.net\/client\/?access_token=your-access-token\")\n .configureLogging(signalR.LogLevel.Information)\n .build();\n\n\/\/ Handle the \"join\" button click\njoinButton.addEventListener(\"click\", async () => {\n const username = usernameInput.value;\n await connection.start();\n connection.invoke(\"Join\", username);\n});\n\n\/\/ Handle the \"send\" button click\nsendButton.addEventListener(\"click\", async () => {\n const message = messageInput.value;\n const username = usernameInput.value;\n connection.invoke(\"Send\", username, message);\n messageInput.value = \"\";\n});\n\n\/\/ Handle incoming messages\nconnection.on(\"ReceiveMessage\", (username, message) => {\n messagesTextarea.value += `${username}: ${message}n`;\n});\n<\/code><\/pre>\nThis code creates a new SignalR connection, handles the “join” button click by starting the connection and invoking the “Join” method on the server, handles the “send” button click by invoking the “Send” method on the server and clearing the message input field, and handles incoming messages by appending them to the textarea.<\/p>\n
Step 3 – Set up Azure Functions<\/h2>\n
Now that we have our front-end client set up, we need to create some Azure Functions that will handle the “Join” and “Send” methods on the server.<\/p>\n
\n- Open the “index.js” file in your project directory and replace the existing code with the following code:<\/li>\n<\/ol>\n
const { CosmosClient } = require(\"@azure\/cosmos\");\nconst { v4: uuidv4 } = require(\"uuid\");\nconst signalR = require(\"@microsoft\/signalr\");\n\nconst connectionString = \"your-cosmos-db-connection-string\";\nconst containerName = \"messages\";\nconst databaseName = \"chat\";\n\nmodule.exports = async function (context, req) {\n const client = new CosmosClient(connectionString);\n const database = client.database(databaseName);\n const container = database.container(containerName);\n\n if (req.query.method === \"Join\") {\n await join(context, container, req.body);\n } else if (req.query.method === \"Send\") {\n await send(context, container, req.body);\n } else {\n context.res = {\n status: 400,\n body: \"Invalid method\"\n };\n }\n};\n\nasync function join(context, container, payload) {\n const id = uuidv4();\n const username = payload;\n const item = {\n id: id,\n username: username,\n message: \"joined the chat\"\n };\n await container.items.create(item);\n\n const connection = new signalR.HubConnectionBuilder()\n .withUrl(\"https:\/\/your-signalr-service-name.service.signalr.net\/client\/?acce<div>ss_token=your-access-token\")\n .configureLogging(signalR.LogLevel.Information)\n .build();\n\n connection.on(\"Send\", async (username, message) => {\n const id = uuidv4();\n const item = {\n id: id,\n username: username,\n message: message\n };\n await container.items.create(item);\n\n context.bindings.signalRMessage = {\n target: \"ReceiveMessage\",\n arguments: [username, message]\n };\n });\n\n await connection.start();\n}\n\nasync function send(context, container, payload) {\n const id = uuidv4();\n const { username, message } = payload;\n const item = {\n id: id,\n username: username,\n message: message\n };\n await container.items.create(item);\n\n context.bindings.signalRMessage = {\n target: \"ReceiveMessage\",\n arguments: [username, message]\n };\n}\n<\/code><\/pre>\nThis code creates two Azure Functions: one to handle the “Join” method, and one to handle the “Send” method. It also connects to an Azure Cosmos DB instance to store and retrieve chat messages.<\/p>\n
The “join” function generates a unique ID for the user, creates a new item in the Cosmos DB container to indicate that the user has joined the chat, creates a new SignalR connection for the user, and listens for incoming messages. When a message is received, the function creates a new item in the Cosmos DB container to store the message, and sends a SignalR message to all connected clients with the “ReceiveMessage” target and the sender’s username and message as arguments.<\/p>\n
The “send” function generates a unique ID for the message, creates a new item in the Cosmos DB container to store the message, and sends a SignalR message to all connected clients with the “ReceiveMessage” target and the sender’s username and message as arguments.<\/p>\n
Step 4 – Test the web app<\/h2>\n
Now that we have everything set up, it’s time to test our web app and see if everything works as expected.<\/p>\n
\n- Start by running your Azure Functions app locally:\n
\n- Open the “Azure Functions” extension in Visual Studio Code<\/li>\n
- Click the “Run” button or press
F5<\/code><\/li>\n<\/ul>\n<\/li>\n- Navigate to the “index.html” file in your project directory and open it in your web browser.<\/p>\n<\/li>\n
- \n
Enter a unique username and click the “Join” button.<\/p>\n<\/li>\n
- \n
Open a new tab or window and navigate to the “index.html” file again.<\/p>\n<\/li>\n
- \n
Enter a different unique username and click the “Join” button.<\/p>\n<\/li>\n
- \n
Go back to the first tab or window and enter a message in the input field.<\/p>\n<\/li>\n
- \n
Click the “Send” button. You should see the message appear in the textarea in both tabs or windows.<\/p>\n<\/li>\n
- \n
Congratulations! You have created a scalable web app with Azure Functions and SignalR.<\/p>\n<\/li>\n<\/ol>\n
Conclusion<\/h2>\n
In this tutorial, we showed you how to use Azure Functions and SignalR to create a scalable web app. We walked you through the process of setting up Azure Functions and SignalR, creating a simple front-end client, creating Azure Functions to handle the “Join” and “Send” methods, and testing the web app. By leveraging the power of these two tools, you can create a real-time communication app that can scale to millions of users without worry.<\/p>\n","protected":false},"excerpt":{"rendered":"
Azure Functions and SignalR are two powerful tools that can be used together to create a scalable web app. Azure Functions is a serverless compute service that allows you to run your code on-demand, without the need to provision or manage virtual machines. SignalR is a real-time communication framework that Continue Reading<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[585,30,203,766,49,765],"yoast_head":"\nBuilding a scalable web app with Azure Functions and SignalR - Pantherax Blogs<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/localhost:10003\/building-a-scalable-web-app-with-azure-functions-and-signalr\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Building a scalable web app with Azure Functions and SignalR\" \/>\n<meta property=\"og:description\" content=\"Azure Functions and SignalR are two powerful tools that can be used together to create a scalable web app. Azure Functions is a serverless compute service that allows you to run your code on-demand, without the need to provision or manage virtual machines. SignalR is a real-time communication framework that Continue Reading\" \/>\n<meta property=\"og:url\" content=\"http:\/\/localhost:10003\/building-a-scalable-web-app-with-azure-functions-and-signalr\/\" \/>\n<meta property=\"og:site_name\" content=\"Pantherax Blogs\" \/>\n<meta property=\"article:published_time\" content=\"2023-11-04T23:13:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-05T05:48:24+00:00\" \/>\n<meta name=\"author\" content=\"Panther\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Panther\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\n\t \"@context\": \"https:\/\/schema.org\",\n\t \"@graph\": [\n\t {\n\t \"@type\": \"Article\",\n\t \"@id\": \"http:\/\/localhost:10003\/building-a-scalable-web-app-with-azure-functions-and-signalr\/#article\",\n\t \"isPartOf\": {\n\t \"@id\": \"http:\/\/localhost:10003\/building-a-scalable-web-app-with-azure-functions-and-signalr\/\"\n\t },\n\t \"author\": {\n\t \"name\": \"Panther\",\n\t \"@id\": \"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7\"\n\t },\n\t \"headline\": \"Building a scalable web app with Azure Functions and SignalR\",\n\t \"datePublished\": \"2023-11-04T23:13:59+00:00\",\n\t \"dateModified\": \"2023-11-05T05:48:24+00:00\",\n\t \"mainEntityOfPage\": {\n\t \"@id\": \"http:\/\/localhost:10003\/building-a-scalable-web-app-with-azure-functions-and-signalr\/\"\n\t },\n\t \"wordCount\": 881,\n\t \"publisher\": {\n\t \"@id\": \"http:\/\/localhost:10003\/#organization\"\n\t },\n\t \"keywords\": [\n\t \"\\\"Azure Functions\\\"\",\n\t \"\\\"cloud computing\\\"\",\n\t \"\\\"serverless architecture\\\"\",\n\t \"\\\"SignalR\\\"\",\n\t \"\\\"Web development\\\"\",\n\t \"[\\\"Building a scalable web app\\\"\"\n\t ],\n\t \"inLanguage\": \"en-US\"\n\t },\n\t {\n\t \"@type\": \"WebPage\",\n\t \"@id\": \"http:\/\/localhost:10003\/building-a-scalable-web-app-with-azure-functions-and-signalr\/\",\n\t \"url\": \"http:\/\/localhost:10003\/building-a-scalable-web-app-with-azure-functions-and-signalr\/\",\n\t \"name\": \"Building a scalable web app with Azure Functions and SignalR - Pantherax Blogs\",\n\t \"isPartOf\": {\n\t \"@id\": \"http:\/\/localhost:10003\/#website\"\n\t },\n\t \"datePublished\": \"2023-11-04T23:13:59+00:00\",\n\t \"dateModified\": \"2023-11-05T05:48:24+00:00\",\n\t \"breadcrumb\": {\n\t \"@id\": \"http:\/\/localhost:10003\/building-a-scalable-web-app-with-azure-functions-and-signalr\/#breadcrumb\"\n\t },\n\t \"inLanguage\": \"en-US\",\n\t \"potentialAction\": [\n\t {\n\t \"@type\": \"ReadAction\",\n\t \"target\": [\n\t \"http:\/\/localhost:10003\/building-a-scalable-web-app-with-azure-functions-and-signalr\/\"\n\t ]\n\t }\n\t ]\n\t },\n\t {\n\t \"@type\": \"BreadcrumbList\",\n\t \"@id\": \"http:\/\/localhost:10003\/building-a-scalable-web-app-with-azure-functions-and-signalr\/#breadcrumb\",\n\t \"itemListElement\": [\n\t {\n\t \"@type\": \"ListItem\",\n\t \"position\": 1,\n\t \"name\": \"Home\",\n\t \"item\": \"http:\/\/localhost:10003\/\"\n\t },\n\t {\n\t \"@type\": \"ListItem\",\n\t \"position\": 2,\n\t \"name\": \"Building a scalable web app with Azure Functions and SignalR\"\n\t }\n\t ]\n\t },\n\t {\n\t \"@type\": \"WebSite\",\n\t \"@id\": \"http:\/\/localhost:10003\/#website\",\n\t \"url\": \"http:\/\/localhost:10003\/\",\n\t \"name\": \"Pantherax Blogs\",\n\t \"description\": \"\",\n\t \"publisher\": {\n\t \"@id\": \"http:\/\/localhost:10003\/#organization\"\n\t },\n\t \"potentialAction\": [\n\t {\n\t \"@type\": \"SearchAction\",\n\t \"target\": {\n\t \"@type\": \"EntryPoint\",\n\t \"urlTemplate\": \"http:\/\/localhost:10003\/?s={search_term_string}\"\n\t },\n\t \"query-input\": \"required name=search_term_string\"\n\t }\n\t ],\n\t \"inLanguage\": \"en-US\"\n\t },\n\t {\n\t \"@type\": \"Organization\",\n\t \"@id\": \"http:\/\/localhost:10003\/#organization\",\n\t \"name\": \"Pantherax Blogs\",\n\t \"url\": \"http:\/\/localhost:10003\/\",\n\t \"logo\": {\n\t \"@type\": \"ImageObject\",\n\t \"inLanguage\": \"en-US\",\n\t \"@id\": \"http:\/\/localhost:10003\/#\/schema\/logo\/image\/\",\n\t \"url\": \"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg\",\n\t \"contentUrl\": \"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg\",\n\t \"width\": 1024,\n\t \"height\": 1024,\n\t \"caption\": \"Pantherax Blogs\"\n\t },\n\t \"image\": {\n\t \"@id\": \"http:\/\/localhost:10003\/#\/schema\/logo\/image\/\"\n\t }\n\t },\n\t {\n\t \"@type\": \"Person\",\n\t \"@id\": \"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7\",\n\t \"name\": \"Panther\",\n\t \"image\": {\n\t \"@type\": \"ImageObject\",\n\t \"inLanguage\": \"en-US\",\n\t \"@id\": \"http:\/\/localhost:10003\/#\/schema\/person\/image\/\",\n\t \"url\": \"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g\",\n\t \"contentUrl\": \"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g\",\n\t \"caption\": \"Panther\"\n\t },\n\t \"sameAs\": [\n\t \"http:\/\/localhost:10003\"\n\t ],\n\t \"url\": \"http:\/\/localhost:10003\/author\/pepethefrog\/\"\n\t }\n\t ]\n\t}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Building a scalable web app with Azure Functions and SignalR - Pantherax Blogs","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/localhost:10003\/building-a-scalable-web-app-with-azure-functions-and-signalr\/","og_locale":"en_US","og_type":"article","og_title":"Building a scalable web app with Azure Functions and SignalR","og_description":"Azure Functions and SignalR are two powerful tools that can be used together to create a scalable web app. Azure Functions is a serverless compute service that allows you to run your code on-demand, without the need to provision or manage virtual machines. SignalR is a real-time communication framework that Continue Reading","og_url":"http:\/\/localhost:10003\/building-a-scalable-web-app-with-azure-functions-and-signalr\/","og_site_name":"Pantherax Blogs","article_published_time":"2023-11-04T23:13:59+00:00","article_modified_time":"2023-11-05T05:48:24+00:00","author":"Panther","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Panther","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/localhost:10003\/building-a-scalable-web-app-with-azure-functions-and-signalr\/#article","isPartOf":{"@id":"http:\/\/localhost:10003\/building-a-scalable-web-app-with-azure-functions-and-signalr\/"},"author":{"name":"Panther","@id":"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7"},"headline":"Building a scalable web app with Azure Functions and SignalR","datePublished":"2023-11-04T23:13:59+00:00","dateModified":"2023-11-05T05:48:24+00:00","mainEntityOfPage":{"@id":"http:\/\/localhost:10003\/building-a-scalable-web-app-with-azure-functions-and-signalr\/"},"wordCount":881,"publisher":{"@id":"http:\/\/localhost:10003\/#organization"},"keywords":["\"Azure Functions\"","\"cloud computing\"","\"serverless architecture\"","\"SignalR\"","\"Web development\"","[\"Building a scalable web app\""],"inLanguage":"en-US"},{"@type":"WebPage","@id":"http:\/\/localhost:10003\/building-a-scalable-web-app-with-azure-functions-and-signalr\/","url":"http:\/\/localhost:10003\/building-a-scalable-web-app-with-azure-functions-and-signalr\/","name":"Building a scalable web app with Azure Functions and SignalR - Pantherax Blogs","isPartOf":{"@id":"http:\/\/localhost:10003\/#website"},"datePublished":"2023-11-04T23:13:59+00:00","dateModified":"2023-11-05T05:48:24+00:00","breadcrumb":{"@id":"http:\/\/localhost:10003\/building-a-scalable-web-app-with-azure-functions-and-signalr\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/localhost:10003\/building-a-scalable-web-app-with-azure-functions-and-signalr\/"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/localhost:10003\/building-a-scalable-web-app-with-azure-functions-and-signalr\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/localhost:10003\/"},{"@type":"ListItem","position":2,"name":"Building a scalable web app with Azure Functions and SignalR"}]},{"@type":"WebSite","@id":"http:\/\/localhost:10003\/#website","url":"http:\/\/localhost:10003\/","name":"Pantherax Blogs","description":"","publisher":{"@id":"http:\/\/localhost:10003\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/localhost:10003\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"http:\/\/localhost:10003\/#organization","name":"Pantherax Blogs","url":"http:\/\/localhost:10003\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/localhost:10003\/#\/schema\/logo\/image\/","url":"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg","contentUrl":"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg","width":1024,"height":1024,"caption":"Pantherax Blogs"},"image":{"@id":"http:\/\/localhost:10003\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7","name":"Panther","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/localhost:10003\/#\/schema\/person\/image\/","url":"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g","contentUrl":"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g","caption":"Panther"},"sameAs":["http:\/\/localhost:10003"],"url":"http:\/\/localhost:10003\/author\/pepethefrog\/"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts\/3997"}],"collection":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/comments?post=3997"}],"version-history":[{"count":1,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts\/3997\/revisions"}],"predecessor-version":[{"id":4533,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts\/3997\/revisions\/4533"}],"wp:attachment":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/media?parent=3997"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/categories?post=3997"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/tags?post=3997"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}