实现无缝兼容ajax/websocket网页应用和服务

为了让用户体验更好，页面前端往往是通过ajax来进行数据处理；由于浏览器的设计原因每个域名下的连接有限，这样导致了同时进行ajax数据请求效率无法得到有效地提升，为了提高效率和传统HTTP协议上的限制，因此websocket的应运而生。由于websocket是后期提供的升级协议，所以现有很多WEB服务逻辑无法同时兼容两种协议处理；导致了页面前端就无法更有效地利用websocket优势，更多的是在这两者间做一种选择。

FastHttpApi

为了更好地利用websocket的优势和传统性兼容，FastHttpApi实现无缝兼容Ajax和Websocket数据请求，开发者只需要写一分服务端代码！更重要的是FastHttpApi可以让开发者完全不用写Javascript调用的API脚本！在新版本的FastHttpApi中实现了一个自定义工具，只要设置好这个自定义 工具 开发者在VS编写逻辑控制器的情况下就自动生成对应调用的API脚本文件。 插件安装说明

脚本调用机制

当编写完成逻辑控制器后，就可以把对应的脚本引用到网页上(生成脚本还支持 await 调用),直接调用相关方法即可。

 var result = await $ListEmployees();
        var empsBlock = new Vue({
            el: '#lstbody',
            data: result
        });

组件脚本默认是隐藏了调用方式，使用者并不用去关心其中细节（具本可以看FastHttpApi代码了解）;当组件探测到有可用的websocket连接的时候就会自动使用websocket进行数据请求，这样对于有多个数据块同时加载的时候比传统的ajax有着更高效的通讯优势。如果websocket不可用或还没初始化完成时，那组件就会自动使用传统的ajax模式进行处理。

示例实现

为了更好地体现FastHttpApi在这方面的功能，以下针对Northwind的订单业务进行一个分页查询。

控制器代码

        /// 

        /// 订单查询
        /// 
        /// 雇员ID
        /// 客户ID
        /// 分页索引
        /// {Index:0,Pages:0,Items:[order],Count:0}
        public object ListOrders(int employeeid, string customerid, int index, IHttpContext context)
        {
            Func exp = o => (employeeid == 0 || o.EmployeeID == employeeid)
             && (string.IsNullOrEmpty(customerid) || o.CustomerID == customerid);
            int count = mOrders.Count(exp);
            int size = 20;
            int pages = count / size;
            if (count % size > 0)
                pages++;
            var items = mOrders.Where(exp).Skip(index * size).Take(size);
            return new { Index = index, Pages = pages, Items = items, Count = count };
        }

以上是针对一个订单分析查询的逻辑方法，在编写完成逻辑控制器后在相应代码文件属性->自定义工具输入'JASPI'即可生成对应的Javascript脚本：

var $ListOrders$url='/listorders';
///

/// 订单查询
/// 
/// 雇员ID
/// 客户ID
/// 分页索引
/// {Index:0,Pages:0,Items:[order],Count:0}
function $ListOrders(employeeid,customerid,index,useHttp)
{
    return api($ListOrders$url,{employeeid:employeeid,customerid:customerid,index:index},useHttp).sync();
}
function $ListOrders$async(employeeid,customerid,index,useHttp)
{
    return api($ListOrders$url,{employeeid:employeeid,customerid:customerid,index:index},useHttp);
}

以上代码都是插件自动生成，如果控制器方法有注释同样也会生成到JS中，开发完全只需要把脚本文件引用到页面即可。插件针对控制生成了两个方法，一个同步一个异步；同步方法是支持await调用，异步方法则在调用过程中指定 Callback 函数；其中 useHttp 参数是强行指定使用ajax请求。

页面集成

FastHttpApi是不支持服务端视图引擎，所以只能使用前端框架来整合页面，在这里选择了VueJS（这个框架的确不错，功能丰富入门简单即看即用）。在VueJS的支撑下页面代码就变得比较简单

 
                            

                                Employee:
                                
                                    
                                    {{item.Name}}
                                
                            
                            

                                Customer:
                                
                                    
                                    {{item.Name}}
                                
                            
                            

                            Search
                        
                        

                            

                                

                                    
#
                                    
OrderID
                                    
ShipName
                                    
ShipAddress
                                    
City
                                    
OrderDate
                                
                            
                            

                                

                                    

                                    
{{item.OrderID}}
                                    
{{item.ShipName}}
                                    
{{item.ShipAddress}}
                                    
{{item.City}}
                                    
{{item.OrderDate}}
                                
                            
                        
  

页面功能整合了雇佣员、客户两个下选择条件，订单信息显示和分页。接下来整全的javascrip脚就更简单了:

 var app6;
    $(document).ready(function () {
        app6 = new Vue({
            el: '#lstbody',
            data: { Data: [] }
        });
        init();
    });

    async function init() {
        var result = await $GetEmployeesName();
        var app4 = new Vue({
            el: '#lstEmployees',
            data: result
        });

        result = await $GetCustomersName();
        var app5 = new Vue({
            el: '#lstCustomers',
            data: result
        });
        searchOrder(0);
    }

    async function searchOrder(index) {
        var result = await $ListOrders($('#lstEmployees').val(), $('#lstCustomers').val(), index);
        app6.Data = result.Data;
        pagination(index, result.Data.Pages);
    }

实际处理效果

这个页面一开始就分别加载3项数据，如果按传统的ajax加载来看一般都串行加载，后前等前才完成后才能请求加载。当在FastHttpApi的支撑下结果又怎样呢，我们看一下整个页面的加载情况：

从图上我们可以看到，由于websocket没有初始化完成，所以获取雇员的数据是直接ajax了，后面的客户和默认订单查询走了websocket通讯。如果页面有大量数据块整合的情况，那使用FastHttpApi会有很大的加载效率优势。

了解更多FastHttpApi

项目地址: https://github.com/IKende/FastHttpApi

完全基于FastHttpApi实现的官方网站: http://www.ikende.com