Extjs 通过 Ext.Direct 实现与 Laravel 通信

软件版本要求

Laravel：5.1 至 5.3
Extjs：4.1 至 6.2

参考资料

Ext Direct RPC 协议规格：http://docs.sencha.com/extjs/6.2.0/guides/...
PHP 实现 Ext Direct 服务器端范例：http://docs.sencha.com/extjs/6.2.0/guides/...
Ext Direct 服务器端清单：https://www.sencha.com/forum/showthread.ph...
laravel 作为 Ext Direct 服务器端（bulforce/ext-direct）：https://www.sencha.com/forum/showthread.ph...

环境设置

为laravel项目添加 ext-direct 包

通过查询 http://packalyst.com/packages/tag/extjs 和 Github，lucasromanojf/ext-direct 可用于 laravel 5.1至5.3， bulforce/ext-direct 只可用于 laravel 4，故选择 lucasromanojf/ext-direct。

composer require lucasromanojf/ext-direct

添加路由

laravel 5.1、5.2 在 ...\laravel_project\app\Http\routes.php 添加， laravel 5.3 在 ...\laravel_project\routes\web.php 添加：

use Bulforce\ExtDirect\ExtDirect;
Route::any('rpc', function() {
    return ExtDirect::provide();
});

添加类及方法

<?php
namespace App\Http\Controllers;
class ItemExternalController extends Controller
{
    /**
     * @direct
     */
    public function getServerDate($params) {
        return date($params);
    }
}

前端页面

...\laravel_project\public 文件夹添加 extdirecttest.html 文件：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>laravel ext.direct test</title>
    <script type="text/javascript" src="ext4.1-all.js"></script>
    <script type="text/javascript" src="rpc?javascript"></script>
    <script type="text/javascript" >
        Ext.onReady(function () {
            console.log("AAAAA:Ext.onReady");
            Ext.rpc.ExternalItems.getServerDate("Y-m-d H:i:s", function (response) {
                console.log("CCCCC:" + response);
            });
        })
    </script>
</head>
<body>
<h1>laravel ext.direct test</h1>
</body>
</html>

编辑配置文件

将 ...\laravel_project\app\vendor\lucasromanojf\ext-direct\src\config\Bulforce 文件夹复制到 ...\laravel_project\app\config 下；编辑 ...\laravel_project\config\Bulforce\ext-direct\config.php 文件：

<?php
return array(
    'namespace' => 'Ext.rpc',
    'descriptor' => 'Ext.rpc.REMOTING_API',
    'debug' => false,
    'timeout' => 1000, // 默认为30，应增大
    'url' => 'rpc',
    'api_classes' => array(
        'ExternalItems' => 'App\Http\Controllers\ItemExternalController' // 应为完整path，否则报错
    )
);

访问 http://127.8.8.8:9898/extdirecttest.html ，客户端 Extjs 调用服务端 App\Http\Controllers\ItemExternalController 类的方法 getServerDate() 获取服务器时间，从客户端控制台输出。
file

填坑

...\laravel_project\config\Bulforce\ext-direct\config.php 文件中 timeout 就是 lucasromanojf/ext-direct 的坑。
其默认值为 30，如不修改，在本地开发环境 chrome 里面 js 提示『Provisional headers are shown』错误：
file
百度查询：
http://stackoverflow.com/questions/2117738...
http://blog.csdn.net/wyfhist/article/detai...
主要原因是服务端超时（被墙、数据库查询慢）导致，因此通过增加 timeout 时间解决；另外：代码注释中 timeout 单位为 second ，实际应为 millisecond。
file