zoukankan      html  css  js  c++  java
  • 网页浏览的实时通信的实现(转)

    我们上网用浏览器浏览服务器的页面的过程,实际上是浏览器先通过tcp/ip协议与主机通信并下传文件、再断开tcp/ip连接并显示收到的文件的过程,简单地说,浏览器浏览网页是一种无连接的方式,它不能与服务器实时动态地交换数据并即时更新客户端的浏览信息。这样,在类似网上实时交谈、聊天、寻呼的时候,我们就只有采取定时刷新去取服务器信息更新客户端页面的方法来实现。这样做并不是真正实时的,而只是定时的,总会有一定的时间间隔;同时当连接用户增多时,大量的刷新请求将会造成服务器资源的巨大消耗,以致反应缓慢甚至系统崩溃。
    为了解决这个问题,实现客户端与服务器高速、稳定、实时地交换信息,在目前的网页技术上,我们只能采用编程扩充服务器的功能来实现。采取服务器编程而非客户端编程,是为了避免客户端的变动,以适应广泛的用户和环境,而且方便升级和维护。这里例举了几种实现方法并对流行方法的实现技术做了较细致的说明。
    一、 采用控件实现的纯socket双向数据传输
    浏览器自身具备了一定的交互功能,它通过脚本语言实现。Microsoft的ie浏览器支持javascript和vbscript两种脚本语言,可以使用它们进行客户端交互编程甚至事件触发编程。Ie还允许网页文本里面引用本机的activex控件,这样,我们就可以通过socket控件实现客户端和服务器之间的实时tcp/ip连接,实现信息的即时上传下载,并将浏览协议简化为socket控件之间的操作,实现对客户端网页信息的自如控制。
    这里重点说一下客户端浏览器的socket编程,下面是加载microsoft的winsock控件的代码,这段代码比较复杂,不过没关系,microsoft提供了一个工具叫activex control pad可以自动生存这段代码,我们只需要选择控件就可以。这个工具在microsoft的网站有下载。
    <OBJECT ID="winsck" WIDTH=28 HEIGHT=28
    CLASSID="CLSID:248DD896-BB45-11CF-9ABC-0080C7E7B78D">
    <PARAM NAME="_ExtentX" VALUE="741">
    <PARAM NAME="_ExtentY" VALUE="741">
    <PARAM NAME="_Version" VALUE="393216">
    <PARAM NAME="RemoteHost" VALUE="0">
    </OBJECT>
    下面的代码在网页装入时触发,使浏览器与服务器建立tcp/ip长连接:
    <SCRIPT LANGUAGE="javaScript" FOR="window" EVENT="onLoad()">
    <!--
    winsck.Connect("192.168.1.1",8800); 连接服务器指定端口
    parent.infoinit(); 调用父窗口函数显示初始信息
    -->
    </SCRIPT>
    下面的代码包含一个过程,它将在控件收到服务器的信息时自动触发,在过程内部我们可以编写获取信息、处理信息的代码。
    <SCRIPT LANGUAGE="VBScript">
    Sub winsck_DataArrival(bytesTotal)
    recdata=""
    call winsck.GetData(recdata, vbString, bytesTotal) 获取服务器下传的信息
    call parent.infow(recdata) 调用父窗口函数显示信息
    end sub
    </SCRIPT>
    至于服务器端的socket控件编程可以参考相关语言的帮助,这样,服务器和浏览器之间的实时通信就仅仅是两个socket控件间的通信了,信息传输协议可以灵活地自己定义,不再拘泥于标准的http通信协议了。
    二、 采用Java applet技术实现的双向数据传输
    采用java applet技术与第一种方法类似,它只是将大多数编程操作封装在java小程序中,客户端在取到包含小程序引用的网页时,先去指定的服务器下载小程序到本地,然后执行它,由小程序建立与服务器的连接,并进行信息的收转工作。
    Java applet的编写遵循java语法,这里不做详细的说明。
    三、 单向实时数据传输的实现:http全连接
    所谓http全连接,就是浏览器在向服务器发送文件传输请求后,服务器向浏览器返回数据后不向浏览器发送传输完毕信号,而是一直维持这条连接。当有数据需要传送到该客户端时,就可以通过这条链路迅速、实时的送往客户端。这样的优点是实现了数据的实时下传,而且客户端不需要任何修改,能浏览网页就可以接受实时信息。缺点是单向数据传输,不能以同样的优势反馈信息给服务器。
    具体实现可以采用C、DELPHI、VB等高级编程语言,设计一个能在服务器端运行的独立程序,加载一个支持tcp/ip的socket控件如winsock,在指定的某个端口监听客户端的通信信息。当端口收到客户端的连接信息时,如果是实时取信息请求,则记录本次连接并维持链路不断,以后系统有新信息需要刷新客户端页面,就直接通过这条链路发送出去。发送的信息可以是浏览器支持的html脚本,以及嵌入的javascript或vbscript脚本,方便客户端进行再处理。这里需要了解的是如何读取并分析客户端的请求信息。一个客户端提交的表单信息类似如下格式:
    POST /chat/index.htm?name=wang HTTP/1.1
    Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/vnd.ms-excel, application/msword, application/vnd.ms-powerpoint, */*
    Referer: http://fywww.com/default.asp
    Accept-Language: zh-cn
    Content-Type: application/x-www-form-urlencoded
    Accept-Encoding: gzip, deflate
    User-Agent: Mozilla/4.0 (compatible; MSIE 5.0; Windows 98; DigExt)
    Host: localhost:8800
    Content-Length: 15
    Connection: Keep-Alive
    Cookie: ASPSESSIONIDFFFDZLIF=FPCDLILCNLLEDFNHCPOEMBLG
    info=input+info
    这里需要说明的是第一行和最后一行。第一行POST /chat/index.htm?name=wang 表示了客户端提交参数的方式是post,提交的url是 /chat/index.htm?name=wang ,其中name=wang是url后带的参数。最后一行是info=input+info,表示以post方式提交的表单变量info及值“input info”,注意,空格被替换为+,如果有多个参数将跟随其后。这样,我们的socket控件接收到客户端的请求信息后,通过这种规范格式的匹配,就知道客户端需要请求操作哪个文件、携带了什么参数了。
    至于客户身份鉴定、多用户支持、其他页面的请求与答复等功能,一样可以根据请求数据进行操作后,按标准html格式返回给浏览器显示,只是要记得断开socket连接。
    利用浏览器表单向服务器或扩编的程序提交信息,由http全连接链路返回信息,是目前大多数聊天室系统采用的技术。它的编程操作简单,实现方便,上传信息虽然通过url发送,但因为上传数据量不大,因此服务器负载不重。这种方式大大加快了服务器的响应和客户端的刷新速度,减轻了服务器的负担,普通PC机即可负载数千人同时在线连接,是目前internet技术水平上较好的一种browser/server实时通信的解决办法。
    注:该文以microsoft的系统(windows、ie等)为例解环境。
  • 相关阅读:
    前端页面获取各类页面尺寸及坐标尺寸总结
    禁止微信内置浏览器调整字体大小
    区分浏览器,判断浏览器版本
    JavaScript
    ASP.NET MVC,Entity Framework 及 Code First
    循序渐进MongoDB V3.4(Ubuntu)
    Webpack
    RequireJS Step by Step
    JavaScript Object 及相关操作
    ES6 Promises
  • 原文地址:https://www.cnblogs.com/fubeidong/p/715033.html
Copyright © 2011-2022 走看看