文档章节

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

泥水佬
 泥水佬
发布于 2018/10/11 17:27
字数 1487
阅读 151
收藏 0

为了让用户体验更好,页面前端往往是通过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

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

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

© 著作权归作者所有

共有 人打赏支持
泥水佬

泥水佬

粉丝 72
博文 87
码字总数 57518
作品 7
广州
架构师
私信 提问
关于Ajax和websocket的区别以及使用场景!

在我们日常使用的互联网产品中,很多都是前后端数据的交互来完成的,说到数据交互就不得不提Ajax和websocket,它们可是数据交互的利器,那么它们分别是什么?websocket与Ajax轮询的区别又是什...

itxcc
2018/10/22
0
0
Web端即时通讯技术盘点:短轮询、Comet、Websocket、SSE

1. 前言 Web端即时通讯技术因受限于浏览器的设计限制,一直以来实现起来并不容易,主流的Web端即时通讯方案大致有4种:传统Ajax短轮询、Comet技术、WebSocket技术、SSE(Server-sent Events)...

JackJiang-
2016/07/14
1K
4
实时通信技术之websocket

本文章即从4个方面带大家了解websocket: websocket是什么? 为什么需要 WebSocket ? websocket的优点与缺点? websocket的相关使用(客户端与服务器端)? websocket的相关协议与规范? 一...

一看就喷亏的小猿
2018/11/03
0
0
看完让你彻底理解 WebSocket 原理,附完整的实战代码(包含前端和后端)

1、前言 最近有同学问我有没有做过在线咨询功能。同时,公司也刚好让我接手一个 IM 项目。所以今天抽时间记录一下最近学习的内容。本文主要剖析了 WebSocket 的原理,以及附上一个完整的聊天...

nnngu
2018/07/21
0
0
应用 HTML5 的 WebSocket 实现 BiDirection 数据交换

HTML5 是新一代的 Web 标准。虽然 HTML5 标准还没有最终确定但是它已然成为主流,各大厂商都开始提前实现其草案中的功能。HTML5 提供了很多新特征,比如 Canvas、离线存储、多线程、视频标签...

IBMdW
2012/01/04
2.6K
6

没有更多内容

加载失败,请刷新页面

加载更多

matlab-线性代数 将矩阵变成列、行向量

  matlab : R2018a 64bit     OS : Windows 10 x64 typesetting : Markdown    blog : my.oschina.net/zhichengjiu    gitee : gitee.com/zhichengjiu   将矩阵变成列、行向量(按照......

志成就
18分钟前
0
0
开始使用Filebeat

认识Beats Beats是用于单用途数据托运人的平台。它们以轻量级代理的形式安装,并将来自成百上千台机器的数据发送到Logstash或Elasticsearch。 (画外音:通俗地理解,就是采集数据,并上报到...

北极南哥
20分钟前
1
0
shell getopts template

!/bin/bash# ------------------------------------------------------------------# [Author] Title# Description# ---------------------------------------------------......

易野
36分钟前
2
0
DHCP服务原理与搭建(Linux系统+路由器,二选一方案)

大家都知道上网的最基本前提是要在终端上设置IP、子网掩码、网关、DNS等地址信息,在家里或者在办公室很多时候打开电脑后发现就可以上网,并没有手动设置IP、掩码、DNS地址也能上网,这是什么...

老率的IT私房菜
45分钟前
6
0
GitLab的安装及使用教程

首页 新随笔 管理 随笔 - 575 文章 - 0 评论 - 27 GitLab的安装及使用教程 1、配置yum源 vim /etc/yum.repos.d/gitlab-ce.repo 复制以下内容: [gitlab-ce] name=Gitlab CE Repository base...

rootliu
53分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部