斗魚擴展--寶箱記錄查詢(十)

查詢寶箱當然要有數據源，我們把每次搶到的寶箱都保存記錄，這樣，我們可以查詢一段時間內的“成果”，

我第一個想到的是 寫入數據庫，一個小巧的數據庫，當然選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 ，