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

Question

我的意图是监视一个带有Chrome扩展的网页。该网页由Ajax comet push或Lightstreamer更新。例如，如果某个值已达到某一阈值，则生成警报或其他操作。基于其他答案，我创建了以下铬扩展代码，该代码确实将更改的内容写入控制台：

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“的值)，因为没有Ids或其他设置来区分不同的值。我知道我可以为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] 

Answer 1

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

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

因此，相应的dataset字段是MEMORY.FREE。读取该数据集的更新后的值是：

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