JavaScript:原生JS实现Facebook实时消息抓捕
基础知识准备:
HTML5给我们提供了一个新的对象叫作:MutationObserver。为了兼容,还有WebKitMutationObserver、MozMutationObserver,挂靠在window下。
这个对象是干嘛的呢?
mutation:变化、变动、突变;
observer:观察者;
顾名思义,在DOM中,MutationObserver就是监听DOM变化的意思。
那么这个对象能够监听DOM的哪些变化呢?
- 子节点变化; ——–> childList
- 自身属性变化; ——–> attributes
- 自身的文本变化; ——–> characterData
以上三点呢是三大基本点。
至于这个对象怎么使用呢?很简单!
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
var observer = new MutationObserver(function(mutations) {});
- 1
- 2
- 3
上面的代码中,就是new了一个对象,里面传个callback回调函数而已,就这么简单,这个回调函数干嘛的?该回调函数会在指定的DOM节点(目标节点)发生变化时被调用. 该回调函数有一个参数mutations,这个参数是个数组,数组里每个元素是对象(包含了若干个MutationRecord对象的数组)。
该对象有几个方法要知道:
observe( Node target, optional MutationObserverInit options );
ovserve(要观察的目标节点, 你要观察目标节点的哪些东西-对象);
//举个例子,给你个人(目标节点),你想观察这个人的哪些指标变动:体重、身高、小孩等等
disconnect();//不再观察
好了,直接上个例子吧:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<divid="guoyu"></div>
<scripttype="text/javascript">var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver
// 选择目标节点var target = document.querySelector('#guoyu');
// 创建观察者对象,一旦目标节点发送变化,该回调立马执行var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
console.log(mutation.type);
});
console.log(mutations);//看看callback参数到底是什么
});
// 配置观察选项:你想观察目标节点哪些项var config = {
attributes: true,
childList: true,
characterData: true
}
// 传入目标节点和观察选项
observer.observe(target, config);
</script>
</body>
</html>
我们在id为”guoyu”的节点中添加一个节点,那么回调函数立马就会被触发执行:
看到了吧,我们在节点中插入一个子节点,立马触发了回调函数,并打印了我们想要的结果,而且改变的是childList。
再看一下,我这次把id给改了,看看有什么不同:
看到了吗,这次修改id属于属性的修改,打印出来的是attributes。
注: childList, attributes, 或者characterData三个属性中必须至少有一个为true.否则,会抛出异常”An invalid or illegal string was specified”.
下面呢,就着重介绍一下各个属性到底是啥意思!首先我们看看回调函数里的那个参数,这个参数上面说了是个数组,每个元素是个对象,具体名字参见上面截图。
我们在观察目标节点的时候,需要配置一个json对象,告诉浏览器我们要监听目标节点的哪些指标,比如:属性、子节点、文本、所有子孙节点等等。那么具体有哪些呢?
再举个例子吧,比如,我们既改变文本值,记录characterDataOldValue;又改变属性id的值,记录attributeOldValue。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<divid="old_guoyu">I'am old</div>
<scripttype="text/javascript">var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver
var target = document.querySelector('#old_guoyu');
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
console.log(mutation.type);
});
console.log(mutations);
});
var config = {
attributes: true,
childList: true,
characterData: true,
characterDataOldValue: true,//监听老的文本值
attributeOldValue: true,//记录老的属性值
subtree: true
};
observer.observe(target, config);
</script>
</body>
</html>
看到没,此次我同时改变了文本值和属性值,回调函数执行了两次,一次是文本改变执行的,另一次是属性id改变执行的。说明MutationObserver准确的监听了所有的变化,并作出反应。
监听Facebook消息
有了上面的基础,我们就可以做很多有趣的东西。我们知道,每当有新的消息的时候,facebook会给你立即推送,但这是有前提的,你的软件必须和Facebook有合作,或者花钱买Facebook的服务消息推送。比如UC浏览器的海外版,UC浏览器就可以实时帮你推送Facebook的消息,因为UC和Facebook达成了合作,才会给你推送。
我们的突破口在Facebook首页的tab上,每当有新的消息,该主页上的tab会显示一个数字,只要我们实时监听到这个数字变化,就可以实时监听Facebook的消息,让你不用花钱也能实时获取消息提醒,这对于没有和Facebook达成合作协议的浏览器厂商十分有用。
前端可以使用原生JS实现对消息的实时监听,并把消息发送给浏览器客户端,浏览器客户端进行提醒,下面是一点跑除复杂业务需求的基本代码:
var MutationObserverMRN = window.MutationObserver || window.WebKitMutationObserver;
var observerM, targetM;
var observerR, targetR;
var observerN, targetN;
var configGYFBUI = {
'characterData' : true,
'characterDataOldValue' : true,
'childList': true,
'subtree' : true
};
functionobserverMessages(nodeId, type) {
var idDiv = document.getElementById(nodeId);
var parentM = (idDiv.childNodes[0].nodeName == 'A') ? idDiv.childNodes[0] : idDiv;
targetM = parentM.querySelectorAll('span')[1];
if (!observerM) {
observerM = new MutationObserverMRN(function(mutations) {
var strCount = (targetM.innerText == 'undefined') ? '0' : targetM.innerText;
if (parseInt(strCount) > 0) {
var url = 'https://m.facebook.com' + parentM.getAttribute('href');
var href = window.location.href;
var reg = /messages/;
if (!reg.test(href)) {
JSInterfaceManager.receiveFbNoti(type, url, strCount);
}
}
});
}
observerM.observe(targetM, configGYFBUI);
}
functionobserverRequests(nodeId, type) {
var idDiv = document.getElementById(nodeId);
var parentR = (idDiv.childNodes[0].nodeName == 'A') ? idDiv.childNodes[0] : idDiv;
targetR = parentR.querySelectorAll('span')[1];
if (!observerR) {
observerR = new MutationObserverMRN(function(mutations) {
var strCount = (targetR.innerText == 'undefined') ? '0' : targetR.innerText;
if (parseInt(strCount) > 0) {
var url = 'https://m.facebook.com' + parentR.getAttribute('href');
JSInterfaceManager.receiveFbNoti(type, url, strCount);
}
});
}
observerR.observe(targetR, configGYFBUI);
}
functionobserverNotifications(nodeId, type) {
var idDiv = document.getElementById(nodeId);
var parentN = (idDiv.childNodes[0].nodeName == 'A') ? idDiv.childNodes[0] : idDiv;
targetN = parentN.querySelectorAll('span')[1];
if (!observerN) {
observerN = new MutationObserverMRN(function(mutations) {
var strCount = (targetN.innerText == 'undefined') ? '0' : targetN.innerText;
if (parseInt(strCount) > 0) {
var url = 'https://m.facebook.com' + parentN.getAttribute('href');
JSInterfaceManager.receiveFbNoti(type, url, strCount);
}
});
}
observerN.observe(targetN, configGYFBUI);
}
observerMessages('messages_jewel', 'messages');
observerRequests('requests_jewel', 'requests');
observerNotifications('notifications_jewel', 'notifications');
JavaScript:原生JS实现Facebook实时消息抓捕的更多相关文章
- javascript原生js轮播图
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- [javascript]原生js实现Ajax
一.首先看JQuery提供的Ajax方法: $.ajax({ url: , type: '', dataType: '', data: { }, success: function(){ }, err ...
- JavaScript——原生js实现瀑布流
瀑布流介绍及实现原理: 瀑布流是一种页面布局,页面上也有多等宽的块(块就页面内容),每一块都是绝对定位(absolute),每个块排列的方式如下:寻找现在高度最小的列,把该块定位到该列下方.需要知道, ...
- javascript 原生js对html元素的 增删改查 操作
'use strict'; class View{ constructor(){ } //创建html元素 addEl(fel, elemName, id, cls){ //创建一个元素 let el ...
- 用原生JS实现AJAX和JSONP
前端开发在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的.其实,原生 ...
- vue实现实时监听文本框内容的变化(最后一种为原生js)
一.用watch方法监听这个变量. <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- node.js中使用socket.io + express进行实时消息推送
socket.io是一个websocket库,包含客户端的js和服务端的node.js,可以在不同浏览器和移动设备上构建实时应用. 一.安装 socket.io npm install socket. ...
- 【javascript】原生js更改css样式的两种方式
下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3 &quo ...
- 总结获取原生JS(javascript)的父节点、子节点、兄弟节点
关于原生JS获取节点,一直是个头疼的问题,而且调用方法的名字又贼长了,所以我选择用JQ,好像跑题了-- 话不多说看代码 获取父节点 及 父节点下所有子节点(兄弟节点) <ul> <l ...
随机推荐
- Linux查看访问IP
Linux查看访问IP https://blog.csdn.net/tojohnonly/article/details/82772323
- RadioButton使用
RadioButton和CheckBox差不多,这里只写一个,因为我本身不是学andorid,所以就当给自己留一个备份,省的每次用到都需要代码敲一次,很麻烦 1.如果想选中时想改变颜色可以设置一个xm ...
- Python3学习之路~6.2 实例演示面向对象编程的好处
首先建一个dog类,实例化为3个dog对象,并让它们都叫. class Dog: def bulk(self): print("xiaohuang:wang wang wang !" ...
- 2 jmeter常用功能介绍-测试计划、线程组
1.测试计划测试用来描述一个性能测试,所有内容都是基于这个测试计划的. (1)User Defined Variables:设置用户全局变量.一般添加一些系统常用的配置.如果测试过程中想切换环境,切换 ...
- idea-常用插件-nginx
1.mac上nginx安装 brew search nginx brew install nginx 当然也可以编译安装 安装完以后,可以在终端输出的信息里看到一些配置路径: /usr/local/e ...
- Mac提醒事项如何设置为24小时制
- Scala辅助构造器和主构造器
和java或c++一样,scala也可以有任意多的构造器.不过,scala类有一个构造器比其它所有构造器都更为重要,它就是主构造器.除了主构造器之外,类还可以有任意多的辅助构造器. 有两点需要注意: ...
- 远程访问对象java实现
服务端: 定义远程接口: package com.my.rmi; import java.rmi.Remote; import java.rmi.RemoteException; public int ...
- Jenkins 主备master-slave模式搭建
jenkins的版本是2.70,使用下来感觉是一个不错的版本,至于如何搭建jenkins,在此就不多说了,推荐的方法是先安装tomcat,然后再加jenkins.war放在tomcat的webapp路 ...
- seq2seq和attention应用到文档自动摘要
一.摘要种类 抽取式摘要 直接从原文中抽取一些句子组成摘要.本质上就是个排序问题,给每个句子打分,将高分句子摘出来,再做一些去冗余(方法是MMR)等.这种方式应用最广泛,因为比较简单.经典方法有Lex ...