JsBridge源碼分析

客戶端、H5註冊

客戶端

在BridgeWebView的初始化方法中，添加了自定義的BridgeWebViewClient，在onPageFinished方法中，去加載WebViewJavascriptBridge.js文件（在assets目錄下）：

@Override
public void onPageFinished(WebView view, String url) {
    super.onPageFinished(view, url);
    if (BridgeWebView.toLoadJs != null) {
        BridgeUtil.webViewLoadLocalJs(view, BridgeWebView.toLoadJs);
    }
...
}

BridgeUtil # webViewLoadLocalJs：

public static void webViewLoadLocalJs(WebView view, String path){
    String jsContent = assetFile2Str(view.getContext(), path);
    view.loadUrl("javascript:" + jsContent);
}

H5

var doc = document;
_createQueueReadyIframe(doc);
var readyEvent = doc.createEvent('Events');
readyEvent.initEvent('WebViewJavascriptBridgeReady');
readyEvent.bridge = WebViewJavascriptBridge;
doc.dispatchEvent(readyEvent);

H5端在使用的時候需要檢測是否初始化完畢：

if(window.WebViewJavascriptBridge) {
    return callback(WebViewJavascriptBridge);
} else {
    document.addEventListener(
        'WebViewJavascriptBridgeReady',
        function() {
            return callback(WebViewJavascriptBridge);
        },
        false
    );
}

Native調用JS

jsBridgeWebview.callHandler(String handlerName, String data, CallBackFunction callBack);

public interface CallBackFunction {
    public void onCallBack(String data);
}

callHandler方法中調用doSend方法（參數：方法名；數據；回調）：

private void doSend(String handlerName, String data, CallBackFunction responseCallback) {
    Message m = new Message();
    if (!TextUtils.isEmpty(data)) {
        m.setData(data);
    }
    if (responseCallback != null) {
        String callbackStr = String.format(BridgeUtil.CALLBACK_ID_FORMAT, ++uniqueId + (BridgeUtil.UNDERLINE_STR + SystemClock.currentThreadTimeMillis()));
        responseCallbacks.put(callbackStr, responseCallback);
        m.setCallbackId(callbackStr);
    }
    if (!TextUtils.isEmpty(handlerName)) {
        m.setHandlerName(handlerName);
    }
    queueMessage(m);
}

doSend方法中，將參數封裝到Message對象中（注意這個Message不是Android SDK中的Message，是該開源庫自己封裝的Message）；

方法名和數據判空後放入Message對象，單獨看下回調：

生成每個callBack唯一對應的id（其實就是一個固定格式的字符串，用於存儲在Map中的key值）：

String callbackStr = String.format(BridgeUtil.CALLBACK_ID_FORMAT, ++uniqueId + (BridgeUtil.UNDERLINE_STR + SystemClock.currentThreadTimeMillis()));

格式："JAVA_CB_%s" + uniqueId + "_" + 當前時間毫秒值；uniqueId：一個自增的int類型值，默認值爲0；

然後將其放入消息隊列中（List<Message>）：

private void queueMessage(Message m) {
    if (startupMessage != null) {
        startupMessage.add(m);
    } else {
        dispatchMessage(m);
    }
}

走到這裏會看到，startupMessage在直接聲明的時候就初始化了，怎麼會爲空？翻到BridgeWebViewClient類中的onPageFinished方法：

@Override
public void onPageFinished(WebView view, String url) {
    ...
    if (webView.getStartupMessage() != null) {
        for (Message m : webView.getStartupMessage()) {
            webView.dispatchMessage(m);
        }
        webView.setStartupMessage(null);
    }
}

這裏可以看到，webview內容加載完之後，會遍歷這個startupMessage隊列，去調用BridgeWebView中的dispatchMessage方法，將Message作爲參數，並且將startupMessage隊列置爲null；

dispatchMessage方法：

void dispatchMessage(Message m) {
    String messageJson = m.toJson();
    //escape special characters for json string
    messageJson = messageJson.replaceAll("(\\\\)([^utrn])", "\\\\\\\\$1$2");
    messageJson = messageJson.replaceAll("(?<=[^\\\\])(\")", "\\\\\"");
    String javascriptCommand = String.format(BridgeUtil.JS_HANDLE_MESSAGE_FROM_JAVA, messageJson);
    if (Thread.currentThread() == Looper.getMainLooper().getThread()) {
        this.loadUrl(javascriptCommand);
    }
}

將Message對象轉爲Json並做一些處理，最終轉爲js命令：

"javascript:WebViewJavascriptBridge._handleMessageFromNative('%s');"，參數爲json；
最終在java主線程中調用loadUrl方法，去執行WebViewJavascriptBridge.js中的方法_handleMessageFromNative；

WebViewJavascriptBridge.js

//提供給native調用,receiveMessageQueue 在會在頁面加載完後賦值爲null,所以
function _handleMessageFromNative(messageJSON) {
    console.log(messageJSON);
    if (receiveMessageQueue && receiveMessageQueue.length > 0) {
        receiveMessageQueue.push(messageJSON);
    } else {
        _dispatchMessageFromNative(messageJSON);
    }
}

在webview加載完js，即onPageFinished方法後，receiveMessageQueue被置爲null，所以這裏直接執行了_dispatchMessageFromNative方法；

//提供給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) {
            responseCallback = responseCallbacks[message.responseId];
            if (!responseCallback) {
                return;
            }
            responseCallback(message.responseData);
            delete responseCallbacks[message.responseId];
        } else {
            //直接發送
            if (message.callbackId) {
                var callbackResponseId = message.callbackId;
                responseCallback = function(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);
                }
            }
        }
    });
}

（若responseId不爲空，意味着js調用Native並且js有回調，這裏表明Native將js回調需要的數據傳過來了，從回調函數隊列里根據responseId取出回調函數，如果該函數不爲空，執行該回調函數，並移除回調函數隊列裏的該回調函數；）

該方法中，首先將json參數轉爲Message對象；

Native調用Js時沒有responseId，所以直接跳轉到else分支，判斷callbackId，即Native是否需要js返回數據，如果需要，則初始化一個回調函數，裏面調用_doSend方法，將responseId和responseData封裝到message中，放入消息隊列裏；

從messageHandlers中通過handlerName匹配對應的handler（即在Js註冊的時候設置的）；執行該方法，參數爲message中的data，即native中傳遞的data，以及上面初始化的回調函數；

這裏結合H5註冊接口說一下：

WebViewJavascriptBridge.registerHandler("functionInJs", function(data, responseCallback) {
    ...
responseCallback(responseData); // 爲Native返回數據
});

WebViewJavascriptBridge.js #

function registerHandler(handlerName, handler) {
    messageHandlers[handlerName] = handler;
}

可以看到這裏在H5頁面中註冊的供Native調用的方法被添加到messageHandlers隊列中，key值爲方法名；所以上面取出的handler即爲該註冊的方法中定義的回調方法；其中data爲Java端傳來的data，responseCallback爲上面初始化的function：

responseCallback = function(responseData) {
    _doSend({
        responseId: callbackResponseId,
        responseData: responseData
    });
};

再看一下_doSend方法：

//sendMessage add message, 觸發native處理 sendMessage
function _doSend(message, responseCallback) {
    ...
    sendMessageQueue.push(message);
    messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://' + QUEUE_HAS_MESSAGE;
}

將message對象存入sendMessageQueue隊列，改變iframe的src屬性，觸發Java端WebViewClient的shouldOverrideUrlLoading方法執行；

src=”yy://__QUEUE_MESSAGE__/”;

其實這裏是相當於Js跟Webview定義了一個協議，協議爲該src，當webview攔截url時，如果是這個已經定義好的協議，則做相應的處理；

回到BridgeWebViewClient類的shouldOverrideUrlLoading方法中:

@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
    ...
    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);
    }
}

攔截1：url是以"yy://return/"開頭的，調用BridgeWebView的handlerReturnData方法，這時是js爲Native端返回數據；

攔截2：url是以"yy://"開頭的，調用BridgeWebView的flushMessageQueue方法，去刷新消息隊列；

這裏由於url是滿足第二條，所以先看flushMessageQueue方法：

BridgeWebView#flushMessageQueue：

void flushMessageQueue() {
    if (Thread.currentThread() == Looper.getMainLooper().getThread()) {
        loadUrl(BridgeUtil.JS_FETCH_QUEUE_FROM_JAVA, new CallBackFunction() {
            @Override
            public void onCallBack(String data) {
                ...
            }
        });
    }
}

該方法要在主線程執行，調用loadUrl方法：

private void loadUrl(String jsUrl, CallBackFunction returnCallback) {
    this.loadUrl(jsUrl);
    responseCallbacks.put(BridgeUtil.parseFunctionName(jsUrl), returnCallback);
}

JS_FETCH_QUEUE_FROM_JAVA = "javascript:WebViewJavascriptBridge._fetchQueue();"

即調用Js的_fetchQueue方法，將創建的回調對象，以_fetchQueue爲key值存入responseCallbacks中；

觸發Js的_fetchQueue方法去返回數據，在Native去根據回調解析數據做出相應的處理；

WebViewJavascriptBridge.js # _fetchQueue：

// 提供給native調用,該函數作用:獲取sendMessageQueue返回給native,由於android不能直接獲取返回的內容,所以使用url shouldOverrideUrlLoading 的方式返回內容
function _fetchQueue() {
    var messageQueueString = JSON.stringify(sendMessageQueue);
    sendMessageQueue = [];
    //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);
}

在該方法中，首先將js需要回傳給Native的所有數據sendMessageQueue轉爲json，然後觸發Native攔截url處理消息，url = “yy://return/_fetchQueue/returncontent”；

這裏攔截到該url，執行handlerReturnData方法：

BridgeWebView # handlerReturnData：

void handlerReturnData(String url) {
    String functionName = BridgeUtil.getFunctionFromReturnUrl(url);
    CallBackFunction f = responseCallbacks.get(functionName);
    String data = BridgeUtil.getDataFromReturnUrl(url);
    if (f != null) {
        f.onCallBack(data);
        responseCallbacks.remove(functionName);
        return;
    }
}

從url中獲取js傳來的方法名以及Js傳來的值，從responseCallbacks隊列中根據方法名取出回調函數接口對象（該回調對象是在上面存入的key值爲_fetchQueue的回調對象），如果回調接口對象不爲空，則調用其onCallBack函數將js傳來的數據返回給Native端，將該回調函數對象從responseCallbacks隊列中移除；

這裏的回調即flushMessageQueue方法中在loadUrl中設置的回調函數：

loadUrl(BridgeUtil.JS_FETCH_QUEUE_FROM_JAVA, new CallBackFunction() {
@Override
    public void onCallBack(String data) {
        // deserializeMessage
        List<Message> list = null;
        try {
            list = Message.toArrayList(data);
        } catch (Exception e) {
            ...
        }
        ... // 判空
        for (int i = 0; i < list.size(); i++) {
            Message m = list.get(i);
            String responseId = m.getResponseId();
            // 是否是response
            if (!TextUtils.isEmpty(responseId)) {
                CallBackFunction function = responseCallbacks.get(responseId);
                String responseData = m.getResponseData();
                function.onCallBack(responseData);
                responseCallbacks.remove(responseId);
            } else {
                ...
            }
        }
    }
});

由於這裏是在js _fetchQueue方法中將整個消息隊列都返回來了，所以需要遍歷Message集合，找到對應需要的那一條；取出responseId，我們要取的消息是帶有responseId的（Native調用了js並需要回調），這個responseId其實就是一開始java需要回調時生成的callbackId，根據這個callbackId從responseCallbacks取出最開始存入的回調對象並且執行該回調方法，在Native端拿到數據並做相應的處理；

Js調用Native

Native爲Js註冊調用接口：

mBridgeWebView.registerHandler("submitFromWeb", new BridgeHandler() {
    @Override
    public void handler(String data, final CallBackFunction function) {
...
}
});

BridgeWebView # registerHandler：

public void registerHandler(String handlerName, BridgeHandler handler) {
    if (handler != null) {
        messageHandlers.put(handlerName, handler);
    }
}

註冊供Js調用的接口方法，並設置回調，如果回調不爲空，將回調方法放入messageHandlers隊列中，key值爲定義的方法名；

Js調用接口：

WebViewJavascriptBridge.callHandler('submitFromWeb', data, function(responseData) {
    ...        
});

WebViewJavascriptBridge.js中：

function callHandler(handlerName, data, responseCallback) {
    _doSend({
        handlerName: handlerName,
        data: data
    }, responseCallback);
}

返回到WebViewJavascriptBridge # _doSend方法中，將Js端的responseCallback回調函數放入responseCallbacks隊列中，key值爲生成的唯一標識callbackId，併爲message對象設置callbackId，觸發Native端去重載url並攔截；

之後的動作與Native中調Js一樣，shouldOverrideUrlLoading中攔截，執行flushMessageQueue，loadUrl，Js#_fetchQueue方法，生成回調，保存responseCallbacks中，後面繼續執行handlerReturnData，接着看loadUrl中的回調，這次由於js傳來的消息沒有responseId，直接看else分支，即上文中省略號的地方：

if (!TextUtils.isEmpty(responseId)) {
    ...
} else {
    CallBackFunction responseFunction = null;
    // if had callbackId
    final String callbackId = m.getCallbackId();
    if (!TextUtils.isEmpty(callbackId)) {
        responseFunction = new CallBackFunction() {
            @Override
            public void onCallBack(String data) {
                Message responseMsg = new Message();
                responseMsg.setResponseId(callbackId);
                responseMsg.setResponseData(data);
                queueMessage(responseMsg);
            }
        };
    } else {
        responseFunction = new CallBackFunction() {
            @Override
            public void onCallBack(String data) {
                // do nothing
            }
        };
    }
    BridgeHandler handler;
    if (!TextUtils.isEmpty(m.getHandlerName())) {
        handler = messageHandlers.get(m.getHandlerName());
    } else {
        handler = defaultHandler;
    }
    if (handler != null){
        handler.handler(m.getData(), responseFunction);
    }
}

獲取callbackId，如果爲空，直接默認不做處理；

不爲空則說明Js調用了Native，需要Native回調，創建一個回調函數，最後從消息中取出方法名去匹配Native之前註冊的方法，如果不爲空，則調用該對象的回調方法；

上面Native回調不爲空時創建的回調：

responseFunction = new CallBackFunction() {
    @Override
    public void onCallBack(String data) {
        Message responseMsg = new Message();
        responseMsg.setResponseId(callbackId);
        responseMsg.setResponseData(data);
        queueMessage(responseMsg);
    }
};

將要回傳的數據封裝成message,原先從js傳過來的callbackId變成responseId，然後調用queueMessage，dispatchMessage，Js#_handleMessageFromNative，_dispatchMessageFromNative，上文中已分析該方法；

JsBridge源碼分析

客戶端、H5註冊

客戶端

H5

Native調用JS

Js調用Native

SpringCloud動態路由--Zuul

SpringCloud註冊中心--Eureka

View源碼繪製流程

Flutter中的Json解析-原生方式

JsBridge源碼分析

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結