Movatterモバイル変換

The Azure Web PubSub service helps you build real-time messaging web applications using WebSockets. Azure Functions is a serverless platform that lets you run your code without managing any infrastructure. In this tutorial, you learn how to use Azure Web PubSub service and Azure Functions to build a serverless application with real-time messaging under notification scenarios.

In this tutorial, you learn how to:

Build a serverless notification app
Work with Web PubSub function input and output bindings
Run the sample functions locally
Deploy the function to Azure Function App

Important

Raw connection strings appear in this article for demonstration purposes only.

A connection string includes the authorization information required for your application to access Azure Web PubSub service. The access key inside the connection string is similar to a root password for your service. In production environments, always protect your access keys. Use Azure Key Vault to manage and rotate your keys securely andsecure your connection withWebPubSubServiceClient.

Avoid distributing access keys to other users, hard-coding them, or saving them anywhere in plain text that is accessible to others. Rotate your keys if you believe they may have been compromised.

Prerequisites

A code editor, such asVisual Studio Code
Node.js, version 18.x or above.
Note
For more information about the supported versions of Node.js, seeAzure Functions runtime versions documentation.
Azure Functions Core Tools (V4 or higher preferred) to run Azure Function apps locally and deploy to Azure.
TheAzure CLI to manage Azure resources.

If you don't have an Azure account, create afree account before you begin.

Sign in to Azure

Create an Azure Web PubSub service instance

Your application will connect to a Web PubSub service instance in Azure.

Select the New button found on the upper left-hand corner of the Azure portal. In the New screen, typeWeb PubSub in the search box and press enter. (You could also search the Azure Web PubSub from theWeb category.)
SelectWeb PubSub from the search results, then selectCreate.

Enter the following settings.

Setting	Suggested value	Description
Resource name	Globally unique name	The globally unique Name that identifies your new Web PubSub service instance. Valid characters are`a-z`,`A-Z`,`0-9`, and`-`.
Subscription	Your subscription	The Azure subscription under which this new Web PubSub service instance is created.
Resource Group	myResourceGroup	Name for the new resource group in which to create your Web PubSub service instance.
Location	West US	Choose aregion near you.
Pricing tier	Free	You can first try Azure Web PubSub service for free. Learn more details aboutAzure Web PubSub service pricing tiers
Unit count	-	Unit count specifies how many connections your Web PubSub service instance can accept. Each unit supports 1,000 concurrent connections at most. It is only configurable in the Standard tier.

Screenshot of creating the Azure Web PubSub instance in portal.

SelectCreate to start deploying the Web PubSub service instance.

Create and run the functions locally

Make sure you haveAzure Functions Core Tools installed. Now, create an empty directory for the project. Run command under this working directory. Use one of the given options below.
```
func init --worker-runtime javascript --model V4
```
```
func init --worker-runtime javascript --model V3
```
```
func init --worker-runtime dotnet
```
```
func init --worker-runtime dotnet-isolated
```
```
func init --worker-runtime python --model V1
```
Follow the steps to installMicrosoft.Azure.WebJobs.Extensions.WebPubSub.
Confirm or updatehost.json's extensionBundle to version4.* or later to get Web PubSub support. For updating thehost.json, open the file in editor, and then replace the existing version extensionBundle to version4.* or later.
```
{    "extensionBundle": {        "id": "Microsoft.Azure.Functions.ExtensionBundle",        "version": "[4.*, 5.0.0)"    }}
```
Confirm or updatehost.json's extensionBundle to version3.3.0 or later to get Web PubSub support. For updating thehost.json, open the file in editor, and then replace the existing version extensionBundle to version3.3.0 or later.
```
{    "extensionBundle": {        "id": "Microsoft.Azure.Functions.ExtensionBundle",        "version": "[3.3.*, 4.0.0)"    }}
```
```
dotnet add package Microsoft.Azure.WebJobs.Extensions.WebPubSub
```
```
dotnet add package Microsoft.Azure.Functions.Worker.Extensions.WebPubSub --prerelease
```
Updatehost.json's extensionBundle to version3.3.0 or later to get Web PubSub support. For updating thehost.json, open the file in editor, and then replace the existing version extensionBundle to version3.3.0 or later.
```
{    "extensionBundle": {        "id": "Microsoft.Azure.Functions.ExtensionBundle",        "version": "[3.3.*, 4.0.0)"    }}
```

Create anindex function to read and host a static web page for clients.

func new -n index -t HttpTrigger

Updatesrc/functions/index.js and copy following codes.

const { app } = require('@azure/functions');const { readFile } = require('fs/promises');app.http('index', {    methods: ['GET', 'POST'],    authLevel: 'anonymous',    handler: async (context) => {        const content = await readFile('index.html', 'utf8', (err, data) => {            if (err) {                context.err(err)                return            }        });        return {             status: 200,            headers: {                 'Content-Type': 'text/html'            },             body: content,         };    }});

Updateindex/function.json and copy following json codes.

{  "bindings": [    {      "authLevel": "anonymous",      "type": "httpTrigger",      "direction": "in",      "name": "req",      "methods": [        "get",        "post"      ]    },    {      "type": "http",      "direction": "out",      "name": "res"    }  ]}

Updateindex/index.js and copy following codes.

var fs = require('fs');var path = require('path');module.exports = function (context, req) {    var index = context.executionContext.functionDirectory + '/../index.html';    context.log("index.html path: " + index);    fs.readFile(index, 'utf8', function (err, data) {        if (err) {            console.log(err);            context.done(err);        }        context.res = {            status: 200,            headers: {                'Content-Type': 'text/html'            },            body: data        };        context.done();    });}

Updateindex.cs and replaceRun function with following codes.

[FunctionName("index")]public static IActionResult Run([HttpTrigger(AuthorizationLevel.Anonymous)] HttpRequest req, ExecutionContext context, ILogger log){    var indexFile = Path.Combine(context.FunctionAppDirectory, "index.html");    log.LogInformation($"index.html path: {indexFile}.");    return new ContentResult    {        Content = File.ReadAllText(indexFile),        ContentType = "text/html",    };}

Updateindex.cs and replaceRun function with following codes.

[Function("index")]public HttpResponseData Run([HttpTrigger(AuthorizationLevel.Anonymous, "get", "post")] HttpRequestData req, FunctionContext context){    var path = Path.Combine(context.FunctionDefinition.PathToAssembly, "../index.html");    _logger.LogInformation($"index.html path: {path}.");    var response = req.CreateResponse();    response.WriteString(File.ReadAllText(path));    response.Headers.Add("Content-Type", "text/html");    return response;}

Updateindex/function.json and copy following json codes.

{  "scriptFile": "__init__.py",  "bindings": [    {      "authLevel": "anonymous",      "type": "httpTrigger",      "direction": "in",      "name": "req",      "methods": [        "get",        "post"      ]    },    {      "type": "http",      "direction": "out",      "name": "$return"    }  ]}

Updateindex/__init__.py and copy following codes.

import osimport azure.functions as funcdef main(req: func.HttpRequest) -> func.HttpResponse:    f = open(os.path.dirname(os.path.realpath(__file__)) + '/../index.html')    return func.HttpResponse(f.read(), mimetype='text/html')

Create anegotiate function to help clients get service connection url with access token.

func new -n negotiate -t HttpTrigger

Updatesrc/functions/negotiate.js and copy following codes.

const { app, input } = require('@azure/functions');const connection = input.generic({    type: 'webPubSubConnection',    name: 'connection',    hub: 'notification'});app.http('negotiate', {    methods: ['GET', 'POST'],    authLevel: 'anonymous',    extraInputs: [connection],    handler: async (request, context) => {        return { body: JSON.stringify(context.extraInputs.get('connection')) };    },});

Updatenegotiate/function.json and copy following json codes.

{  "bindings": [    {      "authLevel": "anonymous",      "type": "httpTrigger",      "direction": "in",      "name": "req"    },    {      "type": "http",      "direction": "out",      "name": "res"    },    {      "type": "webPubSubConnection",      "name": "connection",      "hub": "notification",      "direction": "in"    }  ]}

Create a folder negotiate and updatenegotiate/index.js and copy following codes.

module.exports = function (context, req, connection) {    context.res = { body: connection };    context.done();};

Updatenegotiate.cs and replaceRun function with following codes.

[FunctionName("negotiate")]public static WebPubSubConnection Run(    [HttpTrigger(AuthorizationLevel.Anonymous, "get", "post", Route = null)] HttpRequest req,    [WebPubSubConnection(Hub = "notification")] WebPubSubConnection connection,    ILogger log){    log.LogInformation("Connecting...");    return connection;}

Addusing statements in header to resolve required dependencies.
```
using Microsoft.Azure.WebJobs.Extensions.WebPubSub;
```

Updatenegotiate.cs and replaceRun function with following codes.

[Function("negotiate")]public HttpResponseData Run([HttpTrigger(AuthorizationLevel.Anonymous, "get", "post")] HttpRequestData req,    [WebPubSubConnectionInput(Hub = "notification")] WebPubSubConnection connectionInfo){    var response = req.CreateResponse(HttpStatusCode.OK);    response.WriteAsJsonAsync(connectionInfo);    return response;}

Create a folder negotiate and updatenegotiate/function.json and copy following json codes.

{  "scriptFile": "__init__.py",  "bindings": [    {      "authLevel": "anonymous",      "type": "httpTrigger",      "direction": "in",      "name": "req"    },    {      "type": "http",      "direction": "out",      "name": "$return"    },    {      "type": "webPubSubConnection",      "name": "connection",      "hub": "notification",      "direction": "in"    }  ]}

Updatenegotiate/__init__.py and copy following codes.

import loggingimport azure.functions as funcdef main(req: func.HttpRequest, connection) -> func.HttpResponse:    return func.HttpResponse(connection)

Create anotification function to generate notifications withTimerTrigger.

func new -n notification -t TimerTrigger

Updatesrc/functions/notification.js and copy following codes.

const { app, output } = require('@azure/functions');const wpsAction = output.generic({    type: 'webPubSub',    name: 'action',    hub: 'notification'});app.timer('notification', {    schedule: "*/10 * * * * *",    extraOutputs: [wpsAction],    handler: (myTimer, context) => {        context.extraOutputs.set(wpsAction, {            actionName: 'sendToAll',            data: `[DateTime: ${new Date()}] Temperature: ${getValue(22, 1)}\xB0C, Humidity: ${getValue(40, 2)}%`,            dataType: 'text',        });    },});function getValue(baseNum, floatNum) {    return (baseNum + 2 * floatNum * (Math.random() - 0.5)).toFixed(3);}

Updatenotification/function.json and copy following json codes.

{  "bindings": [    {      "name": "myTimer",      "type": "timerTrigger",      "direction": "in",      "schedule": "*/10 * * * * *"    },    {      "type": "webPubSub",      "name": "actions",      "hub": "notification",      "direction": "out"    }  ]}

Updatenotification/index.js and copy following codes.

module.exports = function (context, myTimer) {    context.bindings.actions = {        "actionName": "sendToAll",        "data": `[DateTime: ${new Date()}] Temperature: ${getValue(22, 1)}\xB0C, Humidity: ${getValue(40, 2)}%`,        "dataType": "text"    }    context.done();};function getValue(baseNum, floatNum) {    return (baseNum + 2 * floatNum * (Math.random() - 0.5)).toFixed(3);}

Updatenotification.cs and replaceRun function with following codes.

[FunctionName("notification")]public static async Task Run([TimerTrigger("*/10 * * * * *")]TimerInfo myTimer, ILogger log,    [WebPubSub(Hub = "notification")] IAsyncCollector<WebPubSubAction> actions){    await actions.AddAsync(new SendToAllAction    {        Data = BinaryData.FromString($"[DateTime: {DateTime.Now}] Temperature: {GetValue(23, 1)}{'\xB0'}C, Humidity: {GetValue(40, 2)}%"),        DataType = WebPubSubDataType.Text    });}private static string GetValue(double baseNum, double floatNum){    var rng = new Random();    var value = baseNum + floatNum * 2 * (rng.NextDouble() - 0.5);    return value.ToString("0.000");}

Addusing statements in header to resolve required dependencies.

using System.Threading.Tasks;using Microsoft.Azure.WebJobs.Extensions.WebPubSub;using Microsoft.Azure.WebPubSub.Common;

Updatenotification.cs and replaceRun function with following codes.

[Function("notification")][WebPubSubOutput(Hub = "notification")]public SendToAllAction Run([TimerTrigger("*/10 * * * * *")] MyInfo myTimer){    return new SendToAllAction    {        Data = BinaryData.FromString($"[DateTime: {DateTime.Now}] Temperature: {GetValue(23, 1)}{'\xB0'}C, Humidity: {GetValue(40, 2)}%"),        DataType = WebPubSubDataType.Text    };}private static string GetValue(double baseNum, double floatNum){    var rng = new Random();    var value = baseNum + floatNum * 2 * (rng.NextDouble() - 0.5);    return value.ToString("0.000");}

Create a folder notification and updatenotification/function.json and copy following json codes.

{  "scriptFile": "__init__.py",  "bindings": [    {      "name": "myTimer",      "type": "timerTrigger",      "direction": "in",      "schedule": "*/10 * * * * *"    },    {      "type": "webPubSub",      "name": "actions",      "hub": "notification",      "direction": "out"    }  ]}

Updatenotification/__init__.py and copy following codes.

import datetimeimport randomimport jsonimport azure.functions as funcdef main(myTimer: func.TimerRequest, actions: func.Out[str]) -> None:    time = datetime.datetime.now().strftime("%A %d-%b-%Y %H:%M:%S")    actions.set(json.dumps({        'actionName': 'sendToAll',        'data': '\x5B DateTime: {0} \x5D Temperature: {1:.3f} \xB0C, Humidity: {2:.3f} \x25'.format(time, 22 + 2 * (random.random() - 0.5), 44 + 4 * (random.random() - 0.5)),        'dataType': 'text'    }))

Add the client single pageindex.html in the project root folder and copy content.

<html>    <body>    <h1>Azure Web PubSub Notification</h1>    <div></div>    <script>        (async function () {            let messages = document.querySelector('#messages');            let res = await fetch(`${window.location.origin}/api/negotiate`);            let url = await res.json();            let ws = new WebSocket(url.url);            ws.onopen = () => console.log('connected');            ws.onmessage = event => {                let m = document.createElement('p');                m.innerText = event.data;                messages.appendChild(m);            };        })();    </script>    </body></html>

Since C# project compiles files to a different output folder, you need to update your*.csproj to make the content page go with it.

<ItemGroup>    <None Update="index.html">        <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>    </None></ItemGroup>

Since C# project compiles files to a different output folder, you need to update your*.csproj to make the content page go with it.

<ItemGroup>    <None Update="index.html">        <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>    </None></ItemGroup>

Configure and run the Azure Function app
Raw connection strings appear in this article for demonstration purposes only. In production environments, always protect your access keys. Use Azure Key Vault to manage and rotate your keys securely andsecure your connection withWebPubSubServiceClient.
- In the browser, open theAzure portal and confirm the Web PubSub Service instance you deployed earlier was successfully created. Navigate to the instance.
- SelectKeys and copy out the connection string.
Run command in the function folder to set the service connection string. Replace<connection-string> with your value as needed.
```
func settings add WebPubSubConnectionString "<connection-string>"
```
Note
TimerTrigger used in the sample has dependency on Azure Storage, but you can use local storage emulator when the Function is running locally. If you got some error likeThere was an error performing a read operation on the Blob Storage Secret Repository. Please ensure the 'AzureWebJobsStorage' connection string is valid., you'll need to download and enableStorage Emulator.
Now you're able to run your local function by command.
```
func start --port 7071
```
And checking the running logs, you can visit your local host static page by visiting:http://localhost:7071/api/index.
Note
Some browsers automatically redirect tohttps that leads to wrong url. Suggest to useEdge and double check the url if rendering is not success.

Deploy Function App to Azure

Before you can deploy your function code to Azure, you need to create three resources:

A resource group, which is a logical container for related resources.
A storage account, which is used to maintain state and other information about your functions.
A function app, which provides the environment for executing your function code. A function app maps to your local function project and lets you group functions as a logical unit for easier management, deployment and sharing of resources.

Use the following commands to create these items.

Sign in to Azure:
```
az login
```
Create a resource group or you can skip by reusing the one of Azure Web PubSub service:
```
az group create -n WebPubSubFunction -l <REGION>
```

Create a general-purpose storage account in your resource group and region:

az storage account create -n <STORAGE_NAME> -l <REGION> -g WebPubSubFunction

Create the function app in Azure:

az functionapp create --resource-group WebPubSubFunction --consumption-plan-location <REGION> --runtime node --runtime-version 18 --functions-version 4 --name <FUNCIONAPP_NAME> --storage-account <STORAGE_NAME>

Note

CheckAzure Functions runtime versions documentation to set--runtime-version parameter to supported value.

az functionapp create --resource-group WebPubSubFunction --consumption-plan-location <REGION> --runtime node --runtime-version 18 --functions-version 4 --name <FUNCIONAPP_NAME> --storage-account <STORAGE_NAME>

Note

CheckAzure Functions runtime versions documentation to set--runtime-version parameter to supported value.

az functionapp create --resource-group WebPubSubFunction --consumption-plan-location <REGION> --runtime dotnet --functions-version 4 --name <FUNCIONAPP_NAME> --storage-account <STORAGE_NAME>

az functionapp create --resource-group WebPubSubFunction --consumption-plan-location <REGION> --runtime dotnet-isolated --functions-version 4 --name <FUNCIONAPP_NAME> --storage-account <STORAGE_NAME>

az functionapp create --resource-group WebPubSubFunction --consumption-plan-location <REGION> --runtime python --runtime-version 3.9 --functions-version 4 --name <FUNCIONAPP_NAME> --os-type linux --storage-account <STORAGE_NAME>

Deploy the function project to Azure:
Once you create your function app in Azure, you're now ready to deploy your local functions project by using thefunc azure functionapp publish command.
```
func azure functionapp publish <FUNCIONAPP_NAME> --publish-local-settings
```
Note
Here we are deploying local settingslocal.settings.json together with command parameter--publish-local-settings. If you're using Microsoft Azure Storage Emulator, you can typeno to skip overwriting this value on Azure following the prompt message:App setting AzureWebJobsStorage is different between azure and local.settings.json, Would you like to overwrite value in azure? [yes/no/show]. Besides, you can update Function App settings inAzure Portal ->Settings ->Configuration.
Now you can check your site from Azure Function App by navigating to URL:https://<FUNCIONAPP_NAME>.azurewebsites.net/api/index.

Clean up resources

If you're not going to continue to use this app, delete all resources created by this doc with the following steps so you don't incur any charges:

In the Azure portal, selectResource groups on the far left, and then select the resource group you created. Use the search box to find the resource group by its name instead.
In the window that opens, select the resource group, and then selectDelete resource group.
In the new window, type the name of the resource group to delete, and then selectDelete.

Next steps

In this quickstart, you learned how to run a serverless chat application. Now, you could start to build your own application.

Tutorial: Create a simple chatroom with Azure Web PubSub

Azure Web PubSub bindings for Azure Functions

Explore more Azure Web PubSub samples

Movatterモバイル変換

Share via

Tutorial: Create a serverless notification app with Azure Functions and Azure Web PubSub service

In this article