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

 随着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源码

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

 附相关系列:文本协议通信demo源码及说明文档

二进制协议通信demo源码及说明文档

另附:简单即时通讯Demo源码及说明

时间: 2024-10-14 11:50:08

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

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

随着HTML5 WebSocket技术的日益成熟与普及,我们可以借助WebSocket来更加方便地打通BS与CS -- 因为B/S中的WebSocket可以直接连接到C/S的服务端,并进行双向通信.如下图所示: 一.对Socket Server的要求 我们可以尝试让Socket Server透明地支持WebSocket客户端,所谓透明的意思是,服务端开发人员不用关心客户端究竟是什么类型,而是可以统一的接收数据.处理数据.发送数据.为了做到这一点,我们可以构建一个服务端框架,让框架完成透明化的工作

OpenCV之识别自己的脸——C++源码放送

OpenCV之识别自己的脸--C++源码放送 前言 在将近一年之前,我在CSDN专栏<OpenCV实践之路>中连续发了三篇博客,完整地描述了基于OpenCV进行人脸识别的全过程.三篇都将近一万的阅读量和大量的评论的表明,人脸识别果然是大家在学习OpenCV过程中最感兴趣的课题,之一.当然,也有可能是本科生毕设老师最感兴趣的课题之一... 由于当时写的时候是按照前后流程来的,所以源码比较分散.加之我想当然地认为,很多源码是之前博客中已经放出来的,可以一句带过.这导致了很多同学学习的时候很不方面.

cocos2d-x 3.0游戏实例学习笔记 《跑酷》 完结篇--源码放送

说明:这里是借鉴:晓风残月前辈的博客,他是将泰然网的跑酷教程,用cocos2d-x 2.X 版本重写的,目前我正在学习cocos2d-X3.0 于是就用cocos2d-X 3.0重写,并做相关笔记 OK,到昨天为止,我们已经将游戏基本上写完了,这里本来就是别人开源的东西,我这里重写,当然要公布源码.那么这里有两种方式: 第一种:将我运行成功的整个项目打包,VS2012+win7下的,这种方式就比较大,但是可以打开打开 Run/proj.win32/Run.sln 就可以啦 第二种:就是我只打包

dubbo入门介绍及结合spring搭建(源码放送)

前言 关于dubbo的介绍网上有很多博文有入门级的说明,但在这里,将会提供给大家dubbo的入门介绍,dubbo结合spring项目的简单搭建,以及提供demo源代码的免费下载. dubbo的官方网址是:http://dubbo.io/ dubbo框架使用的demo源码下载地址:http://download.csdn.net/detail/fighterandknight/9514559 dubbo是什么? Dubbo是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,以及

一个变态程序的窥私欲:智能语音录制程序——窃听神器(源码放送!)

1. 我这人从小有个坏毛病,就是喜欢偷窥别人隐私.当然,在道德上,我时刻要求自己做一名正人君子,只不过是心理上有这癖好罢了.所以我从小就对窃听.窃视.黑客技术.破解技术等疯狂着迷!实际上这也是我走上程序员之路的一个重要原因! 或许正如弗洛伊德所说的那样,潜意识里面暗藏的原始欲望,是我们一切行为背后的真正动因.就像不可一世的希特勒和他野心勃勃的奋斗一样,归根到底只是因为他是一个自卑的抖S. 2. 今天说的这个事呢还要从两年前说起.那时我还在念大学.说来也巧,咱们宿舍的4个人都有一个共同的毛病——梦

(8)分布式下的爬虫Scrapy应该如何做-图片下载(源码放送)

  转载主注明出处:http://www.cnblogs.com/codefish/p/4968260.html 在爬虫中,我们遇到比较多需求就是文件下载以及图片下载,在其它的语言或者框架中,我们可能在经过数据筛选,然后异步的使用文件下载类来达到目的,Scrapy框架中本身已经实现了文件及图片下载的文件,相当的方便,只要几行代码,就可以轻松的搞定下载.下面我将演示如何使用scrapy下载豆瓣的相册首页内容. 优点介绍: 1)自动去重 2)异步操作,不会阻塞 3)可以生成指定尺寸的缩略图 4)计算

多人在线扑克游戏源码带服务端完整版

多人在线扑克游戏源码带服务端完整版,本项目源码是一套网络版的扑克牌项目源码,带服务器端源码,服务器端也是用java做的,打开游戏以后需要配置IP服务器端的IP和端口,服务端默认监听9999端口,客户端ip填写10.0.2.2,端口信息不用管直接点连接就可以连接到电脑上的服务端.项目源码注释比较丰富,可以研究一下里面的算法之类的.搭建这个服务端环境废了我半天劲,不知道是不是我运行的方法不对,打开前两个游戏客户端没有问题,打开第三个就开始直接强制退出.游戏没玩成所以没有截那部分的图.<ignore_

Dubbo服务端/客户端demo

项目组采用分布式服务,线上有几十个应用,RPC调用完全依靠Dubbo.平时开发一直都是用其他人搭好的dubbo环境,最近自己抽空独立的搭建dubbo小demo,一个服务端,一个客户端. 服务端 服务端maven父工程 首先搭建一个maven父工程,引入dubbo和spring的依赖,dubbo可以和spring无缝集成. <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding

netty服务端启动--ServerBootstrap源码解析

netty服务端启动--ServerBootstrap源码解析 前面的第一篇文章中,我以spark中的netty客户端的创建为切入点,分析了netty的客户端引导类Bootstrap的参数设置以及启动过程.显然,我们还有另一个重要的部分--服务端的初始化和启动过程没有探究,所以这一节,我们就来从源码层面详细分析一下netty的服务端引导类ServerBootstrap的启动过程. spark中netty服务端的创建 我们仍然以spark中对netty的使用为例,以此为源码分析的切入点,首先我们看