本地触发Node.js Azure Functions WebPubSub入站触发器绑定方法问询

我想用Azure Functions的WebPubSub Trigger入站绑定实现无服务器客户端到Azure Function的双向通信，接收用户消息。按照官方教程用JavaScript v3模型开发Node.js Azure Functions，但教程直接跳到部署测试，未说明本地测试方法。尝试用客户端WebSocket发送消息时，本地函数无响应，以下是相关细节：

核心代码 #

客户端（原生WebSocket） #

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

服务端（Node.js 18.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)"
  }
}

已确认的配置要点 #

• 本地Azure Functions的RESTful端点可正常访问
• WebSocket连接成功，消息已发送
• 客户端与服务端使用同一个hub（testhub）
• 已在WebPubSub hub上配置事件处理器支持tunnel:///runtime/webhooks/webpubsub

疑问与解决方案 #

1. @azure/web-pubsub-tunnel-tool是否仅适用于Express等持久化服务器？ #

不是，该工具同样支持Azure Functions的本地测试。本地Azure Functions默认运行在内网，Azure WebPubSub服务无法直接访问到你的函数端点，隧道工具的作用是建立公网隧道，让WebPubSub服务能将事件转发到本地函数。

2. 如何通过Azure Functions实现本地触发？ #

按以下步骤操作：

1. 全局安装隧道工具：

   npm install -g @azure/web-pubsub-tunnel-tool
   

2. 启动本地Azure Functions：

   func start
   

3. 启动隧道工具，指定hub、事件类型和本地函数的webhook地址：

   webpubsub-tunnel --hub testhub --event message --user --upstream http://localhost:7071/runtime/webhooks/webpubsub
   

4. 启动后隧道工具会生成一个公网URL，在Azure门户的WebPubSub资源中，将该URL配置为对应hub的事件处理器端点（替换原有的tunnel://配置）。
5. 确保本地函数的local.settings.json中配置了WebPubSub的连接字符串：

   {
     "IsEncrypted": false,
     "Values": {
       "AzureWebJobsStorage": "UseDevelopmentStorage=true",
       "FUNCTIONS_WORKER_RUNTIME": "node",
       "AzureWebPubSubConnectionString": "你的WebPubSub连接字符串"
     }
   }
   

3. WS的send方法是POST请求？如何触发本地的WebPubSub触发器？ #

WebSocket的send方法是发送WebSocket帧，并非HTTP POST请求。客户端发送消息到WebPubSub服务后，服务端会将这个用户消息事件以HTTP POST的形式转发到你配置的事件处理器端点（本地函数的webhook地址）。因此需要隧道工具打通公网到本地函数的访问路径，让WebPubSub服务能成功回调到本地函数。

4. 浏览器原生WebSocket是否可以替换为官方@azure/web-pubsub-client SDK？ #

完全可以。官方SDK封装了WebSocket的底层细节，提供了更稳定的连接管理、自动重连、消息序列化等功能，使用起来更便捷。示例代码如下：

import { WebPubSubClient } from "@azure/web-pubsub-client";

// 初始化客户端，传入从Azure Functions获取的客户端连接URL
const client = new WebPubSubClient("你的客户端连接URL");

// 启动连接
await client.start();

// 监听消息
client.on("message", (event) => {
  console.log("收到消息:", event.message.data);
});

// 发送消息
await client.send("hello world");

内容的提问来源于stack exchange，提问作者Sssss124567