斗鱼扩展--宝箱记录查询(十)

查询宝箱当然要有数据源，我们把每次抢到的宝箱都保存记录，这样，我们可以查询一段时间内的“成果”，

我第一个想到的是 写入数据库，一个小巧的数据库，当然选mysql啦，如果不想安装其它东西，浏览器自带的IndexedDB，也行，因为Web Sql 不能持久化，所以不用。

先说数据从哪来，每次抢宝箱成功，都会 弹出，”恭喜您，领取了XXXX 个鱼丸”， ” 恭喜您，领取了XXXX 个稳”，然后 查出在 mod-all1.js内，this.appendTips(n),这个n会变动的。

 

function insertData(_data) {

       console.log(_data);

       window.postMessage({"insertSql": _data}, '*');

};

　　

可以在外面定义一个 方法，用window.postMessage传给popup层，popoup 把数据处理后，传给background层，background 写入数据库。

 

 

Popup接收

//接收 window.postMessage({"insertSql": _data}, '*'); 类型的消息

window.addEventListener("message", function(e)

{

       if (e.data.hasOwnProperty("insertSql") ) {

              var data = e.data.insertSql;

              data.roomId = roomObj.getRoomId();  //房间id

              data.time = RoomObj.formatDateTime(new Date());//格式化后的当前时间("YYYY-MM-DD HH:mm:ss")

             

}, false);

　　

再用 chrome.runtime.sendMessage(

              _data,    //数据

              function(response) {        

              }

       );

发给 Background层

Background 用chrome.runtime.onMessage.addListener(function(message, sender, sendResponse){}接收，然后用WebSocket 发给后端，后端，我用C#写的，调用 Fleck.dll 内的WebSocketServer 与js对接，拿到数据，写入 数据库。

有些人 不喜欢安装其他东西，也不喜欢运行其它程序，那就只能放入 浏览器IndexedDB内了，但一卸载扩展数据就会丢失，查询大量数据时，也耗时，

 background层 加载indexedDB.js

//初始化数据库

var request;

var db;

function initDB(_name,_version){

       try {

              if (!window.indexedDB) {

                     console.log("browser doesn't support indexedDB");

              } else {

                     var name = _name || 'test';

                     var version = _version || 2;

                    

                     request = window.indexedDB.open(_name,_version);

                     request.onerror = function (event) {

                            console.log('数据库打开报错');

                     };

                     request.onsuccess = function (event) {

                            db = request.result;

                            console.log('数据库打开成功');

                     };

                     //增加数据库版本号时,会触发onupgradeneeded事件(会在onsuccess之前被调用)

                     request.onupgradeneeded = function (event) {

                            db = event.target.result;

                     };

              }

       } catch(e) {

              console.log(e.message);

       }

};

//初始化 indexedDB

initDB("DouyuRoom",2);

request.onupgradeneeded = function(event) {

       db = event.currentTarget.result;

       var objectStore =  db.createObjectStore('t_treasure',{keyPath: 'id',autoIncrement: true });

};

function Treasure() {

}

var treasure = new Treasure();

Treasure.add = function(_obj) {  

       var tx = db.transaction("t_treasure", 'readwrite');

       var store = tx.objectStore("t_treasure");

       _obj.time= formatDateTime(new Date());

       console.log(_obj);

       store.add(_obj);

};

 

function time1Lesstime2(d1,d2)

{

       return d1.replace(/-/g,"").replace(/:/g,"").replace(/ /g,"")< d2.replace(/-/g,"").replace(/:/g,"").replace(/ /g,"");

};

var dataFromIndexDb;

Treasure.find = function(_s,_e){

       _s=_s +"00:00:00";

       _e=_e +"23:59:59";

       dataFromIndexDb=[];

       var objectStore = db.transaction('t_treasure').objectStore('t_treasure');

       objectStore.openCursor().onsuccess = function (event) {

              var cursor = event.target.result;            

              if (cursor) {

                     if (time1Lesstime2(_s,cursor.value.time) &&time1Lesstime2(cursor.value.time,_e)){

                            var t= {time:cursor.value.time,roomId: cursor.value.roomId,src_nick:cursor.value.src_nick,award_type:cursor.value.award_type,silver:cursor.value.silver,prop_count:cursor.value.prop_count};

                            // console.log('time: ' + cursor.value.time);

                            dataFromIndexDb.push(t);

                            cursor.continue();

                     }                  

              } else {

                     //console.log('没有数据了！');

              }           

       };

};

function formatDateTime(inputTime) {  

       var date = new Date(inputTime);

       var y = date.getFullYear();  

       var m = date.getMonth() + 1;  

       m = m < 10 ? ('0' + m) : m;  

       var d = date.getDate();  

       d = d < 10 ? ('0' + d) : d;  

       var h = date.getHours();

       h = h < 10 ? ('0' + h) : h;

       var minute = date.getMinutes();

       var second = date.getSeconds();

       minute = minute < 10 ? ('0' + minute) : minute;  

       second = second < 10 ? ('0' + second) : second; 

       return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;  

};

这样，就会写入 浏览器的IndexedDB ,

至于查询页面，有数据源了，大家各有各的方法显示查询结果，我用的是vue.js 与 组件 | Element ，