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

  

一.对Socket Server的要求

  我们可以尝试让Socket Server透明地支持WebSocket客户端,所谓透明的意思是,服务端开发人员不用关心客户端究竟是什么类型,而是可以统一的接收数据、处理数据、发送数据。为了做到这一点,我们可以构建一个服务端框架,让框架完成透明化的工作,这就要求这个框架做到以下几点:

(1)根据客户端TCP连接请求成功后的第一个消息中是否含有“websocket”标记,来判断其是否为WebSocket客户端。如果客户端的类型是WebSocket,则自动完成以下事情。

(2)自动完成Web Sokects 握手协议。

(3)针对接收到的每个WebSokect数据帧,都能自动将其解析,并从中分离出真正的消息内容。

(4)当您发送消息给WebSokect客户端时,服务端引擎会自动将该消息封装成WebSokect数据帧,然后再发送出去。

  我们在 StriveEngine 中实现了对上述WebSocket的透明化支持,至于具体如何实现的,大家可以参考一下WebSokect的标准协议。下面我们就来做一个Demo,让.NET Socket客户端和WebSocket客户端能同时与一个StriveEngine服务端进行双向通信。

二.打通B/S与C/S的Demo 准备

  基于WebSokect,我们在绝大多数情况下,使用的都是文本消息,OK,那我们就基于文本消息来构建这个Demo。

(1)虽然WebSokect可以借助其Html5协议来自动完成一个消息的独立识别,但是对于我们的普通socket来说,必须有一个方法来识别一个完整的消息。

(2)常用的方法是使用特殊的消息结束标识符,那在这个demo中,我们就以'\0'作为消息的结束符吧。

(3)基于(2),那么WebSokect在发送消息给服务端时,也必须在消息结尾加上'\0'。

三.Demo实现

  我们先看看Demo运行起来的效果:

  在Demo中,WebSocket客户端和.NET Socket客户端都可以与同一个服务端进行互通消息。

1.源码结构说明

  该Demo源码总共包括三个项目和一个HTML文件:

(1)StriveEngine.SimpleDemoServer:基于StriveEngine开发的服务端。

(2)StriveEngine.SimpleDemoClient:基于StriveEngine开发的客户端。

(3)StriveEngine.SimpleDemo:直接基于.NET的Socket开发的客户端。

(4)WebSocketClient.html:基于HTML5 WebSocket的客户端。与前两种客户端公用同一个StriveEngine服务端。

  接下来,我们着重看一下WebSocket客户端实现,其它的.NET代码,大家直接去看Demo源码就好了。

2.WebSocket客户端实现

(1)HTML 页面布局

<body>
    <h3>WebSocketTest</h3>
    <div id="login">
        <div>
            <input id="serverIP" type="text" placeholder="服务器IP" value="127.0.0.1" autofocus="autofocus" />
            <input id="serverPort" type="text" placeholder="服务器端口" value="9000" />
            <input id="btnConnect" type="button" value="连接" onclick="connect()" />
        </div>
        <div>
            <input id="sendText" type="text" placeholder="发送文本" value="I'm WebSocket Client!" />
            <input id="btnSend" type="button" value="发送" onclick="send()" />
        </div>
        <div>
            <div>
                来自服务端的消息
            </div>
            <textarea id="txtContent" cols="50" rows="10" readonly="readonly"></textarea>
        </div>
    </div>
</body>

(2)js方法实现

<script>
        var socket;

        function connect() {
            var host = "ws://" + $("serverIP").value + ":" + $("serverPort").value + "/"
            socket = new WebSocket(host);
            try {

                socket.onopen = function (msg) {
                    $("btnConnect").disabled = true;
                    alert("连接成功!");
                };

                socket.onmessage = function (msg) {
                    if (typeof msg.data == "string") {
                        displayContent(msg.data);
                    }
                    else {
                        alert("非文本消息");
                    }
                };

                socket.onclose = function (msg) { alert("socket closed!") };
            }
            catch (ex) {
                log(ex);
            }
        }

        function send() {
            var msg = $("sendText").value + '\0'
            socket.send(msg);
        }

        window.onbeforeunload = function () {
            try {
                socket.close();
                socket = null;
            }
            catch (ex) {
            }
        };

        function $(id) { return document.getElementById(id); }

        Date.prototype.Format = function (fmt) { //author: meizz
            var o = {
                "M+": this.getMonth() + 1, //月份
                "d+": this.getDate(), //日
                "h+": this.getHours(), //小时
                "m+": this.getMinutes(), //分
                "s+": this.getSeconds(), //秒
                "q+": Math.floor((this.getMonth() + 3) / 3), //季度
                "S": this.getMilliseconds() //毫秒
            };
            if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o)
                if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
        }

        function displayContent(msg) {
            $("txtContent").value += "\r\n" +new Date().Format("yyyy/MM/dd hh:mm:ss")+ ":  " + msg;
        }
        function onkey(event) { if (event.keyCode == 13) { send(); } }
    </script>

  js代码中的重点都通过红色字体标记出来了,要特别注意,send方法在发送消息时,会自动在消息的末尾添加一个我们约定好的结束符'\0'。

四.源码下载

  打通BS与CS的Demo源码

   如果有任何建议或问题,请留言给我。

引用地址:http://blog.csdn.net/zhuweisky/article/details/39003815

打通B/S与C/S !让HTML5 WebSocket与.NET Socket公用同一个服务端!的更多相关文章

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

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

  2. html5 WebSocket 与 PHP socket 聊天室原理

    html js <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  3. 【HTML5 WebSocket】WebSocket对象特性和方法

    <HTML5 WebSocket权威指南>学习笔记&3 WebSocket方法的对象特性 1. WebSocket方法 a. send方法 send方法用于在WebSocket连接 ...

  4. 让ie6 7 8 9支持原生html5 websocket

      让ie6 7 8 9支持原生html5 websocket   从github上的 web-socket-js(socket.io好像也是用这个做的他们的flash替代传输方式)改过来的.不过值得 ...

  5. HTML5 WebSocket 技术介绍

    WebSocket是html5规范新引入的功能,用于解决浏览器与后台服务器双向通讯的问题,使用WebSocket技术,后台可以随时向前端推送消息,以保证前后台状态统一,在传统的无状态HTTP协议中,这 ...

  6. php +html5 websocket 聊天室

    针对内容比较长出错,修改后的解码函数 和 加码函数 原文请看上一篇 http://yixun.yxsss.com/yw3104.html function uncode($str,$key){ $ma ...

  7. C# WebSocket 服务端示例代码 + HTML5客户端示例代码

    WebSocket服务端 C#示例代码 using System; using System.Collections.Generic; using System.Linq; using System. ...

  8. 使用 HTML5 webSocket API实现即时通讯的功能

    project下载地址:http://download.csdn.net/detail/wangshuxuncom/6430191 说明: 本project用于展示怎样使用 HTML5 webSock ...

  9. HTML5 WebSocket和后端C#通信

    1.使用 HTML5 开发离线应用 http://www.ibm.com/developerworks/cn/web/1011_guozb_html5off/ 2.利用html 5 websocket ...

随机推荐

  1. Spring MVC 详解(一)

    springmvc是spring的一个模块,提供web层解决方案(基于mvc设计架构),mvc是一个设计模式,在b/s系统的应用: spring 的架构 mvc设计模式 spring MVC的框架 第 ...

  2. 【转载】linux内核笔记之高端内存映射

    原文:linux内核笔记之高端内存映射 在32位的系统上,内核使用第3GB~第4GB的线性地址空间,共1GB大小.内核将其中的前896MB与物理内存的0~896MB进行直接映射,即线性映射,将剩余的1 ...

  3. 【转载】C++内存分配

    原文:C++内存分配 内存泄露相信对C++程序员来说都不陌生.解决内存泄露的方案多种多样,大部分方案以追踪检测为主,这种方法实现起来容易,使用方便,也比较安全. 首先我们要确定这个模块的主要功能: 能 ...

  4. 粒子群优化算法(Particle Swarm Optimization)

    粒子群算法的思想源于对鸟/鱼群捕食行为的研究,模拟鸟集群飞行觅食的行为,鸟之间通过集体的协作使群体达到最优目的,是一种基于Swarm Intelligence的优化方法.它没有遗传算法的"交 ...

  5. Python字符串、元组、列表、字典互相转换的方法

    直接上代码!!!   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 29 30 31 32 33 ...

  6. HIP-HOP 漫画家 Skottie Young

     http://blog.sina.com.cn/s/blog_67e59b160100v9ib.html           以上是部分预览图! 下载地址: 29  MB=   127  张 yy语 ...

  7. python_way ,day11 进程

    if __name__ == '__main__': for i in range(10): p = Process(target=foo, args=(i,)) # p.daemon = True ...

  8. C#线程系列讲座(5):同步技术之Monitor

    在上一讲介绍了使用lock来实现线程之间的同步.实际上,这个lock是C#的一个障眼法,在C#编译器编译lock语句时,将其编译成了调用Monitor类.先看看下面的C#源代码: public sta ...

  9. Scrum Meeting---Ten(2015-11-5)

    今日已完成任务和明日要做的任务 姓名 今日已完成任务 今日时间 明日计划完成任务 估计用时 董元财 分类页设计 4h 商品详单设计 4h 胡亚坤 首页设计 2h 滚动广告栏设计 2h 刘猛 服务器测试 ...

  10. HDU 1754

    成段更新 easy #include <stdio.h> #include <string.h> #include <math.h> #include <io ...