专栏首页云前端Web端服务器推送技术

Web端服务器推送技术

一、应用场景

  • 监控系统:后台硬件热插拔、LED、温度、电压发生变化;
  • 即时通信系统:其它用户登录、发送信息;
  • 即时报价系统:后台数据库内容发生变化;

二、面临的问题

传统的本地客户端可以基于Socket套接字与服务器建立持久连接,服务器能实时地将更新的信息传送到客户端,而无须客户端发出请求。但HTTP属于无状态连接,即每次请求结束后与服务器的连接会立即释放,服务器不能主动推送消息到客户端,只能由客户端浏览器发起请求。

将传统的方法迁移到Web上,首先考虑的是如何在功能有限的浏览器端接收、处理信息:

  • 客户端如何接收、处理信息,是否需要使用套接口或是使用远程调用。客户端呈现给用户的是 HTML 页面还是 Java applet 或 Flash 窗口。如果使用套接口和远程调用,怎么和 JavaScript 结合修改 HTML 的显示。
  • 客户与服务器端通信的信息格式,采取怎样的出错处理机制。
  • 客户端是否需要支持不同类型的浏览器如 IE、Firefox,是否需要同时支持 Windows 和 Linux 平台。

三、解决方案

(1)JavaApplet-用Java语言编写的小应用程序,可以直接嵌入到网页中,并能够产生特殊的效果。

HTML 代码:

<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 属性设为对一个长连接的请求,服务器端就能源源不断地往客户端输入数据。

<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都需要服务器端单独提供相应的服务进行支持。

本文分享自微信公众号 - 云前端(fewelife),作者:小樊qq

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-09-27

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • [译] 为何每次 Git Commit 要尽可能小?

    原文:https://medium.com/better-programming/why-you-should-write-small-git-commits-...

    江米小枣
  • 懒人Parcel

    横空出世的Parcel,这几个月来成为了前端圈的又一大热点,github短短几个月就获得了上万的star.

    江米小枣
  • 重拾CSS规范之BFC & IFC

    BFC、IFC的概念重要吗?不重要,没有它们我们也能写出符合要求甚至很好的页面。重要,深入了了解了CSS这门语言的核心,你的CSS才可能会有创造性,你才能发明出...

    江米小枣
  • AngularJS与服务器端MVC比较

    这是一篇讨论客户端MVC和服务器端MVC的比较文章。 首先分离关注是架构设计的一个基本原则,多层架构中:数据存储 服务层 API层和表现层各层之间应该最小依赖...

    前朝楚水
  • java将字符串存入GridF并通过id或文件名查询

    HUC思梦
  • 详解机器学习中的熵、条件熵、相对熵、交叉熵

    熵 (entropy) 这一词最初来源于热力学。1948年,克劳德·爱尔伍德·香农将热力学中的熵引入信息论,所以也被称为香农熵 (Shannon entropy...

    石晓文
  • 为什么相同的消息微信每次加密后发送的内容都不一样?

    抓包分析微信的消息,发现发送同样的内容,抓取到的数据包内容都不相同。这到底是怎么回事呢?

    普通程序员
  • 【leetcode】Binary Tree Inorder Traversal

    Given a binary tree, return the inorder traversal of its nodes' values.

    阳光岛主
  • 详解机器学习中的熵、条件熵、相对熵、交叉熵

    目录 信息熵 条件熵 相对熵 交叉熵 总结 一 信息熵 (information entropy) 熵 (entropy) 这一词最初来源于热力学。1948年...

    磐创AI
  • [pixlate] 用 canvas 转像素画

    几周前看到这个像素猫的效果,这个版本的实现原理是 box-shadow,我想到用 grid 也可以实现一遍。接着发散到了“如何将任意图片像素化”上。

    kmokidd

扫码关注云+社区

领取腾讯云代金券