如何在自定义Azure DevOps Hub中实时检测工作项变更？

一、官方API现状 #

azure-devops-extension-api并没有公开提供直接订阅工作项变更SignalR事件的接口，Azure DevOps内部的SignalR连接仅用于官方功能（比如Boards、Sprints），第三方扩展无法直接复用这个连接来监听事件。

二、推荐实现方案 #

1. Web Hooks（最可靠的官方方案） #

• 在Azure DevOps项目里配置工作项更新类型的Web Hook，把你的扩展后端服务设为接收端点
• 当目标工作项（比如ID:1001）被修改时，Azure DevOps会主动把变更事件推送到你的后端
• 后端再通过WebSocket或者其他实时通信方式通知前端自定义Hub，触发UI更新

2. 前端轮询（轻量应急方案） #

如果不想搭后端，直接在自定义Hub里定期调用API拉取工作项数据：

• 设置定时器（比如每5-10秒），用WorkItemTrackingClient的getWorkItem方法获取最新数据
• 对比本地缓存的旧数据和新数据，有差异就更新UI
• 优点是不用额外服务，缺点是有延迟，还会增加API调用量

3. 内部实时模块（非公开，慎用） #

部分开发者逆向发现可以用Azure DevOps内部的VSS.Realtime模块：

• 调用VSS.Realtime.connect()初始化连接
• 订阅对应工作项的事件频道
• 注意：这种方式依赖内部实现，随时可能失效，生产环境别用

三、前端轮询代码示例 #

import { WorkItemTrackingClient } from "azure-devops-extension-api/WorkItemTracking";
import { getClient } from "azure-devops-extension-api";

let cachedWorkItem = null;
const targetWorkItemId = 1001;

// 初始化加载工作项
async function loadWorkItem() {
    const client = getClient(WorkItemTrackingClient);
    cachedWorkItem = await client.getWorkItem(targetWorkItemId);
    renderWorkItem(cachedWorkItem);
}

// 定时检查变更
setInterval(async () => {
    const client = getClient(WorkItemTrackingClient);
    const latestWorkItem = await client.getWorkItem(targetWorkItemId);
    if (latestWorkItem.fields["System.Title"] !== cachedWorkItem.fields["System.Title"]) {
        cachedWorkItem = latestWorkItem;
        renderWorkItem(cachedWorkItem);
        console.log("工作项已更新");
    }
}, 5000); // 每5秒检查一次

// 渲染到UI
function renderWorkItem(workItem) {
    const container = document.getElementById("work-item-container");
    if (container) {
        container.innerHTML = `<p>ID: ${workItem.id} - 标题: ${workItem.fields["System.Title"]}</p>`;
    }
}

// 页面就绪后初始化
VSS.ready().then(loadWorkItem);

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