如何确定 Lightstreamer / Ajax 彗星推送数据更改了哪些内容？

Posted 2023-03-31

【中文标题】如何确定 Lightstreamer / Ajax 彗星推送数据更改了哪些内容？

【英文标题】：How to figure out which content was changed by Lightstreamer / Ajax comet push data?

【发布时间】：2014-07-01 16:45:10

【问题描述】：

我的目的是监控带有 Chrome 扩展程序的网页。网页由 Ajax comet push 或 Lightstreamer 更新。这个想法是例如如果某个值已达到某个阈值，则生成警报或其他操作。 根据其他答案，我确实创建了以下 chrome 扩展代码，将更改的内容写入控制台：

manifest.json：

  "name": "ContentChangeObserver",
  "version": "1.0",
  "description": "Capture changes on webpage content",
  "content_scripts": [
   
     "matches": ["<all_urls>"],
     "js": ["contentscript.js"]
   
  ],
  "permissions": ["webRequest", "webRequestBlocking","contextMenus", "tabs",
                  "<all_urls>"],
  "manifest_version": 2

contentscript.js：

var i=0;
// Create a MutationObserver to handle events
var observer = new MutationObserver(function(mutations) 
    mutations.forEach(function(mutation) 
        i++;
        if(i > 100) 
        i=0;
        console.log("mutation.target.textContent: " + mutation.target.textContent);
        console.log("mutation.target.attributeName: " + mutation.target.attributeName);
        console.log("mutation.target.type: " + mutation.target.type);
        console.log("mutation.target.nodeId: " + mutation.target.nodeId);
        console.log("mutation.target.baseURI: " + mutation.target.baseURI);
        console.log("mutation.target.nodeName: " + mutation.target.nodeName);
        console.log("mutation.target.nodeType: " + mutation.target.nodeType);
        console.log("mutation.target.nodeValue: " + mutation.target.nodeValue);
        console.log("mutation.target.parentElement: " + mutation.target.parentElement);
        
    );
);

// Start observing all events in document and its descendants
observer.observe(document, 
    childList: true,
    subtree:   true,
    attributes: true,
    characterData: true
);

到目前为止，它几乎可以正常工作，我看到所有更改的内容（例如在 http://demos.lightstreamer.com/MonitorDemo/ 上）。 “if (i>100)...”只是为了避免在控制台日志中输出过多。 但我不知道如何找出已更改的特定值（例如http://demos.lightstreamer.com/MonitorDemo/ 上的“Free Heap”值），因为没有设置 ID 或其他元素来区分不同的值。 我知道我可以为 MutationObserver 设置过滤器，但我不知道我可以过滤得到什么，例如仅限“空闲堆”值。

这里有一些控制台日志：

mutation.target.textContent: 128
mutation.target.attributeName: undefined 
mutation.target.type: undefined 
mutation.target.nodeId: undefined 
mutation.target.baseURI: http://demos.lightstreamer.com/MonitorDemo/ 
mutation.target.nodeName: DIV 
mutation.target.nodeType: 1 
mutation.target.nodeValue: null 
mutation.target.parentElement: [object htmlTableCellElement] 

mutation.target.textContent: 1,603,282,363 
mutation.target.attributeName: undefined 
mutation.target.type: undefined 
mutation.target.nodeId: undefined 
mutation.target.baseURI: http://demos.lightstreamer.com/MonitorDemo/ 
mutation.target.nodeName: DIV 
mutation.target.nodeType: 1 
mutation.target.nodeValue: null 
mutation.target.parentElement: [object HTMLTableCellElement] 

【问题讨论】：

在您链接的页面中，每个更改的 DIV 似乎都可以通过其data-field 属性来识别。在 Free Heap 的情况下，该值为 MEMORY.FREE。

@rsanchez 准确地说，应该使用.dataset property 来访问它。

所以，你可以检查mutation.target.dataset.field === 'MEMORY.FREE'。

@rsanchez 把它变成一个答案，也许吧？所以这个问题可以结束了。此外，出于性能原因，观察 document 以外的子树可能会更好。

非常感谢您提供完美的答案。我今天会检查的。您是如何找到 .dataset 属性的？我确实查看了所有节点属性，但没有找到 dataset.field。我怎样才能找到正确的子树来观察我需要观察的东西？

【参考方案1】：

必须使用.dataset 属性来访问它。 查看网站的html代码，可以找到对应的数据字段。例如。对于 Free Heap 值：

<div data-source="lightstreamer" data-grid="stats" data-item="monitor_statistics" data-field="MEMORY.FREE" class="lscold">19,670,080</div>

所以对应的数据集字段是MEMORY.FREE。读取它，读取 Free Heap 的更新值：

// Create a MutationObserver to handle events
var observer = new MutationObserver(function(mutations) 
    mutations.forEach(function(mutation) 
        if(typeof mutation.target.dataset !== 'undefined') 
            if(mutation.target.dataset.field === 'MEMORY.FREE') 
                console.log("mutation.target.textContent: " + mutation.target.textContent);
            
        
    );
);

生成的控制台日志：

mutation.target.textContent: 18,470,424
mutation.target.textContent: 34,835,560
mutation.target.textContent: 34,835,560
mutation.target.textContent: 31,032,000