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

Smith Johnson 0 Reputation points
2025-02-01T01:39:19.98+00:00

Hi all,

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:


   
	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 from: ', context.bindingData.request.connectionContext.userId);
    console.log('Request message data: ', data);
    console.log('Request message dataType: ', context.bindingData.request.dataType);
  }


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...

  1. My connection string variables are correct and point to an active WebPubSub resource I have In Azure
  2. My azure functions works locally when using RESTful endpoints
  3. I correctly connect to the WebSocket and the message Is sent
  4. Both client and server are connected to the same hub
  5. 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.1 Azure tunnel tool but isnt this only for user when you have a persistent server such as express? How do I accomplish this with Azure functions alone? The WS send 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

Azure Web PubSub
Azure Web PubSub
An Azure service that provides real-time messaging for web applications using WebSockets and the publish-subscribe pattern.
83 questions
Azure Functions
Azure Functions
An Azure service that provides an event-driven serverless compute platform.
5,424 questions
{count} votes

1 answer

Sort by: Most helpful
  1. Ranashekar Guda 95 Reputation points Microsoft Vendor
    2025-02-05T13:32:00.16+00:00

    Hi @Smith Johnson,

    Welcome to the Microsoft Q&A Platform! Thank you for asking your question here.

    To address the issue, you're facing with local testing of your Azure Functions using the Azure Web PubSub service, it seems that the main problem is related to how to properly route WebSocket traffic to your local environment. Here’s a structured approach to resolve this:

    • You need to use the Azure Web PubSub local tunnel tool to expose your local function endpoint to the Azure Web PubSub service. This tool creates a secure tunnel from Azure to your local machine.
    • Install the tool using npm: npm install -g @azure/web-pubsub-tunnel-tool
    • Then start the tunnel by running: awps-tunnel --port <your_function_port> --webviewPort <your_webview_port>
    • Now replace <your_function_port> with the port your Azure Function runs on (default is usually 7071) and <your_webview_port> with a port for viewing logs (e.g., 8080).
    • In the Azure portal, navigate to your Web PubSub resource and set the event handler URL template to match the tunnel path: tunnel:///runtime/webhooks/webpubsub
    • This tells Azure Web PubSub to route messages through the tunnel to your local function.
    • Once your local tunnel is running, you can connect your client code (the JavaScript code you provided) to the Azure Web PubSub service using the same connection string and send messages from your client as you normally would.

    I hope the above provided information will helps in better understanding and solve your issue, if you have any further concerns, please feel free to reach out to us.


Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.