htm5-websocket實現數據查詢應用

在之前的文章講述了使用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());
        }

在連接創建完成事件中進行數據查詢操作，由於連續進行３以上的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