首页手记 JsBridge源码分析

JsBridge源码分析

标签：

Android

客户端、H5注册

客户端

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

@Overridepublic 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方法：

@Overridepublic 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处理 sendMessagefunction _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方法中:

@Overridepublic 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);
    }
};

作者：丿北纬91度灬
链接：https://www.jianshu.com/p/a31ffedb65a8

点击查看更多内容