WebViewJavascriptBridge 分析oc向js发送消息处理流程

1.优秀开源代码解读之JS与iOS Native Code互调的优雅实现方案

2. WebViewJavascriptBridge 原理分析

过程分析如下：

- (void)sendMessage:(id)sender {

       //  responseCallback供js返回数据后回调

    [_bridge send:@"A string sent from ObjC to JS" responseCallback:^(id response) {

        NSLog(@"sendMessage got response: %@", response);

    }];

}

- (void)send:(id)data responseCallback:(WVJBResponseCallback)responseCallback {

    [self _sendData:data responseCallback:responseCallback handlerName:nil];

}

- (void)_sendData:(id)data responseCallback:(WVJBResponseCallback)responseCallback handlerName:(NSString*)handlerName {

    NSMutableDictionary* message = [NSMutableDictionary dictionary];

    

    if (data) {

        message[@"data"] = data;

    }

    

    if (responseCallback) {

        NSString* callbackId = [NSString stringWithFormat:@"objc_cb_%ld", ++_uniqueId];

         //用callbackId 标示responseCallback并保存起来，供js返回数据后回调

        _responseCallbacks[callbackId] = [responseCallback copy];

        message[@"callbackId"] = callbackId;

    }

    

    if (handlerName) {

        message[@"handlerName"] = handlerName;

    }

    [self _queueMessage:message];

}

- (void)_queueMessage:(WVJBMessage*)message {

    if (_startupMessageQueue) {

        [_startupMessageQueue addObject:message];

    } else {

        [self _dispatchMessage:message];

    }

}

- (void)_dispatchMessage:(WVJBMessage*)message {

    NSString *messageJSON = [self _serializeMessage:message];

    [self _log:@"SEND" json:messageJSON];

    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\\" withString:@"\\\\"];

    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\"" withString:@"\\\""];

    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\'" withString:@"\\\'"];

    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\n" withString:@"\\n"];

    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\r" withString:@"\\r"];

    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\f" withString:@"\\f"];

     //调用javascript中的函数_handleMessageFromObjC

    NSString* javascriptCommand = [NSString stringWithFormat:@"WebViewJavascriptBridge._handleMessageFromObjC('%@');", messageJSON];

    if ([[NSThread currentThread] isMainThread]) {

        [_webView stringByEvaluatingJavaScriptFromString:javascriptCommand];

    } else {

        __strong WVJB_WEBVIEW_TYPE* strongWebView = _webView;

        dispatch_sync(dispatch_get_main_queue(), ^{

            [strongWebView stringByEvaluatingJavaScriptFromString:javascriptCommand];

        });

    }

}

//处理来自ObjC的消息【native端调用】

function _handleMessageFromObjC(messageJSON) {

    //如果接收队列对象存在则入队该消息，否则直接处理

if (receiveMessageQueue) {

receiveMessageQueue.push(messageJSON)

} else {

_dispatchMessageFromObjC(messageJSON)

}

}

//内部方法:处理来自objc的消息

function _dispatchMessageFromObjC(messageJSON) {

setTimeout(function _timeoutDispatchMessageFromObjC() {

var message = JSON.parse(messageJSON)

var messageHandler

if (message.responseId) {

var responseCallback = responseCallbacks[message.responseId]

if (!responseCallback) { return; }

responseCallback(message.responseData)

delete responseCallbacks[message.responseId]

} else {

var responseCallback

if (message.callbackId) {

var callbackResponseId = message.callbackId

                    //供handle处理完后回调

responseCallback = function(responseData) {

_doSend({ responseId:callbackResponseId, responseData:responseData })

}

}

//走这里，此处handler等于WebViewJavascriptBridge.init时的_messageHandler

var handler = WebViewJavascriptBridge._messageHandler

if (message.handlerName) {

handler = messageHandlers[message.handlerName]

}

try {

handler(message.data, responseCallback)

} catch(exception) {

if (typeof console != 'undefined') {

console.log("WebViewJavascriptBridge: WARNING: javascript handler threw.", message, exception)

}

}

}

})

}

 //初始化操作，并定义默认的消息处理逻辑

bridge.init(function(message, responseCallback) {

log('JS got a message', message)

var data = { 'Js Responds':'Web!' }

log('JS responding with', data)

responseCallback(data)

})

//初始化方法，注入默认的消息处理器 ,默认的消息处理器用于在处理来自objc的消息时，如果该消息没有设置处理器，则采用默认处理器处理

function init(messageHandler) {

if (WebViewJavascriptBridge._messageHandler) { throw new Error('WebViewJavascriptBridge.init called twice') }

WebViewJavascriptBridge._messageHandler = messageHandler

var receivedMessages = receiveMessageQueue

receiveMessageQueue = null

for (var i=0; i<receivedMessages.length; i++) {

_dispatchMessageFromObjC(receivedMessages[i])

}

}

//内部方法:消息的发送

function _doSend(message, responseCallback) {

       //如果定义了回调

if (responseCallback) {

       //为回调对象产生唯一标识

var callbackId = 'cb_'+(uniqueId++)+'_'+new Date().getTime()

       //并存储到一个集合对象里

responseCallbacks[callbackId] = responseCallback

       //新增一个key-value对- 'callbackId':callbackId

message['callbackId'] = callbackId

}

        //把发送的消息至于队列中，然后下面的函数通知oc来取message

sendMessageQueue.push(message)

        //产生一个src（url scheme），供native中shouldStartLoadWithRequest捕捉

messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://' + QUEUE_HAS_MESSAGE

}

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {

    if (webView != _webView) { return YES; }

    NSURL *url = [request URL];

    __strong typeof(_webViewDelegate) strongDelegate = _webViewDelegate;

    if ([[url scheme] isEqualToString:kCustomProtocolScheme]) {

        if ([[url host] isEqualToString:kQueueHasMessage]) {

            [self _flushMessageQueue];//取出js放进去的消息，并处理

        } else {

            NSLog(@"WebViewJavascriptBridge: WARNING: Received unknown WebViewJavascriptBridge command %@://%@", kCustomProtocolScheme, [url path]);

        }

        return NO;

    } else if (strongDelegate && [strongDelegate respondsToSelector:@selector(webView:shouldStartLoadWithRequest:navigationType:)]) {

        return [strongDelegate webView:webView shouldStartLoadWithRequest:request navigationType:navigationType];

    } else {

        return YES;

    }

}

- (void)_flushMessageQueue {

       //直接调用js的函数取出消息

    NSString *messageQueueString = [_webView stringByEvaluatingJavaScriptFromString:@"WebViewJavascriptBridge._fetchQueue();"];

    

    id messages = [self _deserializeMessageJSON:messageQueueString];

    if (![messages isKindOfClass:[NSArray class]]) {

        NSLog(@"WebViewJavascriptBridge: WARNING: Invalid %@ received: %@", [messages class], messages);

        return;

    }

    for (WVJBMessage* message in messages) {

        if (![message isKindOfClass:[WVJBMessage class]]) {

            NSLog(@"WebViewJavascriptBridge: WARNING: Invalid %@ received: %@", [message class], message);

            continue;

        }

        [self _log:@"RCVD" json:message];

        NSString* responseId = message[@"responseId"];

        if (responseId) {

            WVJBResponseCallback responseCallback = _responseCallbacks[responseId];//获取到之前保存的回调函数

            responseCallback(message[@"responseData"]);

            [_responseCallbacks removeObjectForKey:responseId];//删除回调函数

        } else {

            WVJBResponseCallback responseCallback = NULL;

            NSString* callbackId = message[@"callbackId"];

            if (callbackId) {

                responseCallback = ^(id responseData) {

                    WVJBMessage* msg = @{ @"responseId":callbackId, @"responseData":responseData };

                    [self _queueMessage:msg];

                };

            } else {

                responseCallback = ^(id ignoreResponseData) {

                    // Do nothing

                };

            }

            

            WVJBHandler handler;

            if (message[@"handlerName"]) {

                handler = _messageHandlers[message[@"handlerName"]];

                if (!handler) {

                    NSLog(@"WVJB Warning: No handler for %@", message[@"handlerName"]);

                    return responseCallback(@{});

                }

            } else {

                handler = _messageHandler;

            }

            

            @try {

                id data = message[@"data"];

                handler(data, responseCallback);

            }

            @catch (NSException *exception) {

                NSLog(@"WebViewJavascriptBridge: WARNING: objc handler threw. %@ %@", message, exception);

            }

        }

    }

}

    //获得队列，将队列中的每个元素用分隔符分隔之后连成一个字符串【native端调用】

function _fetchQueue() {

var messageQueueString = JSON.stringify(sendMessageQueue)

sendMessageQueue = []

return messageQueueString

}

总结oc把oc的data和回调函数的ID发给js，js返回js的data和回调函数的ID，这样就完成了交互。