对接App跨端通讯机制

Tevin

2021-08-15 dec047c9fbceb85c668970bf6e9dae0588bfd104

 common/Bridge.js

@@ -0,0 +1,197 @@
/**
 * 跨端双向通讯桥
 * @author Tevin
 * @tutorial
 *  网页对 App 发起通讯
 *      1. 【App端】App 注册接收器，用于接收网页通知
 *          在页面打开之前，App 注入方法 linking = function(paramStr) { <Native Code> }
 *      2. 网页业务中 js 发起通讯
 *          $bridge.invoking('methodName', {key1:'value1'}, function(res) {console.log(res)});
 *      3. 由 Bridge 转换为调用注入的方法（含callback）
 *          window.linking('{method:\'methodName\', param:{key1:\'value1\'}, callback:\'bridge.cb111at1541994536008\'}');
 *      4. 【App端】App 处理完后直接调用网页上的全局回调，并传递结果完成通讯
 *          bridge.cb101at1541994536008('{key2:\'value2\'}');
 *  App 对网页发起通讯
 *      1. 网页注册接收器，用于接收 App 通知
 *          window.telling = function(dataStr) { someJs };
 *      2. 网页业务中注册接收通讯
 *          $bridge.register('methodName', function(res, callback) {});
 *      3. 【App端】App 调用网页中的全局方法（至少需要在页面完成并延迟至少1秒之后再调用）
 *          telling('{method:\'methodName\', param:{key1:\'value1\'}, marker:\'mk222at1541994536008\'}');
 *      4. 网页完成业务逻辑处理后调用注入的方法，并传递结果完成通讯（含marker、不含callback）
 *          window.linking('{method:\'methodName\', param:{key2:\'value2\'}, marker:\'mk222at1541994536008\'}');
 */

export class Bridge {

    constructor() {
        this._data = {
            count: 100,
        };
        this._receives = {};
        this._earlyInvok = [];
        this._init();
        // 挂载到全局
        window.bridge = this;
    }

    /**
     * 检查 linking 方法
     * @return {string}
     * @private
     */
    _checkLinking() {
        // 安卓注入
        if (window.aisim && window.aisim.linking) {
            return 'android';
        }
        // 没有注入
        else {
            return '';
        }
    }

    /**
     * 初始化
     * @private
     */
    _init(count = 0) {
        // 500 * 20 毫秒后，仍然未注入，视为不工作
        if (!this._checkLinking() && count < 20) {
            setTimeout(() => {
                this._init(++count);
            }, 500);
        }
        // 开始工作
        else {
            this._initReceive();
            // 补发
            if (this._earlyInvok.length > 0) {
                this._earlyInvok.forEach(invok => {
                    const { method, param, callback } = invok;
                    this._sendLinking(method, param, callback);
                });
            }
        }
    }

    /**
     * 发起一次发送
     * @param {string} method
     * @param {object} param
     * @param {function} callback - 来自网页业务逻辑的回调
     * @private
     */
    _sendLinking(method, param, callback) {
        // 数据检查
        if (Object.prototype.toString.call(param) !== '[object Object]') {
            console.error('$bridge.invoking 需要接受 JSON 对象！');
            return;
        }
        // 如果有回调，转存回调
        const name = 'cb' + this._data.count++ + 'at' + Date.now();
        this[name] = (res) => {
            if (callback && Object.prototype.toString.call(callback) === '[object Function]') {
                if (res) {
                    const data = typeof res === 'string' ? JSON.parse(res) : res;
                    callback(data);
                } else {
                    callback();
                }
            }
            delete this[name];
        };
        // 发送
        window.aisim.linking(JSON.stringify({
            method,
            param,
            callback: 'bridge.' + name,
        }));
    }

    /**
     * 向 app 发起通讯
     * @param {string} method
     * @param {object|function} [param]
     * @param {function} [callback]
     */
    invoking(method, param, callback) {
        // param 为函数时
        const trans = param;
        if (trans && Object.prototype.toString.call(trans) === '[object Function]') {
            callback = trans;
            param = {};
        } else {
            callback = null;
        }
        if (this._checkLinking()) {
            this._sendLinking(method, param, callback);
        }
        // 尚未准备好，挂起
        else {
            this._earlyInvok.push({ method, param, callback });
        }
    }

    /**
     * 初始化接收
     * @private
     */
    _initReceive() {
        window.telling = (res) => {
            const data = typeof res === 'string' ? JSON.parse(res) : res;
            const { method, param, marker } = data;
            if (this._receives[method]) {
                if (marker) {
                    this._receives[method](param, (param2) => {
                        this._sendTelling(method, param2 || {}, marker);
                    });
                } else {
                    this._receives[method](param);
                }
            }
        };
    }

    /**
     * 发送响应
     * @param {string} method
     * @param {object} param
     * @param {string} marker
     * @private
     */
    _sendTelling(method, param, marker) {
        // 数据检查
        if (Object.prototype.toString.call(param) !== '[object Object]') {
            console.error('$bridge.register 注册的函数需要接受 JSON 对象！');
            return;
        }
        // 发送
        window.aisim.linking(JSON.stringify({
            method,
            param,
            marker,
        }));
    }

    /**
     * 注册接收指令，可供 app 查询
     * @param method
     * @param callback
     */
    register(method, callback) {
        this._receives[method] = callback;
    }

    /**
     * 是否有开始工作
     */
    isWorking() {
        const platform = this._checkLinking();
        return platform === 'android' || platform === 'iOS';
    }

}

// 全局服务实例
export const $bridge = new Bridge();