JSbridge系列解析(四):Web端发消息给Native代码流程具体分析

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文件)

  1. 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);
    }
}
  1. 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
                }
        );
}
  1. 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;
}
  1. 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);
    }
}
  1. 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);
}
  1. _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);
}
  1. 具体参考步骤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;
    }
}
  1. 分析_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);
                        }
                    }
                }
            }
        });
    }
}
  1. 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. 同上步骤1。webview加载页面,完成WebViewJavascriptBridge.js的注入。
  2. 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);
    }
}
  1. 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
        }
    );
}
  1. callHandler最终调用_doSend方法。
//WebViewJavascriptBridge.js
function callHandler(handlerName, data, responseCallback) {
    _doSend({
        handlerName: handlerName,
        data: data
    }, responseCallback);
}
  1. 同上步骤4、5、6、7。
  2. 处理_fetchQueue的回调函数时,此时的json数据为{“handlerName”:”submitFromWeb”,”data”:{“param”:”中文测试”},”callbackId”:”cb_3_1501589051919”。该数据反序列化的Message对象getHandlerName为subminFromWeb。根据messageHandlers找到步骤2中MainActivity注册的方法,实现JS到Java的调用。
  3. 处理JS调用完成的回调函数,同上步骤9。

Web端提供assign handler或default handler供Native端调用

与上述步骤雷同,各位可具体分析

    </div>

转自:https://www.jianshu.com/p/730eaba1a617

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页