html5-websocket实现基于远程方法调用的数据交互

 

一般在传统网页中注册用户信息都是通过post或ajax提交到页面处理,到了HTML5后我们有另一种方法就是通过websocket进行数据交互.websocket在数据交互有着传统网页所不具备的灵活性,通过Websocket建立长连接后服务器可以直接向client发送数据,而每次数据交互没有必要带上大量的http头信息.websocket协议本身支持两种数据格式文本和流,通过文本json的方式和javascript交互是一件非常简单事情,通过json网页和Websocket通讯就非常便利,但要达到这个便利性我们还是要做简单的一些包装还好现有的json在各平台的组件都比较成熟.通过分析json数据映射到服务端对应的方法执行处理.

下面通过一个简单的用户注册来体现html5用josn和websocket进行交互的处理过程.由于经过封装处理所以使用起来非常方便.

HTML:

功能很简单就是连接到websocket服务后进行注册信息提交,当然为了更灵活点我们在监测到连接关闭的时候重新打开连接窗体,具体的JS代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
function connect() {
            channel = new TcpChannel();
            channel.Connected = function (evt) {
                $('#dlgConnect').dialog('close');
            };
            channel.Disposed = function (evt) {
                $('#dlgConnect').dialog('open');
            };
            channel.Error = function (evt) {
                alert(evt);
            };
            channel.Connect($('#txtHost').val());
        }

代码是不是很简洁,主要原因是在WebSocket的基础上封装了一个TcpChannel,详细代码可以下载了解.连接成功后就进入了注册窗体

通过填写一些注册信息后,点击注册把信息通过WebSocket提交给服务端,相关提交的JS代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var invokeregister = { url: 'Handler.OnRegister', parameters: { UserName: '', Email: '', PassWord: ''} };
        function register() {
            $('#frmRegister').form('submit', {
                onSubmit: function () {
                    var isValid = $(this).form('validate');
                    if (isValid) {
                        invokeregister.parameters = $('#frmRegister').serializeObject();
                        channel.Send(invokeregister, function (result) {
                            alert(result.data);
                        });
                    }
                    return false;
                }
            });
        }

当验证数据成功后通过TcpChannel发送一个方法调用描述对象即可,url是指定调用的类方法,而paramters即是方法的参数,参数也可以是复杂的结构类型.第二个参数是一个回调处理.

C#

服务由于基于Beetle的扩展处理,所以代码是非常简单的.针对以上注册的逻辑方法代码如下:

1
2
3
4
5
6
7
8
9
10
public class Handler
    {
        public string OnRegister(string UserName, string Email, string PassWord)
        {
            Console.WriteLine(UserName);
            Console.WriteLine(Email);
            Console.WriteLine(PassWord);
            return UserName;
        }
    }

方法只需要定义相关参数即可,Beetle的消息扩展控制器会自动分析js提交的json数据进行分析并绑定到相关方法中执行.对于控制器的详细代码也可以通过下载代得到.逻辑编写完成我们只需要简单地打开相关websocket服务即可.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
class Program:WebSocketJsonServer
    {
        static void Main(string[] args)
        {
            Beetle.Controllers.Controller.Register(new Handler());
            TcpUtils.Setup("beetle");
            Program server = new Program();
            server.Open(8088);
            Console.WriteLine("websocket start@8088");
            System.Threading.Thread.Sleep(-1);
        }
        protected override void OnError(object sender, ChannelErrorEventArgs e)
        {
            base.OnError(sender, e);
            Console.WriteLine(e.Exception.Message);
        }
        protected override void OnConnected(object sender, ChannelEventArgs e)
        {
            base.OnConnected(sender, e);
            Console.WriteLine("{0} connected", e.Channel.EndPoint);
        }
        protected override void OnDisposed(object sender, ChannelDisposedEventArgs e)
        {
            base.OnDisposed(sender, e);
            Console.WriteLine("{0} disposed", e.Channel.EndPoint);
        }
       
    }

这样一个基于html5的websocket对象消息交互和处理就完成,只需很少量的代码就实现了js和服务进行数据交互的处理.要实现这方便交互功能以下几个封装省不了.websocket协议分析,对象json处理和消息控制分发;如果想了解相关细可以下载源码查看.

WebSocket.Server.rar (641.79 kb)

html5-websocket实现基于远程方法调用的数据交互的更多相关文章

  1. Java之基于S2SH与手机数据交互(一)

    在前两篇博客,介绍了在eclipse上搭建SSH,可是好多小伙伴反映.看了偶写滴博客.跟着搭建还是错误百出,唉! 事实上不经历错误怎么能不见红线啊!于是我在上篇博客补充了他们的错误,还在被错误困扰的童 ...

  2. 关于AJAX+HTML5+ASHX进行全静态页面的数据交互

    及时总结项目中使用到的知识,知识在于积累. 1.HTML代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...

  3. 基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步(二)

    我们上一篇<基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步(一)>主要讲解了如何搭建一个实时数据通讯服务器,客户端与服务端是如何通讯的,相信通过上一篇的讲解,再配 ...

  4. Demo源码放送:打通B/S与C/S !让HTML5 WebSocket与.NET Socket公用同一个服务端!

    随着HTML5 WebSocket技术的日益成熟与普及,我们可以借助WebSocket来更加方便地打通BS与CS -- 因为B/S中的WebSocket可以直接连接到C/S的服务端,并进行双向通信.如 ...

  5. 打通B/S与C/S !让HTML5 WebSocket与.NET Socket公用同一个服务端!

    随着HTML5 WebSocket技术的日益成熟与普及,我们可以借助WebSocket来更加方便地打通BS与CS -- 因为B/S中的WebSocket可以直接连接到C/S的服务端,并进行双向通信.如 ...

  6. 【HTML5】HTML5 WebSocket简介以及简单示例

    互联网发展到现在,早已超越了原始的初衷,人类从来没有像现在这样依赖过他:也正是这种依赖,促进了互联网技术的飞速发展.而终端设备的创新与发展,更加速了互联网的进化: HTTP/1.1规范发布于1999年 ...

  7. [转]使用 HTML5 WebSocket 构建实时 Web 应用

    HTML5 WebSocket 简介和实战演练 本文主要介绍了 HTML5 WebSocket 的原理以及它给实时 Web 开发带来的革命性的创新,并通过一个 WebSocket 服务器和客户端的案例 ...

  8. 使用 HTML5 WebSocket 构建实时 Web 应用

    原文地址:http://www.ibm.com/developerworks/cn/web/1112_huangxa_websocket/ HTML5 WebSocket 简介和实战演练 本文主要介绍 ...

  9. (转)使用 HTML5 WebSocket 构建实时 Web 应用

    HTML5 WebSocket 简介和实战演练 本文主要介绍了 HTML5 WebSocket 的原理以及它给实时 Web 开发带来的革命性的创新,并通过一个 WebSocket 服务器和客户端的案例 ...

随机推荐

  1. js 数组的pop(),push(),shift(),unshift()方法小结

    关于数组的一些操作方法小结: pop(),push(),shift(),unshift()四个方法都可改变数组的内容以及长度: 1.pop() :删除数组的最后一个元素,并返回被删除的这个元素的值: ...

  2. STL 小白学习(2) string

    #include <iostream> using namespace std; #include <string> //初始化操作 void test01() { //初始化 ...

  3. Jsp 国际化访问首页选择展示不同字体小例子

    要求:创建一个首页,默然显示英文信息,但可以让用户选择使用英文,繁体中文或简体中文. 1.编写hello_en_US.txt,内容如下: cc.openhome.welcome=welcomecc.o ...

  4. Mac下安装Apache

    没错,这一篇又是因为头头给我安排的任务得出来的总结. 本身Mac是有自带的Apache,但是对并发量有限制,这个可以在系统的配置参数里面看,所以本人决定重新安装一个,来,请按照下面的流程来走: 一.下 ...

  5. JavaWeb基础-过滤器监听器

    过滤器 1定义:过滤器是一个服务器的组件,他可以截取用户端的请求与响应信息,并对这些信息进行过滤;过滤器可以动态地拦截请求和响应,以变换或使用包含在请求或响应中的信息. 2过滤器的工作原理: 3过滤器 ...

  6. Unable to load DLL 'api-ms-win-core-localization-l1-2-0.dll': 找不到指定的模块

    asp.net mvc 4.6 发布到WinServer2008R2 SP1 提示 错误 Unable to load DLL 'api-ms-win-core-localization-l1-2-0 ...

  7. Java语法基础学习DayNineteen(反射机制)

    一.Refection定义 1.概述 Reflection(反射)是被视为动态语言的关键,反射机制允许程序在执行期借助于Reflection API取得任何类的内部信息,并能直接操作任意对象的内部属性 ...

  8. 在Fiddler中添加自己所需的显示列

    有时候我们想了解请求响应的时间.服务器IP等相关信息,Fiddler默认是没有显示的,这个时候就需要我们借助高级用法---自定义显示列, 其实主要就是操作这个文件Fiddler2\Scripts\Cu ...

  9. asp.net mvc模板布局

  10. Hbuilder护眼主题分享

    sublime还有webstorm有很多主题,但是Hbuilder就相对较少,或者直接说基本没什么主题,在网上搜索了很久也很少有Hbuilder的主题分享,于是就自己取色调了一个仿的护眼主题来分享一下 ...