实现无缝兼容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的订单业务进行一个分页查询。

控制器代码

        /// <summary>
        /// 订单查询
        /// </summary>
        /// <param name="employeeid">雇员ID</param>
        /// <param name="customerid">客户ID</param>
        /// <param name="index">分页索引</param>
        /// <returns>{Index:0,Pages:0,Items:[order],Count:0}</returns>
        public object ListOrders(int employeeid, string customerid, int index, IHttpContext context)
        {
            Func<Order, bool> 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';
///<summary>
/// 订单查询
/// </summary>
/// <param name="employeeid">雇员ID</param>
/// <param name="customerid">客户ID</param>
/// <param name="index">分页索引</param>
/// <returns>{Index:0,Pages:0,Items:[order],Count:0}</returns>
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的支撑下页面代码就变得比较简单

 <form class="form-inline">
                            <div class="form-group">
                                <label for="exampleInputName2">Employee:</label>
                                <select id="lstEmployees" style="margin:5px;">
                                    <option value=""></option>
                                    <option v-for="item in Data" v-bind:value="item.ID">{{item.Name}}</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="exampleInputEmail2">Customer:</label>
                                <select id="lstCustomers" style="margin:5px;">
                                    <option value=""></option>
                                    <option v-for="item in Data" v-bind:value="item.ID">{{item.Name}}</option>
                                </select>
                            </div>
                            <br />
                            <button type="button" onclick="searchOrder(0)" class="btn btn-default">Search</button>
                        </form>
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>OrderID</th>
                                    <th>ShipName</th>
                                    <th>ShipAddress</th>
                                    <th>City</th>
                                    <th>OrderDate</th>
                                </tr>
                            </thead>
                            <tbody id="lstbody">
                                <tr v-for="item in Data.Items">
                                    <td></td>
                                    <td>{{item.OrderID}}</td>
                                    <td>{{item.ShipName}}</td>
                                    <td>{{item.ShipAddress}}</td>
                                    <td>{{item.City}}</td>
                                    <td>{{item.OrderDate}}</td>
                                </tr>
                            </tbody>
                        </table>
  <nav aria-label="Page navigation">
                            <ul id="pagination" class="pagination">

                            </ul>
                        </nav>

页面功能整合了雇佣员、客户两个下选择条件，订单信息显示和分页。接下来整全的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实现的官方网站:http://www.ikende.com

本文链接：https://www.cnblogs.com/smark/p/9773151.html

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

FastHttpApi

脚本调用机制

示例实现

控制器代码

页面集成

实际处理效果

了解更多FastHttpApi

实现无缝兼容ajax/websocket网页应用和服务的更多相关文章

随机推荐

热门专题

目录导航