跨平台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，一個是對隊列的維護。