JSBrige系列直通車，由淺入深理解JS-Native的通信過程：
JSbridge系列解析（一）:JS-Native調用方法
JSbridge系列解析（二）:lzyzsd/JsBridge使用方法
JSbridge系列解析（三）:lzyzsd/JsBridge源碼解析
JSbridge系列解析（四）:Web端發(fā)消息給Native代碼流程具體分析
JSBridge使用過程中，運行環(huán)境涉及java和js兩個部分碑定，調用流程在兩部分間流轉。分析過程不僅需要掌握android的開發(fā)知識，還需要熟悉JavaScript語法框都。
以demo工程作為示例講解，默認的Web端發(fā)消息的send方法呵晨。為了便于理解魏保，貼出了流程調用中的關鍵代碼，注意根據(jù)注釋辨別代碼出處（java文件或js文件）
- webview調用loadUrl加載頁面摸屠，加載完成后注入WebViewJavascriptBridge.js
//BridgeWebViewClient.java
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
if (BridgeWebView.toLoadJs != null) {
//注入WebViewJavascriptBridge.js
BridgeUtil.webViewLoadLocalJs(view, BridgeWebView.toLoadJs);
}
//處理消息隊列中的消息
if (webView.getStartupMessage() != null) {
for (Message m : webView.getStartupMessage()) {
webView.dispatchMessage(m);
}
webView.setStartupMessage(null);
}
}
- demo.html頁面中點擊"發(fā)消息給Native"按鈕谓罗，觸發(fā)WebViewJavascriptBridge.js中send方法的調用
//demo.html
function testClick() {
var str1 = document.getElementById("text1").value;
var str2 = document.getElementById("text2").value;
//send message to native
var data = {id: 1, content: "這是一個圖片 <img src=\"a.png\"/> test\r\nhahaha"};
window.WebViewJavascriptBridge.send(
data
, function(responseData) {
document.getElementById("show").innerHTML = "repsonseData from java, data = " + responseData
}
);
}
- WebViewJavascriptBridge發(fā)送消息調用_doSend，將消息存放在sendMessageQueue中季二，將responseCallbck放在responseCallbacks數(shù)組中檩咱，并設置message的callbackId。callbackId由uniqueId配合時間生成胯舷，用于后續(xù)查找responseCallback回調刻蚯。更換iFrame的src，觸發(fā)BridgeWebViewClient的shouldOverrideUrlLoading方法桑嘶。
//WebViewJavascriptBridge.js
function send(data, responseCallback) {
_doSend({
data: data
}, responseCallback);
}
//sendMessage add message, 觸發(fā)native處理 sendMessage
//此時炊汹，生成callbackId用于html頁面中send方法的回調
function _doSend(message, responseCallback) {
if (responseCallback) {
var callbackId = 'cb_' + (uniqueId++) + '_' + new Date().getTime();
responseCallbacks[callbackId] = responseCallback;
message.callbackId = callbackId;
}
sendMessageQueue.push(message);
//更換src，前綴為yy://__QUEUE_MESSAGE__/
messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://' + QUEUE_HAS_MESSAGE;
}
- shouldOverrideUrlLoading方法根據(jù)url的前綴逃顶，進入了BridgeWebView的flushMessageQueue方法讨便。
//BridgeWebViewClient.java
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
try {
url = URLDecoder.decode(url, "UTF-8");
} catch (UnsupportedEncodingException e) {
e.printStackTrace();
}
if (url.startsWith(BridgeUtil.YY_RETURN_DATA)) { // 如果是返回數(shù)據(jù)
//url以yy://return/開頭
webView.handlerReturnData(url);
return true;
} else if (url.startsWith(BridgeUtil.YY_OVERRIDE_SCHEMA)) { //
//url以yy://開頭
webView.flushMessageQueue();
return true;
} else {
return super.shouldOverrideUrlLoading(view, url);
}
}
- flushMessageQueue通過loadUrl調用到WebViewJavascriptBridge.js中的_fetchQueue()方法，并注冊了一個回調函數(shù)以政。注意霸褒，BridgeWebView的loadUrl方法不僅執(zhí)行了js語句調用，還將對應的回調函數(shù)放在responseCallbacks中妙蔗， key是_fetchQueue傲霸。回調函數(shù)的具體內容后續(xù)分析
//BridgeWebView.java
void flushMessageQueue() {
if (Thread.currentThread() == Looper.getMainLooper().getThread()) {
loadUrl(BridgeUtil.JS_FETCH_QUEUE_FROM_JAVA, new CallBackFunction() {
@Override
public void onCallBack(String data) {
// deserializeMessage
......
}
});
}
}
public void loadUrl(String jsUrl, CallBackFunction returnCallback) {
this.loadUrl(jsUrl);
responseCallbacks.put(BridgeUtil.parseFunctionName(jsUrl), returnCallback);
}
- _fetchQueue方法將sendMessageQueue數(shù)組中的所有消息眉反，序列化為json字符串，通過更改iFrame的src穆役，觸發(fā)shouldOverrideUrlLoading方法
//WebViewJavascriptBridge.js
// 提供給native調用,該函數(shù)作用:獲取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);
}
- 具體參考步驟4中代碼寸五，shouldOverrideUrlLoading方法根據(jù)url的前綴，進入了BridgeWebView的handlerReturnData方法耿币。根據(jù)傳入的url（yy://return/_fetchQueue/[{"data":{"id":1,"content":"這是一個圖片 <img src="a.png"/> test\r\nhahaha"},"callbackId":"cb_2_1501580166257"}]）梳杏，獲取回調函數(shù)的functionName為_fetchQueue。根據(jù)步驟5，最終調用了flushMessageQueue中l(wèi)oadUrl傳入的回調函數(shù)十性。
//BridgeWebView.java
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;
}
}
- 分析_fetchQueue的回調函數(shù)叛溢，將json數(shù)據(jù)轉化為Message數(shù)組，依次處理Message數(shù)組中的消息劲适。本次示例中只有demo.html中調用的send方法楷掉，數(shù)據(jù)為{"data":{"id":1,"content":"這是一個圖片 <img src="a.png"/> test\r\nhahaha"},"callbackId":"cb_2_1501580166257"}。此時消息的responseId為空霞势，callbackId是在步驟3的_doSend中生烹植，用于標記send方法的回調。為了實現(xiàn)該功能愕贡，以下代碼中構造了responseMsg來實現(xiàn)Java到Js的調用草雕。由于demo.html的send方法不是assigned handler，所以使用defaultHanlder來處理消息固以。
//BridgeWebView.java
void flushMessageQueue() {
if (Thread.currentThread() == Looper.getMainLooper().getThread()) {
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) {
e.printStackTrace();
return;
}
if (list == null || list.size() == 0) {
return;
}
//依次處理message
for (int i = 0; i < list.size(); i++) {
Message m = list.get(i);
String responseId = m.getResponseId();
// 是否是response墩虹。即Java發(fā)消息給web時，傳入的回調函數(shù)
if (!TextUtils.isEmpty(responseId)) {
CallBackFunction function = responseCallbacks.get(responseId);
String responseData = m.getResponseData();
function.onCallBack(responseData);
responseCallbacks.remove(responseId);
} else {
CallBackFunction responseFunction = null;
// if had callbackId
final String callbackId = m.getCallbackId();
//即Web端發(fā)送消息給Native時憨琳，注冊的回調函數(shù)败晴。需要通過Native->JS觸發(fā)
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())) {
//assigned handler
handler = messageHandlers.get(m.getHandlerName());
} else { //默認handler
handler = defaultHandler;
}
if (handler != null){
handler.handler(m.getData(), responseFunction);
}
}
}
}
});
}
}
- BridgeWebView中的defaultHandler變量由setDefaultHandler函數(shù)設置，根據(jù)MainActivity的初始化語句webView.setDefaultHandler(new DefaultHandler())栽渴，最終調用DefaultHandler的handle方法尖坤。其中CallBackFunction即上個步驟中設置的responseFunction，該方法構造了responseMsg闲擦，設置了responseId（即send方法的callbackId）和data慢味。
//DefaultHandler.java
@Override
public void handler(String data, CallBackFunction function) {
if(function != null){
function.onCallBack("DefaultHandler response data");
}
}
9、 responseMsg通過BridgeWebView的queueMessage墅冷，經過一系列調用纯路，最終進入WebViewJavascriptBridge.js的_handleMessageFromNative
//提供給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); //回調，即進入demo.html的
delete responseCallbacks[message.responseId];
} else {
//直接發(fā)送寞忿。Native調用Web的消息
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);
}
}
}
});
}
Native提供assign handler供Web端調用
- 同上步驟1驰唬。webview加載頁面，完成WebViewJavascriptBridge.js的注入腔彰。
- webview調用rigisterHandler叫编，注冊可供js調用的handler。最終handler在java端存放在webview的messageHandlers變量中
//MainActivity.java
webView.registerHandler("submitFromWeb", new BridgeHandler() {
@Override
public void handler(String data, CallBackFunction function) {
Log.i(TAG, "handler = submitFromWeb, data from web = " + data);
function.onCallBack("submitFromWeb exe, response data 中文 from Java");
}
});
//BridgeWebView.java
public void registerHandler(String handlerName, BridgeHandler handler) {
if (handler != null) {
messageHandlers.put(handlerName, handler);
}
}
- demo.html中調用Native端提供的方法霹抛，名稱為submitFromWeb. WebViewJavascriptBridge提供callHandler作為調用的統(tǒng)一接口搓逾，參數(shù)分別為handlerName，handlerparams杯拐，回調函數(shù)霞篡。
//demo.html
function testClick1() {
var str1 = document.getElementById("text1").value;
var str2 = document.getElementById("text2").value;
//call native method
window.WebViewJavascriptBridge.callHandler(
'submitFromWeb'
, {'param': '中文測試'}
, function(responseData) {
document.getElementById("show").innerHTML = "send get responseData from java, data = " + responseData
}
);
}
- callHandler最終調用_doSend方法世蔗。
//WebViewJavascriptBridge.js
function callHandler(handlerName, data, responseCallback) {
_doSend({
handlerName: handlerName,
data: data
}, responseCallback);
}
- 同上步驟4、5朗兵、6污淋、7。
- 處理_fetchQueue的回調函數(shù)時余掖，此時的json數(shù)據(jù)為{"handlerName":"submitFromWeb","data":{"param":"中文測試"},"callbackId":"cb_3_1501589051919"寸爆。該數(shù)據(jù)反序列化的Message對象getHandlerName為subminFromWeb。根據(jù)messageHandlers找到步驟2中MainActivity注冊的方法浊吏，實現(xiàn)JS到Java的調用而昨。
- 處理JS調用完成的回調函數(shù)，同上步驟9找田。
Web端提供assign handler或default handler供Native端調用
與上述步驟雷同歌憨，各位可具體分析
