本篇將介紹個人撰寫,稍後會於網頁聊天室會用到的javaScript方法

對firestore文件有興趣的朋友,看這裡

Document

1. 檢查Collection是否存在
   1. 本方法傳入firestore的SDK建立的collection
   2. .get()方法會回傳Promise
   3. 呼叫成功後獲得QuerySnapshot物件,其中的empty屬性為布林值,true表示該collection為空,反之存在
   4. .get()可傳入物件參數,本方法傳遞的{ source: 'server' }表示只取得伺服器的資料,否則他可能會取得cache或本地資料,如此無從判斷該collection是否已存在伺服器中
   5. 在這裡定義了callback與fail兩個回調函式,用以取得異步呼叫的結果,當Promise成功時調用callback,失敗時調用fail

var CollectionExisted = (collection, callback, fail) => {
    try {
        collection.get({ source: 'server' })
            .then(
                result => {
                    callback(!result.empty);
                },
                err => {
                    fail(err);
                }
            );
    } catch (e) {
        console.log(`CollectionExisted Error: ${e}`);
    }
}

2. 取得collection下所有document
   1. 傳遞firestore的SDK建立的collection
   2. 定義callback與fail回調函式
   3. 定義預設為空字串的參數orderByField,用以指定查詢資料的排序的欄位(field)名稱
   4. 調用collection.get()方法取得資料,若orderByField不為空,加上.orderBy(orderByField)排序查詢的資料

var GetRecords = (collection, callback, fail, orderByField = '') => {
    try {
        var query = null;
        if (orderByField) {
            query = collection.orderBy(orderByField).get({ source: 'server' });
        } else {
            query = collection.get({ source: 'server' });
        }
        query.then(
            result => {
                callback(result);
            },
            err => {
                fail(err);
            }
        );
    } catch (e) {
        console.log(`GetRecords Error: ${e}`);
    }
}

3. 寫入資料
   1. 傳遞firestore的SDK建立的collection
   2. 定義callback與fail回調函式
   3. data為要寫入document的資料
   4. 呼叫collection.add()方法將資料寫入collection中,伺服器會為該document建立維一值的ID,寫入的資料便在該document下
   5. 本Promise成功時回傳DocumentReference,該物件下有許多屬性可供使用,如.id為該新建立Document的id

var InsertData = (collection, data, callback, fail) => {
    try {
        collection.add(data)
            .then(
                result => {
                    callback(result);
                },
                err => {
                    fail(err);
                }
            );
    } catch (e) {
        console.log(`InsertData Error: ${e}`);
    }
}

4. 監聽collection變化
   1. 傳遞firestore的SDK建立的collection
   2. 定義callback與fail回調函式
   3. sortField排序欄位名稱,其不為空時調用collection.orderBy(sortField)
   4. 呼叫collection.onSnapshot(),為QuerySnapshot事件附加監聽器,該監聽器可透過呼叫onSnapshot回傳的方法卸除
   5. 當collection發生變化(新增/刪除/修改)便會調用回傳物件的.docChanges(),該方法可取得變化的資料,型別為陣列,這裡透過.forEach()逐一取出並調用callback做下一步處理

var ListenToAllChange=(collection,callback,fail,sortField='')=>{
    try{
        var query=collection;
        if(sortField){
            query=query.orderBy(sortField);
        }
        query.onSnapshot(querySnapshot=>{
            querySnapshot.docChanges().forEach(ele=>{
                callback(ele);
            });
        },
        err=>{
            fail(err);
        });
    }catch(e){
        console.log(`ListenToAllChange Error: ${e}`);
    }
}