How to Trigger Node Azure Functions WebPubSub Trigger Binding in for messages from Users locally?

Question

I want to create a serverless Client -> Azure Function for bi-directional communication using Azure Functions with the Azure WebPubSub Trigger binding "in" for user messages. I followed everything in the following tutorial https://learn.microsoft.com/en-us/azure/azure-web-pubsub/quickstart-serverless?tabs=javascript-v3 and am using Node for Azure functions with the Javascript v3 model specified on the linked article. I want to test this locally but the article never specified how this can be actually accomplished they just skip to deploying the function and testing it there...

Here's the basic view for how my client and subscriber look omitting the boilerplate code needed

CLIENT (JS):

    let ws = new WebSocket(this.#url);
    ws.onopen = function(){
      ws.send("hello world");
    }
    ws.onmessage = (event) => {
     console.log("NEW MESSAGE");
     console.log({event});
    };

Server (Node 18.x.x):

function.json

    {
      "disabled": false,
      "bindings": [
        {
          "type": "webPubSubTrigger",
          "direction": "in",
          "name": "data",
          "hub": "testhub",
          "eventName": "message",
          "eventType": "user"
        }
      ]
    }

index.js

    module.exports = function (context, data) {
        console.log('Request message data: ', data);
     }

host.json

    {
      "version": "2.0",
      "extensions": {
        "http": {
          "routePrefix": ""
        }
      },
      "logging": {
        "applicationInsights": {
          "samplingSettings": {
            "isEnabled": true,
            "excludedTypes": "Request"
          }
        }
    },
    "extensionBundle": {
     "id": "Microsoft.Azure.Functions.ExtensionBundle",
     "version": "[3.3.*, 4.0.0)"
    }
    }

I've been trying to invoke my trigger binding (folder is named test-user-event if it matters) via the line above

ws.send("hello world");

But nothing ever hits my local machine... I have checked over multiple issue points and everything I have set up seems correct according the latest documentation

My connection string variables are correct and point to an active WebPubSub resource I have In Azure

1. My azure functions works locally when using RESTful endpoints
2. I correctly connect to the WebSocket and the message Is sent
3. Both client and server are connected to the same hub
4. Set up the event handler on that hub to support tunnel:///runtime/webhooks/webpubsub

I am aware of the https://www.npmjs.com/package/@azure/web-pubsub-tunnel-tool/v/1.0.0-beta. Azure tunnel tool but isn't this only for when you have a persistent server such as Express? How do I accomplish this with Azure functions alone? The WS send method is a POST request how Is that supposed to hit my Azure WebPubSub trigger locally? Also I used the native browser WebSocket implementation for that client but is all this possible using the official Azure SDK as well? https://www.npmjs.com/package/@azure/web-pubsub-client

Answer 1

I have followed MSDOC and created a JavaScript Azure function to build a serverless real-time chat app, refer MSDOC to run the function locally.

Add Web Pub Sub Connection String in local.settings.json.

local.settings.json:

{
  "IsEncrypted": false,
  "Values": {
    "FUNCTIONS_WORKER_RUNTIME": "node",
    "AzureWebJobsStorage": "UseDevelopmentStorage=true",
    "WebPubSubConnectionString":"<WebPubSub_ConnectionString>"
  }
}

Console Output:

func start

Azure Functions Core Tools
Core Tools Version:       4.0.6821 Commit hash: N/A +c09a2033faa7ecf51b3773308283af0ca9a99f83 (64-bit)
Function Runtime Version: 4.1036.1.23224

[2025-02-05T12:22:15.200Z] Worker process started and initialized.

Functions:

        index: [GET,POST] http://localhost:7071/api/index

        negotiate:  http://localhost:7071/api/negotiate

        message: webPubSubTrigger

For detailed output, run func with --verbose flag.
[2025-02-05T12:22:20.155Z] Host lock lease acquired by instance ID '000000000000000000000000F72731CC'.
[2025-02-05T12:23:19.360Z] Executing 'Functions.negotiate' (Reason='This function was programmatically called via the host APIs.', Id=393ae9d8-f952-4f73-b5ea-288a973e560a)
[2025-02-05T12:23:19.560Z] Executed 'Functions.negotiate' (Succeeded, Id=393ae9d8-f952-4f73-b5ea-288a973e560a, Duration=233ms)

http://localhost:7071/api/negotiate:

http://localhost:7071/api/index: