JSBrige系列直通車，由淺入深理解JS-Native的通信過程：
JSbridge系列解析（一）:JS-Native調(diào)用方法
JSbridge系列解析（二）:lzyzsd/JsBridge使用方法
JSbridge系列解析（三）:lzyzsd/JsBridge源碼解析
JSbridge系列解析（四）:Web端發(fā)消息給Native代碼流程具體分析
先說結(jié)論吧：必須在主線程中調(diào)用BridgeWebView的CallHandler方法，否則可能無效。
開發(fā)中遇到一個(gè)場(chǎng)景，需要在上傳圖片過程中，調(diào)用CallHandler后，向JS代碼傳遞上傳進(jìn)度。但實(shí)際測(cè)試發(fā)現(xiàn)，JS未觸發(fā)。下面我們看下JsBridge的實(shí)現(xiàn)源碼來分析該問題的原因。
Java代碼調(diào)用JS
調(diào)用流程引用簡(jiǎn)書中某作者圖，具體可見http://www.lxweimin.com/p/fce3e2f9cabc
以Demo中MainActivity中WebView.CallHandler為例，調(diào)用流程比較簡(jiǎn)單直接，不做過多講解。直接看源碼，如下：
/**
* call javascript registered handler
*
* @param handlerName 方法名
* @param data 入?yún)ⅲ话銥楹头?wù)器約定的gson對(duì)象
* @param callBack 回調(diào)函數(shù)
*/
public void callHandler(String handlerName, String data, CallBackFunction callBack) {
doSend(handlerName, data, callBack);
}
//1）組裝Message對(duì)象；2）強(qiáng)回調(diào)函數(shù)保存在responseCallbacks中
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);
}
//將消息加入隊(duì)列。若隊(duì)列為空，則直接分發(fā)運(yùn)行
private void queueMessage(Message m) {
if (startupMessage != null) {
startupMessage.add(m);
} else {
dispatchMessage(m);
}
}
//1)將Message對(duì)象轉(zhuǎn)為JS語句，2）通過loadUrl執(zhí)行JS代碼，觸發(fā)lib庫中的_handleMessageFromNative方法
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);
}
}
接下來我們著重看下queueMessage方法，心里會(huì)有這樣的疑問：startupMessage對(duì)象在什么情況下會(huì)為空呢。看BridgeWebview的成員變量聲明語句，startupMessage在聲明時(shí)已被初始化。
//BridgeWebView.java
private List<Message> startupMessage = new ArrayList<Message>();
在BridgeWebView中，startupMessage并未被賦值為空；這就只能全局搜索startupMessage的引用了。最終在BridgeWebViewClient的onPageFinished方法中找到。
//BridgeWebViewClient.java
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
//加載asset目錄下的WebViewJavascriptBridge.js文件
if (BridgeWebView.toLoadJs != null) {
BridgeUtil.webViewLoadLocalJs(view, BridgeWebView.toLoadJs);
}
//將startupMessage隊(duì)列中的所有消息執(zhí)行，并將隊(duì)列置為空
if (webView.getStartupMessage() != null) {
for (Message m : webView.getStartupMessage()) {
webView.dispatchMessage(m);
}
webView.setStartupMessage(null);
}
}
根據(jù)我的理解，startupMessage隊(duì)列主要是用來在JsBridge的js庫注入之前，保存Java調(diào)用JS的消息，避免消息的丟失或失效。待頁面加載完成后，后續(xù)CallHandler的調(diào)用，可直接使用loadUrl方法而不需入隊(duì)。究其根本，是因?yàn)镴s代碼庫必須在onPageFinished（頁面加載完成）中才能注入導(dǎo)致的。
再回到文章頭部的問題，開發(fā)中頁面加載完成，此時(shí)startupMessage隊(duì)列為空。用戶選擇圖片上傳時(shí)，由于上傳是異步線程，進(jìn)度回調(diào)也運(yùn)行在非ui線程。當(dāng)調(diào)用BridgeWebView的dispatchMessage方法時(shí)，因當(dāng)前線程為非主線程，導(dǎo)致并未觸發(fā)loadUrl。解決方法時(shí)必須在主線程中調(diào)用CallHandler方法
WebViewJavascriptBridge.js實(shí)現(xiàn)
接下來看JsBridge庫中WebViewJavascriptBridge.js代碼，CallHandler方法最終會(huì)執(zhí)行js中_handleMessageFromNative方法
//提供給native調(diào)用,receiveMessageQueue 在會(huì)在頁面加載完后賦值為null,所以最終調(diào)用了_dispatchMessageFromNative方法
function _handleMessageFromNative(messageJSON) {
console.log(messageJSON);
if (receiveMessageQueue && receiveMessageQueue.length > 0) {
receiveMessageQueue.push(messageJSON);
} else {
_dispatchMessageFromNative(messageJSON);
}
}
//提供給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 {
//直接發(fā)送
if (message.callbackId) {
var callbackResponseId = message.callbackId;
responseCallback = function(responseData) {
_doSend({
responseId: callbackResponseId,
responseData: responseData
});
};
}
//獲取默認(rèn)handler。若message設(shè)置了handlerName，則在messageHandlers中依據(jù)名字獲取
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);
}
}
}
});
}
//存儲(chǔ)注冊(cè)的Handler（assigned handlerName）
function registerHandler(handlerName, handler) {
messageHandlers[handlerName] = handler;
}
根據(jù)CallHandler調(diào)用過程中Message的創(chuàng)建代碼，其responseId為null，故最終調(diào)用handler = messageHandlers[message.handlerName]。該隊(duì)列中存儲(chǔ)Js注冊(cè)給Java調(diào)用的Handler方法，即源碼示例的demo.html文件中的functionInJs。
//demo.html
connectWebViewJavascriptBridge(function(bridge) {
//初始化，設(shè)置WebViewJavascriptBridge._messageHandler
bridge.init(function(message, responseCallback) {
console.log('JS got a message', message);
var data = {
'Javascript Responds': '測(cè)試中文!'
};
console.log('JS responding with', data);
responseCallback(data);
});
//注冊(cè)方法供java調(diào)用
bridge.registerHandler("functionInJs", function(data, responseCallback) {
document.getElementById("show").innerHTML = ("data from Java: = " + data);
var responseData = "Javascript Says Right back aka!";
responseCallback(responseData);
});
})
JS代碼調(diào)用Java
實(shí)現(xiàn)原理：利用js的iFrame（不顯示）的src動(dòng)態(tài)變化，觸發(fā)java層WebViewClient的shouldOverrideUrlLoading方法，然后讓本地去調(diào)用javasript。
JS代碼執(zhí)行完成后，最終調(diào)用_doSend方法處理回調(diào)。
//sendMessage add message, 觸發(fā)native處理 sendMessage.【JS代碼】
function _doSend(message, responseCallback) {
if (responseCallback) {
var callbackId = 'cb_' + (uniqueId++) + '_' + new Date().getTime();
responseCallbacks[callbackId] = responseCallback;
message.callbackId = callbackId;
}
sendMessageQueue.push(message);
messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://' + QUEUE_HAS_MESSAGE;
}
iFrame變更后，java部分觸發(fā)shouldOverrideUrlLoading方法，根據(jù)scheme不同，進(jìn)入webview的flushMessageQueue方法。該方法最終調(diào)用JS的_fetchQueue方法。
// 提供給native調(diào)用,該函數(shù)作用:獲取sendMessageQueue返回給native,由于android不能直接獲取返回的內(nèi)容,所以使用url shouldOverrideUrlLoading 的方式返回內(nèi)容
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);
}
上述方法運(yùn)行后，iFrame再次變更，java部分觸發(fā)shouldOverrideUrlLoading方法，根據(jù)scheme不同，進(jìn)入webview的handlerReturnData方法，實(shí)現(xiàn)java回調(diào)函數(shù)的調(diào)用。
疑問：目前還未想明白_doSend為什么不直接調(diào)用_fetchQueue，而必須通過Java代碼轉(zhuǎn)一圈。后續(xù)明白了再補(bǔ)充吧。
目前想到的使用_fetchQueue的一個(gè)優(yōu)點(diǎn)，可以批量處理Message。因_doSend中將待處理的message放入sendMessageQueue，而_fetchQueue中將隊(duì)列中消息全部取出轉(zhuǎn)為json數(shù)據(jù)傳遞給WebViewClient。
