JSBrige系列直通车，由浅入深理解JS-Native的通信过程：
JSbridge系列解析（一）:JS-Native调用方法
JSbridge系列解析（二）:lzyzsd/JsBridge使用方法
JSbridge系列解析（三）:lzyzsd/JsBridge源码解析
JSbridge系列解析（四）:Web端发消息给Native代码流程具体分析
JSBridge使用过程中，运行环境涉及java和js两个部分，调用流程在两部分间流转。分析过程不仅需要掌握android的开发知识，还需要熟悉JavaScript语法。
以demo工程作为示例讲解，默认的Web端发消息的send方法。为了便于理解，贴出了流程调用中的关键代码，注意根据注释辨别代码出处（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页面中点击"发消息给Native"按钮，触发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发送消息调用_doSend，将消息存放在sendMessageQueue中，将responseCallbck放在responseCallbacks数组中，并设置message的callbackId。callbackId由uniqueId配合时间生成，用于后续查找responseCallback回调。更换iFrame的src，触发BridgeWebViewClient的shouldOverrideUrlLoading方法。
//WebViewJavascriptBridge.js
function send(data, responseCallback) {
_doSend({
data: data
}, responseCallback);
}
//sendMessage add message, 触发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方法根据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)) { // 如果是返回数据
//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()方法，并注册了一个回调函数。注意，BridgeWebView的loadUrl方法不仅执行了js语句调用，还将对应的回调函数放在responseCallbacks中， key是_fetchQueue。回调函数的具体内容后续分析
//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数组中的所有消息，序列化为json字符串，通过更改iFrame的src，触发shouldOverrideUrlLoading方法
//WebViewJavascriptBridge.js
// 提供给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);
}
- 具体参考步骤4中代码，shouldOverrideUrlLoading方法根据url的前缀，进入了BridgeWebView的handlerReturnData方法。根据传入的url（yy://return/_fetchQueue/[{"data":{"id":1,"content":"这是一个图片 <img src="a.png"/> test\r\nhahaha"},"callbackId":"cb_2_1501580166257"}]），获取回调函数的functionName为_fetchQueue。根据步骤5，最终调用了flushMessageQueue中loadUrl传入的回调函数。
//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的回调函数，将json数据转化为Message数组，依次处理Message数组中的消息。本次示例中只有demo.html中调用的send方法，数据为{"data":{"id":1,"content":"这是一个图片 <img src="a.png"/> test\r\nhahaha"},"callbackId":"cb_2_1501580166257"}。此时消息的responseId为空，callbackId是在步骤3的_doSend中生，用于标记send方法的回调。为了实现该功能，以下代码中构造了responseMsg来实现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发消息给web时，传入的回调函数
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端发送消息给Native时，注册的回调函数。需要通过Native->JS触发
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函数设置，根据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 {
//直接发送。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作为调用的统一接口，参数分别为handlerName，handlerparams，回调函数。
//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的回调函数时，此时的json数据为{"handlerName":"submitFromWeb","data":{"param":"中文测试"},"callbackId":"cb_3_1501589051919"。该数据反序列化的Message对象getHandlerName为subminFromWeb。根据messageHandlers找到步骤2中MainActivity注册的方法，实现JS到Java的调用。
- 处理JS调用完成的回调函数，同上步骤9。
Web端提供assign handler或default handler供Native端调用
与上述步骤雷同，各位可具体分析
