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.