htm5-websocket实现数据查询应用

标签: htm5 websocket 数据 | 发表时间:2012-12-05 23:18 | 作者:smark
出处:http://www.cnblogs.com/

在之前的文章讲述了使用Websocket调用远程方式的功能,在这基础我们可以简单地使用WebSocket进行数据处理方面的应用;只需要在方法执行相关的数据库操作返回即可,结合jeasyui库所提供丰富的控件进行数据应用处理变得非常简单的事情.下面使用jeasyui和WebSocket实现一个查询Northwind数据订单的应用案例.

首先分析一下以下一个订单查询案例所需要的逻辑功能.

从以上的案例图中可以得到包括的功能如下:

1)雇员查询
2)客户查询
3)订单分页查询
4)订单明细查询

C#代码

针对以上功能可以实现简单的逻辑查询,代码如下:

public class Handler
{
public IList<BLEmployee> ListEmployees()
{
Console.WriteLine("List Employees");
IList<BLEmployee> items = new Expression().List<Employee, BLEmployee>();
return items;
}

public IList<BLCustomer> ListCustomers()
{
Console.WriteLine("List Customers");
IList<BLCustomer> items = new Expression().List<Customer, BLCustomer>();
return items;
}


public IList<BLOrderDetail> GetOrderDetail(int orderid)
{
Console.WriteLine("GetOrderDetail OrderID:{0}", orderid);
return (Order.orderID == orderid).List<OrderDetail, BLOrderDetail>();
}

public OrderSearchResult ListOrder(OrdersSearch search)
{
Console.WriteLine("ListOrder Employee:{0}\t Customer:{1}", search.EmployeeID, search.CustomerID);
OrderSearchResult result = new OrderSearchResult();
Expression exp = new Expression();
if (!string.IsNullOrEmpty(search.CustomerID))
exp &= Customer.customerID.At() == search.CustomerID;
if (search.EmployeeID > 0)
exp &= Employee.employeeID.At() == search.EmployeeID;
int count = exp.Count<Order>();
result.Orders = exp.List<Order, BLOrder>(new Region(search.Page, search.PageSize));
result.Count = count;
return result;
}
}

借助于开源组件Smark.Data的功能,只需要编写简单的代码就能实现相应的数据查询逻辑处理.

JavaScript

定义websocket连接:

//创建连接
function connect() {
channel = new TcpChannel();
channel.Connected = function (evt) {
$('#dlgConnect').dialog('close');

setTimeout(listEmployee, 50);
setTimeout(listCustomer, 50);
listOrder();
};
channel.Disposed = function (evt) {
$('#dlgConnect').dialog('open');
};
channel.Error = function (evt) {
alert(evt);
};
channel.Connect($('#txtHost').val());
}

在连接创建完成事件中进行数据查询操作,由于连续进行3以上的websocket的发送操作会导致发送不成功,之于具体原因暂不清楚.所以只能通过setTimeout来控制初始化的数据查询.连接创建后就可以进行远程方法调用,进行数据查询操作具体相关代码如下:

雇员查询远程调用方法:

//雇员查询
var callListEmployees = { url: 'Handler.ListEmployees', parameters: {} };
function listEmployee() {
channel.Send(callListEmployees, function (result) {
result.data.unshift({ EmployeeID: 0, FullName: 'null' });
$('#employees').combobox({
data: result.data,
valueField: 'EmployeeID',
textField: 'FullName'
});
});
}

客户查询远程调用方法:

//客户查询
var callListCustomers = { url: 'Handler.ListCustomers', parameters: {} };
function listCustomer() {
channel.Send(callListCustomers, function (result) {
result.data.unshift({ CustomerID: '', CompanyName: 'null' });
$('#customers').combobox({
data: result.data,
valueField: 'CustomerID',
textField: 'CompanyName'
});
});
}

订单查询远程调用方法:

//订单查询
var callListOrder = {
url: 'Handler.ListOrder',
parameters: { search: { EmployeeID: 0, CustomerID: null, Page: 0, PageSize: 10} }
};
function listOrder() {
channel.Send(callListOrder, function (result) {
$('#orders').datagrid('loadData', result.data.Orders);

$('#pp').pagination('refresh', { total: result.data.Count });
});
}

订单明细远程调用方法:

//订单明细
var callGetOrderDetail = { url: 'Handler.GetOrderDetail', parameters: {orderid:0} };
function getOrderDetail() {
channel.Send(callGetOrderDetail, function (result) {

$('#gdOrderDetail').datagrid('loadData', result.data);


});
}

总结

只需要以上简单的代码就可以实现一个订单查询功能,看上去和传统的ajax应用差不多,而这里使用的服务是基于websocket而不是webserver.

下载代码: WebSocket.Northwind.rar (1.03 mb) 

演示地址: http://html5.ikende.com/northwind.htm

 

本文链接

相关 [htm5 websocket 数据] 推荐:

htm5-websocket实现数据查询应用

- - 博客园_首页
在之前的文章讲述了使用Websocket调用远程方式的功能,在这基础我们可以简单地使用WebSocket进行数据处理方面的应用;只需要在方法执行相关的数据库操作返回即可,结合jeasyui库所提供丰富的控件进行数据应用处理变得非常简单的事情.下面使用jeasyui和WebSocket实现一个查询Northwind数据订单的应用案例..

应用 HTML5 的 WebSocket 实现 BiDirection 数据交换

- - IBM developerWorks 中国 : 文档库
HTML5 是新一代的 Web 标准. 虽然 HTML5 标准还没有最终确定但是它已然成为主流,各大厂商都开始提前实现其草案中的功能. HTML5 提供了很多新特征,比如 Canvas、离线存储、多线程、视频标签等等. 其中一个很重要的特征是 WebSocket,它提供了一种双向全双工的服务器和客户端通信的功能.

HTM5 实现文件拖拽

- - CSDN博客Web前端推荐文章
如图是接受文件拖拽的窗口. 拖入一张图片之后如下图,拖入的图片作为了方框的背景图片. 使用了HTML5的File API和drag && drop API.