为了让用户体验更好，页面前端往往是通过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的订单业务进行一个分页查询。
控制器代码
///
/// 订单查询
///
/// {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';
///
/// 订单查询
///
/// {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
京公网安备 11010802041100号