[源碼學習]Android JsBridge源碼學習

時間  2019-11-29
標籤 源碼 學習 android jsbridge 欄目 Android 简体版
原文   原文鏈接

Android JsBridge源碼學習

衆所周知Android 4.2如下的WebView存在addJavascriptInterface漏洞的問題，不太瞭解的同窗可參考
Android4.2下 WebView的addJavascriptInterface漏洞解決方案
@JavascriptInterface
所以，公司項目中很早便使用 JsBridge 實現 「JS與Native的通訊」 了。javascript

Native與JS通訊原理

Android端WebView啓動時，會加載一段WebViewJavascriptBridge.js的js腳本代碼。html

  • Native調用JS代碼：
    當Native須要向JS端傳遞數據時，直接在Android WebView中使用WebView.loadURL(javascript:WebViewJavascriptBridge.xxxxx)調用在WebViewJavascriptBridge.js中提早定義好的xxxxx方法，將數據傳遞到JS端;
  • JS調用Native代碼：
    當JS須要將數據傳遞給Native時，經過JS reload iframe將數據傳遞到Native的shouldOverrideUrlLoading(WebView view, String url) 方法的url參數中，Android端經過截獲url獲取JS傳遞過來的參數。

以此來實現Native與JS的通訊。java

GitHub源碼

lzyzsd/JsBridgeandroid

我註釋的JsBridgegit

Native調用JS代碼，向JS端傳遞數據

如下是「 Native向JS端傳遞數據，並接受JS回調數據 」的時序圖github

sequenceDiagram
participant BridgeWebView.java as clientA
participant WebViewJavascriptBridge.js as serverA
participant demo.html as serverB

Note over clientA:  Native向JS端傳遞數據
clientA-->>clientA: BridgeWebView.callHandler\n("functionInJs", \n"Native向JS問好",\n mCallBackFunction);
clientA-->>clientA: doSend(handlerName, data, responseCallback)
clientA-->>clientA: queueMessage(m) 
clientA-->>clientA: dispatchMessage(m)
clientA->>serverA: BridgeWebView.loadUrl(javascriptCommand)\n調用JS的_handleMessageFromNative方法
serverA-->>serverA: _handleMessageFromNative(messageJSON)
serverA-->>serverA: _dispatchMessageFromNative(messageJSON)
serverA->>serverB: handler(message.data, responseCallback)
serverB-->>serverB: bridge.registerHandler\n("functionInJs", \nfunction(data, responseCallback))
serverB-->>serverA: responseCallback(responseData)
serverA-->>serverA: _doSend({responseId，responseData});
serverA-->>clientA: reload iframe "yy://__QUEUE_MESSAGE__/"
clientA-->>clientA: shouldOverrideUrlLoading(view, url)
clientA-->>clientA: flushMessageQueue()
clientA->>serverA: BridgeWebView.loadUrl(javascriptCommand)\n調用JS的_fetchQueue()方法
serverA-->>serverA: _fetchQueue()
serverA-->>clientA: reload iframe "yy://return/_fetchQueue/[{"data"}]"
clientA-->>clientA: handlerReturnData(String url)
clientA-->>clientA: flushMessageQueue中onCallBack
clientA-->>clientA: mCallBackFunction.onCallBack(responseData)
複製代碼

BridgeWebView.java

callHandler("functionInJs", "Native向JS問好", mCallBackFunction);

/**
     * Native調用JS
     * <p>
     * call javascript registered handler
     * 調用javascript處理程序註冊
     *
     * @param handlerName JS中註冊的handlerName
     * @param data        Native傳遞給JS的數據
     * @param callBack    JS處理完成後，回調到Native
     */
    public void callHandler(String handlerName, String data, CallBackFunction callBack) {
        doSend(handlerName, data, callBack);
    }
複製代碼

註釋很全，看註釋吧，不做講解web

BridgeWebView.java

doSend(handlerName, data, responseCallback)

    /**
     * Native 調用 JS
     * <p>
     * 保存message到消息隊列
     *
     * @param handlerName      JS中註冊的handlerName
     * @param data             Native傳遞給JS的數據
     * @param responseCallback JS處理完成後，回調到Native
     */
    private void doSend(String handlerName, String data, CallBackFunction responseCallback) {
        LogUtils.e(TAG, "doSend——>data: " + data);
        LogUtils.e(TAG, "doSend——>handlerName: " + handlerName);
        // 建立一個消息體
        Message m = new Message();
        // 添加數據
        if (!TextUtils.isEmpty(data)) {
            m.setData(data);
        }
        //
        if (responseCallback != null) {
            // 建立回調ID
            String callbackStr = String.format(BridgeUtil.CALLBACK_ID_FORMAT, ++uniqueId + (BridgeUtil.UNDERLINE_STR + SystemClock.currentThreadTimeMillis()));
            // 一、JS回調Native數據時候使用；key: id value: callback (經過JS返回的callbackID 能夠找到相應的CallBack方法)
            responseCallbacks.put(callbackStr, responseCallback);
            // 一、JS回調Native數據時候使用；key: id value: callback (經過JS返回的callbackID 能夠找到相應的CallBack方法)
            m.setCallbackId(callbackStr);
        }
        // JS中註冊的方法名稱
        if (!TextUtils.isEmpty(handlerName)) {
            m.setHandlerName(handlerName);
        }
        LogUtils.e(TAG, "doSend——>message: " + m.toJson());
        // 添加消息 或者 分發消息到JS
        queueMessage(m);
    }
複製代碼
  • 作了一個Message來封裝data數據
  • 建立了一個callBackId，並將對應的引用存儲在Map responseCallbacks，這樣JS相應方法處理結束後，將JS的處理結果返回來的時候，Native可經過該callbackId找到對應的CallBackFunction，從而完成數據回調。
    /**
     * BridgeWebView.java
     * list<message> != null 添加到消息集合不然分發消息
     *
     * @param m Message
     */
    private void queueMessage(Message m) {
        LogUtils.e(TAG, "queueMessage——>message: " + m.toJson());
        if (startupMessage != null) {
            startupMessage.add(m);
        } else {
            // 分發消息
            dispatchMessage(m);
        }
    }

    /**
    * BridgeWebView.java
     * 分發message 必須在主線程才分發成功
     *
     * @param m Message
     */
    void dispatchMessage(Message m) {
        LogUtils.e(TAG, "dispatchMessage——>message: " + m.toJson());
        // 轉化爲JSon字符串
        String messageJson = m.toJson();
        //escape special characters for json string  爲json字符串轉義特殊字符
        messageJson = messageJson.replaceAll("(\\\\)([^utrn])", "\\\\\\\\$1$2");
        messageJson = messageJson.replaceAll("(?<=[^\\\\])(\")", "\\\\\"");
        String javascriptCommand = String.format(BridgeUtil.JS_HANDLE_MESSAGE_FROM_JAVA, messageJson);

        LogUtils.e(TAG, "dispatchMessage——>javascriptCommand: " + javascriptCommand);
        // 必需要找主線程纔會將數據傳遞出去 --- 劃重點
        if (Thread.currentThread() == Looper.getMainLooper().getThread()) {
            // 調用JS中_handleMessageFromNative方法
            this.loadUrl(javascriptCommand);
        }
    }
複製代碼
  • dispatchMessage中，經過load javascript:WebViewJavascriptBridge._handleMessageFromNative('%s');將Message數據傳遞到JS方法的_handleMessageFromNative當中
// Native經過loadUrl(JS_HANDLE_MESSAGE_FROM_JAVA)，調用JS中_handleMessageFromNative方法，實現Native向JS傳遞數據
final static String JS_HANDLE_MESSAGE_FROM_JAVA = "javascript:WebViewJavascriptBridge._handleMessageFromNative('%s');";
複製代碼

WebViewJavascriptBridge.jsjson

    // 一、收到Native的消息
    // 提供給native調用,receiveMessageQueue 在會在頁面加載完後賦值爲null,因此
    function _handleMessageFromNative(messageJSON) {
        //
        console.log(messageJSON);
        // 添加到消息隊列
        if (receiveMessageQueue) {
            receiveMessageQueue.push(messageJSON);
        }
        // 分發Native消息
        _dispatchMessageFromNative(messageJSON);

    }
複製代碼
  • 這裏將Native發送過來的消息添加到receiveMessageQueue數組中。
    //二、分發Native消息
    function _dispatchMessageFromNative(messageJSON) {
        setTimeout(function() {
            // 解析消息
            var message = JSON.parse(messageJSON);
            //
            var responseCallback;
            //java call finished, now need to call js callback function
            if (message.responseId) {
                ...
            } else {
                // 消息中有callbackId 說明須要將處理完成後，須要回調Native端
                //直接發送
                if (message.callbackId) {
                    // 回調消息的 回調ID
                    var callbackResponseId = message.callbackId;
                    //
                    responseCallback = function(responseData) {
                        // 發送JS端的responseData
                        _doSend({
                            responseId: callbackResponseId,
                            responseData: responseData
                        });
                    };
                }

                var handler = WebViewJavascriptBridge._messageHandler;
                if (message.handlerName) {
                    handler = messageHandlers[message.handlerName];
                }
                //查找指定handler
                try {
                    handler(message.data, responseCallback);
                } catch (exception) {
                    if (typeof console != 'undefined') {
                        console.log("WebViewJavascriptBridge: WARNING: javascript handler threw.", message, exception);
                    }
                }
            }
        });
    }
複製代碼

demo.html數組

bridge.registerHandler("functionInJs", function(data, responseCallback) {
    document.getElementById("show").innerHTML = ("data from Java: = " + data);
    if (responseCallback) {
        var responseData = "Javascript Says Right back aka!";
        responseCallback(responseData);
    }
});
複製代碼
  • 這裏調用到JS的functionInJs註冊方法，並將JS的處理結果Javascript Says Right back aka!返回，回調到WebViewJavascriptBridge.js _dispatchMessageFromNative註冊的responseCallback，從而調用到WebViewJavascriptBridge.js 的_doSend方法之中。

一下爲WebViewJavascriptBridge.js 的_doSendapp

WebViewJavascriptBridge.js

// 發送JS端的responseData
_doSend({
    responseId: callbackResponseId,
    responseData: responseData
});
複製代碼
// 三、JS將數據發送到Native端
// sendMessage add message, 觸發native的 shouldOverrideUrlLoading方法，使Native主動向JS取數據
//
// 把消息隊列數據放到shouldOverrideUrlLoading 的URL中不就能夠了嗎？
// 爲何還要Native主動取一次，而後再放到shouldOverrideUrlLoading的URL中返回?
function _doSend(message, responseCallback) {
    // 發送的數據存在
    if (responseCallback) {
        //
        var callbackId = 'cb_' + (uniqueId++) + '_' + new Date().getTime();
        responseCallbacks[callbackId] = responseCallback;
        message.callbackId = callbackId;
    }
    // 添加到消息隊列中
    sendMessageQueue.push(message);
    // 讓Native加載一個新的頁面
    messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://' + QUEUE_HAS_MESSAGE;
}
複製代碼
  • 一、將Native發送過來的Message數據，存儲到sendMessageQueue消息隊列中
  • 二、_doSend 中 reload iframe " yy://QUEUE_MESSAGE/ " 觸發native的 shouldOverrideUrlLoading方法

BridgeWebViewClient.java

@Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        LogUtils.d(TAG, "shouldOverrideUrlLoading——>url: " + url);
        try {
            url = URLDecoder.decode(url, "UTF-8");
        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        }

        if (url.startsWith(BridgeUtil.YY_RETURN_DATA)) { // 若是是返回數據
            webView.handlerReturnData(url);
            return true;
        } else if (url.startsWith(BridgeUtil.YY_OVERRIDE_SCHEMA)) { //
            webView.flushMessageQueue();
            return true;
        } else {
            return super.shouldOverrideUrlLoading(view, url);
        }
    }
複製代碼
  • _doSend 中 reload iframe " yy://QUEUE_MESSAGE/ " 觸發native的 shouldOverrideUrlLoading方法，最終調用到webView.flushMessageQueue();方法中
    /**
     * 一、調用JS的 _fetchQueue方法，獲取JS中處理後的消息隊列。
     * JS 中_fetchQueue 方法 中將Message數據返回到Native的 {@link #BridgeWebViewClient.shouldOverrideUrlLoading}中
     * <p>
     * 二、等待{@link #handlerReturnData} 回調 Callback方法
     */
    void flushMessageQueue() {
        LogUtils.d(TAG, "flushMessageQueue");
        if (Thread.currentThread() == Looper.getMainLooper().getThread()) {
            // 調用JS的 _fetchQueue方法
            BridgeWebView.this.loadUrl(BridgeUtil.JS_FETCH_QUEUE_FROM_JAVA, new CallBackFunction() {

                @Override
                public void onCallBack(String data) {
                    // ... 此處暫時省略
                }
            });
        }
    }
複製代碼
  • flushMessageQueue中加載了一段JS腳本，JS_FETCH_QUEUE_FROM_JAVA，如下爲JS腳本的代碼。
// 調用JS的 _fetchQueue方法。_fetchQueue方法中將Message數據返回到Native的shouldOverrideUrlLoading中
final static String JS_FETCH_QUEUE_FROM_JAVA = "javascript:WebViewJavascriptBridge._fetchQueue();";
複製代碼
  • 這段JS腳本代碼調用到的是 WebViewJavascriptBridge.js中的 _fetchQueue方法。

WebViewJavascriptBridge.js

// 將數據返回給Native
// 提供給native調用,該函數做用:獲取sendMessageQueue返回給native,因爲android不能直接獲取返回的內容,因此使用url shouldOverrideUrlLoading 的方式返回內容
    function _fetchQueue() {
        // json數據
        var messageQueueString = JSON.stringify(sendMessageQueue);
        // message數據清空
        sendMessageQueue = [];
        // 數據返回到shouldOverrideUrlLoading
        //android can't read directly the return data, so we can reload iframe src to communicate with java
        messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://return/_fetchQueue/' + encodeURIComponent(messageQueueString);
    }
複製代碼
  • 這裏經過 reload iframe " yy://return/_fetchQueue/ + encodeURIComponent(messageQueueString)"將數據發送給Native的shouldOverrideUrlLoading方法中。
    /**
     * 一、獲取到CallBackFunction data執行調用而且從數據集移除
     * <p>
     * 二、回調Native{@link #flushMessageQueue()} Callback方法
     *
     * @param url
     */
    void handlerReturnData(String url) {
        LogUtils.d(TAG, "handlerReturnData——>url: " + url);
        // 獲取js的方法名稱
        // _fetchQueue
        String functionName = BridgeUtil.getFunctionFromReturnUrl(url);
        // 獲取_fetchQueue 對應的回調方法
        CallBackFunction f = responseCallbacks.get(functionName);
        // 獲取body Message消息體
        String data = BridgeUtil.getDataFromReturnUrl(url);

        // 回調 Native flushMessageQueue callback方法
        if (f != null) {
            LogUtils.d(TAG, "onCallBack data" + data);
            f.onCallBack(data);
            responseCallbacks.remove(functionName);
            return;
        }
    }
複製代碼
  • 這裏的CallBackFunction 回調到了flushMessageQueue方法的onCallBack中。
@Override
public void onCallBack(String data) {
    LogUtils.d(TAG, "flushMessageQueue——>data: " + data);
    // deserializeMessage 反序列化消息
    List<Message> list = null;
    try {
        list = Message.toArrayList(data);
    } catch (Exception e) {
        e.printStackTrace();
        return;
    }
    if (list == null || list.size() == 0) {
        LogUtils.e(TAG, "flushMessageQueue——>list.size() == 0");
        return;
    }
    for (int i = 0; i < list.size(); i++) {
        Message m = list.get(i);
        String responseId = m.getResponseId();
        /**
         * 完成Native向JS發送信息後的回調
         */
        // 是不是response  CallBackFunction
        if (!TextUtils.isEmpty(responseId)) {
            CallBackFunction function = responseCallbacks.get(responseId);
            String responseData = m.getResponseData();
            function.onCallBack(responseData);
            responseCallbacks.remove(responseId);
        } else {
            // ... 此處暫時省略
        }
    }
}
複製代碼
  • 這裏循環了從JS端獲取到的Message隊列，並將JS端獲取的數據，回調到了Native中對應的CallBackFunction中。

到這裏，JsBridge中Native調用JS代碼的通訊，則完成了。

一個問題

WebViewJavascriptBridge.js的_doSend(message, responseCallback)方法中，把Message消息隊列 放到shouldOverrideUrlLoading 的URL中直接返回給Native不就能夠了嗎？

爲何還要用_doSend 中 reload iframe " yy://QUEUE_MESSAGE/ " 觸發native的 shouldOverrideUrlLoading方法，讓Native主動向JS請求一次Message隊列，而後再放到shouldOverrideUrlLoading的URL中返回給Native呢?

我的觀點：
以爲，這樣將Message集中在一塊兒，經過發送一個消息給Native，讓Native主動將全部數據請求回來。避免了JS與Native的頻繁交互。

JS調用Native代碼，向Native傳遞數據

不太想說了，就到這吧

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程