一、应用场景
- 监控系统:后台硬件热插拔、LED、温度、电压发生变化;
- 即时通信系统:其它用户登录、发送信息;
- 即时报价系统:后台数据库内容发生变化;
二、面临的问题
传统的本地客户端可以基于Socket套接字与服务器建立持久连接,服务器能实时地将更新的信息传送到客户端,而无须客户端发出请求。但HTTP属于无状态连接,即每次请求结束后与服务器的连接会立即释放,服务器不能主动推送消息到客户端,只能由客户端浏览器发起请求。
将传统的方法迁移到Web上,首先考虑的是如何在功能有限的浏览器端接收、处理信息:
- 客户端如何接收、处理信息,是否需要使用套接口或是使用远程调用。客户端呈现给用户的是 HTML 页面还是 Java applet 或 Flash 窗口。如果使用套接口和远程调用,怎么和 JavaScript 结合修改 HTML 的显示。
- 客户与服务器端通信的信息格式,采取怎样的出错处理机制。
- 客户端是否需要支持不同类型的浏览器如 IE、Firefox,是否需要同时支持 Windows 和 Linux 平台。
三、解决方案
(1)JavaApplet-用Java语言编写的小应用程序,可以直接嵌入到网页中,并能够产生特殊的效果。
HTML 代码:
代码语言:javascript复制<html>
<title>The Hello, World Applet</title>
<hr>
<applet code="HelloWorldApplet.class" width="320" height="120">
If your browser was Java-enabled, a "Hello, World"
message would appear here.
</applet>
<hr>
</html>
(2)Flash XMLSocket-在HTML页面中陷入一个使用了XMLSocket类的Falsh程序。JavaScript通过调用此Flash程序提供的套接口接口与服务端的套接口进行通信。JavaScript在收到服务器端以XML格式传送的信息控制HTML的Dom对象改变页面的内容显示。
(3)iFrame-通过在 HTML 页面里嵌入一个隐蔵帧,然后将这个隐蔵帧的 SRC 属性设为对一个长连接的请求,服务器端就能源源不断地往客户端输入数据。
代码语言:javascript复制<iframe frameborder=0 width=170 height=100 marginheight=0 marginwidth=0 scrolling=no src="http://site/message.php"></iframe
(4)Ajax-AJAX 是浏览器技术发展的成果,通过在浏览器端发送异步请求,提高了单用户操作的响应性。
(5)AJAX 的长轮询(long-polling)方式-通过在HTTP的Response Header中设置KeepAlive参数可以让浏览器客户端和服务器保持较长的一段时间通信,与单纯使用AJAX 的不同之处在于:
- 服务器端会阻塞请求直到有数据传递或超时才返回。
- 客户端 JavaScript 响应处理函数会在处理完服务器返回的信息后,再次发出请求,重新建立连接。
- 当客户端处理接收的数据、重新建立连接时,服务器端可能有新的数据到达;这些信息会被服务器端保存直到客户端重新建立连接,客户端会一次把当前服务器端所有的信息取回。
(6)WebSocket-于2011年被IETF定为标准RFC 6455,并被RFC7936所补充规范。是基于TCP的一种新的网络协议,它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端。
创建对象
var ws = new WebSocket(url,name);
url为WebSocket服务器的地址,name为发起握手的协议名称,为可选择项。
发送文本消息
ws.send(msg);
msg为文本消息,对于其他类型的可以通过二进制形式发送。
接收消息
ws.onmessage = (function(){...})();
错误处理
ws.onerror = (function(){...})();
关闭连接
ws.close();
四、方案选择
Java Applet是一种相对古老的技术,在收到服务器端返回的信息后,无法通过 JavaScript 去更新 HTML 页面的内容,已经渐渐退出了历史舞台。
Flash XMLSocket只有在安装了 Flash 播放器才能正常运行,此方案的缺点在于:
1.客户端必须安装 Flash 播放器;
2.因为 XMLSocket 没有 HTTP 隧道功能,XMLSocket 类不能自动穿过防火墙;
3.因为是使用套接口,需要设置一个通信端口,防火墙、代理服务器也可能对非 HTTP 通道端口进行限制;
不过这种方案在一些网络聊天室,网络互动游戏中已得到广泛使用。当前,最新版chrome浏览器已经默认禁止了Flash插件支持。
WebSocket是一种的新型的HTML5技术,当前浏览器的支持并不完善,可以与Flash XMLSocket结合,封装一套通用API,根据不同浏览器特性调用不同的实现,但无论是WebSocket还是Flash XMLSocket都需要服务器端单独提供相应的服务进行支持。