跨平台PhoneGap技术架构四：PhoneGap底层原理（下）

晚上被朋友拉去看了海上烟花，烟花易冷，热情难却。散场时候人太多，车都打不着，回来都23点了，差点把写博客计划给耽搁了。

废话不多说，上篇博客讲到了PhoneGap的核心组件WebView，如果园友有觉得讲得不够清楚的地方，欢迎提出您的意见。

本篇主要讲解PhoneGap的两个重要的类，PluginManager类和CallbackServer类。

PluginManager类

PluginManager类实现了PhoneGap的插件管理机制，并在CordovaWebView提供出JavaScript接口。在CordovaChromeClient类的onJsPrompt()方法中截获JavaScript消息，根据消息具体执行某一个插件。代码如下，

String r = this.appView.pluginManager.exec(service, action, callbackId, message, async);

在上篇博客讲解CordovaWebView类时曾提到，PluginManager的实例化是在CordovaWebView的初始化init()函数调用setup()方法时执行的。

        //Start up the plugin manager
        try {
            this.pluginManager = new PluginManager(this, this.cordova);
        } catch (Exception e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }

我们首先看一下PluginManager类的构造函数：

    /**
     * Constructor.
     *
     * @param app
     * @param ctx
     */
    public PluginManager(CordovaWebView app, CordovaInterface ctx) {
        this.ctx = ctx;
        this.app = app;
        this.firstRun = true;
    }

传入参数有两个CordovaWebView类型的app和CordovaInterface类型的ctx。这两个参数比较重要，PluginManager是和CordovaWebView绑定的，要求必须是CordovaWebView类型，第二个参数必须是实现了CordovaInterface的Context。为什么是必须呢？这里留下一个悬念，如果你只做PhoneGap层的应用，可以不关心这个问题。初始化firstRun为true，这个Flag用来判断初始化时是否需要加载插件。

并在CordovaWebView的loadUrlIntoView()方法中进行了初始化工作。

this.pluginManager.init();

那在初始化中到底完成了哪些工作？看一下代码就很好理解了。

    /**
     * Init when loading a new HTML page into webview.
     */
    public void init() {
        LOG.d(TAG, "init()");

        // If first time, then load plugins from plugins.xml file
        if (this.firstRun) {
            this.loadPlugins();
            this.firstRun = false;
        }

        // Stop plugins on current HTML page and discard plugin objects
        else {
            this.onPause(false);
            this.onDestroy();
            this.clearPluginObjects();
        }

        // Start up all plugins that have onload specified
        this.startupPlugins();
    }

首先判断firstRun是否为true，如果为true，则执行this.loadPlugins()加载插件，并把firstRun置为false。否则停止plugin工作并销毁对象。

最后执行this.startupPlugins()启动插件。

下面我们来看看如何加载插件的。

    /**
     * Load plugins from res/xml/plugins.xml
     */
    public void loadPlugins() {
        int id = this.ctx.getActivity().getResources().getIdentifier("plugins", "xml", this.ctx.getActivity().getPackageName());
        if (id == 0) {
            this.pluginConfigurationMissing();
        }
        XmlResourceParser xml = this.ctx.getActivity().getResources().getXml(id);
        int eventType = -1;
        String service = "", pluginClass = "";
        boolean onload = false;
        PluginEntry entry = null;
        while (eventType != XmlResourceParser.END_DOCUMENT) {
            if (eventType == XmlResourceParser.START_TAG) {
                String strNode = xml.getName();
                if (strNode.equals("plugin")) {
                    service = xml.getAttributeValue(null, "name");
                    pluginClass = xml.getAttributeValue(null, "value");
                    // System.out.println("Plugin: "+name+" => "+value);
                    onload = "true".equals(xml.getAttributeValue(null, "onload"));
                    entry = new PluginEntry(service, pluginClass, onload);
                    this.addService(entry);
                } else if (strNode.equals("url-filter")) {
                    this.urlMap.put(xml.getAttributeValue(null, "value"), service);
                }
            }
            try {
                eventType = xml.next();
            } catch (XmlPullParserException e) {
                e.printStackTrace();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }

 PluginManager类加载插件是通过读取res/xml/plugins.xml文件实现的。首先取得xml文件id，然后通过id取得xml文件的内容。接下来是解析xml文件，每次都会读取出插件Plugin的service（如Camera、Notification等）、pluginClass（如org.apache.cordova.CameraLauncher、org.apache.cordova.Notification等）和onload（判断插件初始化时是否需要创建插件的flag）。最后通过addService将读取到的插件添加到PluginEntry的list中去。

在插件实体类PluginEntry中有一个属性onload可能让人有些迷惑，在plugins.xml中并没有关于onload的节点，也就是说在解析xml文件时

onload = "true".equals(xml.getAttributeValue(null, "onload"));

这里的onload是被赋值为false的。个人猜测是为以后的插件扩展预留的接口，在初始化时需要先创建这个插件。

在startupPlugins()函数中，主要是做了onload被设置成true时（目前还没有这种情况）的插件创建工作。

    /**
     * Create plugins objects that have onload set.
     */
    public void startupPlugins() {
        for (PluginEntry entry : this.entries.values()) {
            if (entry.onload) {
                entry.createPlugin(this.app, this.ctx);
            }
        }
    }

 

好了，插件初始化完毕，万事具备只欠东风了。这里的“东风”是什么？当然是插件的执行了。

    /**
     * Receives a request for execution and fulfills it by finding the appropriate
     * Java class and calling it's execute method.
     *
     * PluginManager.exec can be used either synchronously or async. In either case, a JSON encoded
     * string is returned that will indicate if any errors have occurred when trying to find
     * or execute the class denoted by the clazz argument.
     *
     * @param service       String containing the service to run
     * @param action        String containt the action that the class is supposed to perform. This is
     *                      passed to the plugin execute method and it is up to the plugin developer
     *                      how to deal with it.
     * @param callbackId    String containing the id of the callback that is execute in JavaScript if
     *                      this is an async plugin call.
     * @param args          An Array literal string containing any arguments needed in the
     *                      plugin execute method.
     * @param async         Boolean indicating whether the calling JavaScript code is expecting an
     *                      immediate return value. If true, either Cordova.callbackSuccess(...) or
     *                      Cordova.callbackError(...) is called once the plugin code has executed.
     *
     * @return              JSON encoded string with a response message and status.
     */
    public String exec(final String service, final String action, final String callbackId, final String jsonArgs, final boolean async) {
        PluginResult cr = null;
        boolean runAsync = async;
        try {
            final JSONArray args = new JSONArray(jsonArgs);
            final IPlugin plugin = this.getPlugin(service);
            //final CordovaInterface ctx = this.ctx;
            if (plugin != null) {
                runAsync = async && !plugin.isSynch(action);
                if (runAsync) {
                    // Run this on a different thread so that this one can return back to JS
                    Thread thread = new Thread(new Runnable() {
                        public void run() {
                            try {
                                // Call execute on the plugin so that it can do it's thing
                                PluginResult cr = plugin.execute(action, args, callbackId);
                                int status = cr.getStatus();

                                // If no result to be sent and keeping callback, then no need to sent back to JavaScript
                                if ((status == PluginResult.Status.NO_RESULT.ordinal()) && cr.getKeepCallback()) {
                                }

                                // Check the success (OK, NO_RESULT & !KEEP_CALLBACK)
                                else if ((status == PluginResult.Status.OK.ordinal()) || (status == PluginResult.Status.NO_RESULT.ordinal())) {
                                    app.sendJavascript(cr.toSuccessCallbackString(callbackId));
                                }

                                // If error
                                else {
                                    app.sendJavascript(cr.toErrorCallbackString(callbackId));
                                }
                            } catch (Exception e) {
                                PluginResult cr = new PluginResult(PluginResult.Status.ERROR, e.getMessage());
                                app.sendJavascript(cr.toErrorCallbackString(callbackId));
                            }
                        }
                    });
                    thread.start();
                    return "";
                } else {
                    // Call execute on the plugin so that it can do it's thing
                    cr = plugin.execute(action, args, callbackId);

                    // If no result to be sent and keeping callback, then no need to sent back to JavaScript
                    if ((cr.getStatus() == PluginResult.Status.NO_RESULT.ordinal()) && cr.getKeepCallback()) {
                        return "";
                    }
                }
            }
        } catch (JSONException e) {
            System.out.println("ERROR: " + e.toString());
            cr = new PluginResult(PluginResult.Status.JSON_EXCEPTION);
        }
        // if async we have already returned at this point unless there was an error...
        if (runAsync) {
            if (cr == null) {
                cr = new PluginResult(PluginResult.Status.CLASS_NOT_FOUND_EXCEPTION);
            }
            app.sendJavascript(cr.toErrorCallbackString(callbackId));
        }
        return (cr != null ? cr.getJSONString() : "{ status: 0, message: 'all good' }");
    }

本篇开始已经提到过，插件的执行是在CordovaChromeClient的onJsPrompt()方法中截获JavaScript消息，根据消息具体执行某一个插件来调用的。几个传入参数再说明一下

service：需要执行的某一项服务，如Camera、Notification、Battery等等；

action：服务执行的具体动作，如takePhone、getPicture等

callbackId：如果插件是异步执行的话，那么插件执行完成之后回调执行的JavaScript代码的Id存放在callbackId中（好长的定语⊙﹏⊙b汗）。

jsonArgs：即上篇提到过的message消息，存放着服务的调用信息。

async：布尔变量，标明JavaScript端是否需要执行回调。如果是true，则Cordova.callbackSuccess(...)或者Cordova.callbackError(...)需要被执行。

　　　　实际这个值传入时默认都是true的，插件是否是异步执行是通过plugin.isSynch(action)来判断的。估计开始时想让开发者指定插件是否要异步执行，后来添加了plugin.isSynch()的方法来判断。

首先判断插件是否是异步执行，如果是ture的话，新起一个线程执行。

PluginResult cr = plugin.execute(action, args, callbackId);

通过PluginResult类型返回值cr的取得status和 cr.getKeepCallback()是否执行app.sendJavascript()方法。

如果插件不是异步执行，则直接调用cr = plugin.execute(action, args, callbackId)方法执行插件服务。

CallbackServer类

如果说前面所讲的几个类都是为后台JAVA端服务的话，那么CallbackServer类就是为前台JavaScript服务的了。

 下面我们看看CallbackServer类官方文档的解释：

CallbackServer 实现了 Runnable 接口，具体的功能就是维护一个数据的队列，并且建立一个服务器，用于 XHR 的数据传递，对数据的队列的维护利用的是 LinkedList<String>。

XHR处理流程:

1. JavaScript 发起一个异步的XHR 请求.

2. 服务器保持该链接打开直到有可用的数据。

3. 服务器把数据写入客户端并关闭链接。

4. 服务器立即开始监听下一个XHR请求。

5. 客户端接收到XHR回复，并处理该回复。

6. 客户端发送新的异步XHR 请求。

如果说手持设备设置了代理，那么XHR是不可用的，这时候需要使用Pollibng轮询模式。
该使用哪种模式，可通过 CallbackServer.usePolling()获取。

Polling调用流程:

1.客户端调用CallbackServer.getJavascript()来获取要执行的Javascript 语句。
2. 如果有需要执行的JS语句，那么客户端就会执行它。
3. 客户端在循环中执行步骤1.

前面已经讲到过，在CordovaWebViewClient类的onPageStarted方法中实现了CallbackServer的实例化和初始化。

按照惯例，首先来看一下CallbalServer类的构造函数：

    /**
     * Constructor.
     */
    public CallbackServer() {
        //Log.d(LOG_TAG, "CallbackServer()");
        this.active = false;
        this.empty = true;
        this.port = 0;
        this.javascript = new LinkedList<String>();
    }

构造函数比较简单，初始化的时候设置活动状态this.active = false；JavaScript队列为空this.empty = true;端口初始化为0 this.port = 0;新建一个LinkedList<String>类型的javascript队列。

然后再看一下初始化方法

   /**
     * Init callback server and start XHR if running local app.
    *
     * If Cordova app is loaded from file://, then we can use XHR
     * otherwise we have to use polling due to cross-domain security restrictions.
     *
     * @param url            The URL of the Cordova app being loaded
     */
    public void init(String url) {
        //System.out.println("CallbackServer.start("+url+")");
        this.active = false;
        this.empty = true;
        this.port = 0;
        this.javascript = new LinkedList<String>();

        // Determine if XHR or polling is to be used
        if ((url != null) && !url.startsWith("file://")) {
            this.usePolling = true;
            this.stopServer();
        }
        else if (android.net.Proxy.getDefaultHost() != null) {
            this.usePolling = true;
            this.stopServer();
        }
        else {
            this.usePolling = false;
            this.startServer();
        }
    }

CallbalServer类支持两种执行模式，一种是Polling，另为一种是XHR（xmlHttpRequest）。在初始化init方法中先判断使用哪种模式。如果是打开的本地文件或者设置设置了代理，则使用polling的模式，否则，使用XHR模式，并启动Server。

由于CallbalServer类实现的是 Runnable 接口，在 CallbackServer 中，最主要的方法就是 run() 方法，run() 方法的具体内容简介如下：

    /**
     * Start running the server.  
     * This is called automatically when the server thread is started.
     */
    public void run() {

        // Start server
        try {
            this.active = true;
            String request;
            ServerSocket waitSocket = new ServerSocket(0);
            this.port = waitSocket.getLocalPort();
            //Log.d(LOG_TAG, "CallbackServer -- using port " +this.port);
            this.token = java.util.UUID.randomUUID().toString();
            //Log.d(LOG_TAG, "CallbackServer -- using token "+this.token);

            while (this.active) {
                //Log.d(LOG_TAG, "CallbackServer: Waiting for data on socket");
                Socket connection = waitSocket.accept();
                BufferedReader xhrReader = new BufferedReader(new InputStreamReader(connection.getInputStream()), 40);
                DataOutputStream output = new DataOutputStream(connection.getOutputStream());
                request = xhrReader.readLine();
                String response = "";
                //Log.d(LOG_TAG, "CallbackServerRequest="+request);
                if (this.active && (request != null)) {
                    if (request.contains("GET")) {

                        // Get requested file
                        String[] requestParts = request.split(" ");

                        // Must have security token
                        if ((requestParts.length == 3) && (requestParts[1].substring(1).equals(this.token))) {
                            //Log.d(LOG_TAG, "CallbackServer -- Processing GET request");

                            // Wait until there is some data to send, or send empty data every 10 sec 
                            // to prevent XHR timeout on the client 
                            synchronized (this) {
                                while (this.empty) {
                                    try {
                                        this.wait(10000); // prevent timeout from happening
                                        //Log.d(LOG_TAG, "CallbackServer>>> break <<<");
                                        break;
                                    } catch (Exception e) {
                                    }
                                }
                            }

                            // If server is still running
                            if (this.active) {

                                // If no data, then send 404 back to client before it times out
                                if (this.empty) {
                                    //Log.d(LOG_TAG, "CallbackServer -- sending data 0");
                                    response = "HTTP/1.1 404 NO DATA\r\n\r\n "; // need to send content otherwise some Android devices fail, so send space
                                }
                                else {
                                    //Log.d(LOG_TAG, "CallbackServer -- sending item");
                                    response = "HTTP/1.1 200 OK\r\n\r\n";
                                    String js = this.getJavascript();
                                    if (js != null) {
                                        response += encode(js, "UTF-8");
                                    }
                                }
                            }
                            else {
                                response = "HTTP/1.1 503 Service Unavailable\r\n\r\n ";
                            }
                        }
                        else {
                            response = "HTTP/1.1 403 Forbidden\r\n\r\n ";
                        }
                    }
                    else {
                        response = "HTTP/1.1 400 Bad Request\r\n\r\n ";
                    }
                    //Log.d(LOG_TAG, "CallbackServer: response="+response);
                    //Log.d(LOG_TAG, "CallbackServer: closing output");
                    output.writeBytes(response);
                    output.flush();
                }
                output.close();
                xhrReader.close();
            }
        } catch (IOException e) {
            e.printStackTrace();
        }
        this.active = false;
        //Log.d(LOG_TAG, "CallbackServer.startServer() - EXIT");
    }

 

首先利用 ServerSocket 监听端口，具体端口则自由分配。
在 accept 后则是对 HTTP 协议的解析，和对应的返回 status code。
在验证正确后，利用 getJavascript 方法得到维护的 LinkedList<String>() 中的保存的 js 代码，如果为空则返回 null。
这些具体的 string 类型的 js 代码则利用 socket 作为 response 返回给前端。
之后就是对队列维护的方法，这时理解之前的 sendJavaScript 则很简单，该方法与 getJavaScript 相反，一个是从 LinkedList 中取出 js 代码，一个则是加入。
综上，CallbackServer 实现的是两个功能，一个是 XHR 的 SocketServer，一个是对队列的维护。