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

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

我第一个想到的是写入数据库，一个小巧的数据库，当然选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

//初始化数据库

  1 var request;
  2 
  3 var db;
  4 
  5 function initDB(_name,_version){
  6 
  7        try {
  8 
  9               if (!window.indexedDB) {
 10 
 11                      console.log("browser doesn't support indexedDB");
 12 
 13               } else {
 14 
 15                      var name = _name || 'test';
 16 
 17                      var version = _version || 2;
 18 
 19                     
 20 
 21                      request = window.indexedDB.open(_name,_version);
 22 
 23                      request.onerror = function (event) {
 24 
 25                             console.log('数据库打开报错');
 26 
 27                      };
 28 
 29                      request.onsuccess = function (event) {
 30 
 31                             db = request.result;
 32 
 33                             console.log('数据库打开成功');
 34 
 35                      };
 36 
 37                      //增加数据库版本号时,会触发onupgradeneeded事件(会在onsuccess之前被调用)
 38 
 39                      request.onupgradeneeded = function (event) {
 40 
 41                             db = event.target.result;
 42 
 43                      };
 44 
 45               }
 46 
 47        } catch(e) {
 48 
 49               console.log(e.message);
 50 
 51        }
 52 
 53 };
 54 
 55 //初始化 indexedDB
 56 
 57 initDB("DouyuRoom",2);
 58 
 59 request.onupgradeneeded = function(event) {
 60 
 61        db = event.currentTarget.result;
 62 
 63        var objectStore =  db.createObjectStore('t_treasure',{keyPath: 'id',autoIncrement: true });
 64 
 65 };
 66 
 67 function Treasure() {
 68 
 69 }
 70 
 71 var treasure = new Treasure();
 72 
 73 Treasure.add = function(_obj) {  
 74 
 75        var tx = db.transaction("t_treasure", 'readwrite');
 76 
 77        var store = tx.objectStore("t_treasure");
 78 
 79        _obj.time= formatDateTime(new Date());
 80 
 81        console.log(_obj);
 82 
 83        store.add(_obj);
 84 
 85 };
 86 
 87  
 88 
 89 function time1Lesstime2(d1,d2)
 90 
 91 {
 92 
 93        return d1.replace(/-/g,"").replace(/:/g,"").replace(/ /g,"")< d2.replace(/-/g,"").replace(/:/g,"").replace(/ /g,"");
 94 
 95 };
 96 
 97 var dataFromIndexDb;
 98 
 99 Treasure.find = function(_s,_e){
100 
101        _s=_s +"00:00:00";
102 
103        _e=_e +"23:59:59";
104 
105        dataFromIndexDb=[];
106 
107        var objectStore = db.transaction('t_treasure').objectStore('t_treasure');
108 
109        objectStore.openCursor().onsuccess = function (event) {
110 
111               var cursor = event.target.result;            
112 
113               if (cursor) {
114 
115                      if (time1Lesstime2(_s,cursor.value.time) &&time1Lesstime2(cursor.value.time,_e)){
116 
117                             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};
118 
119                             // console.log('time: ' + cursor.value.time);
120 
121                             dataFromIndexDb.push(t);
122 
123                             cursor.continue();
124 
125                      }                  
126 
127               } else {
128 
129                      //console.log('没有数据了！');
130 
131               }           
132 
133        };
134 
135 };
136 
137 function formatDateTime(inputTime) {  
138 
139        var date = new Date(inputTime);
140 
141        var y = date.getFullYear();  
142 
143        var m = date.getMonth() + 1;  
144 
145        m = m < 10 ? ('0' + m) : m;  
146 
147        var d = date.getDate();  
148 
149        d = d < 10 ? ('0' + d) : d;  
150 
151        var h = date.getHours();
152 
153        h = h < 10 ? ('0' + h) : h;
154 
155        var minute = date.getMinutes();
156 
157        var second = date.getSeconds();
158 
159        minute = minute < 10 ? ('0' + minute) : minute;  
160 
161        second = second < 10 ? ('0' + second) : second; 
162 
163        return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;  
164 
165 };

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

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

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

猜你喜欢