WebSocket-socket.io stompJs epochjs构建实时监测图表
最近老大叫我做一个实时监测的图表,用epochJs做。
今天老大布置了任务,然而此时的我连WebSocket是什么都不知道。磨刀不误砍柴工,我们先来看看他们分别都是个什么东西吧。
WebSocket简介
第一步我们就先来看看WebSocket是什么。
首先,WebSocket是HTML5的东西。它是HTML5开始提供的一种在单个TCP连接上进行双全工
(是指在发送数据的时候也能接收数据,两者同步进行)
通讯的协议。但是我们已经有一个TCP协议(HTTP协议)
了,为什么还需要另一个协议。借用阮一峰老师的一张图。
这张图非常简单易懂的向我们展示了WebScoket的作用。传统的HTTP协议,只能由客户端发起通信,服务端接受请求后,返回一个查询结果给客户端。HTTP协议不能由服务器主动向客户端推送信息。
这种单项请求有个很重要的局限在于,在服务器有了连续的变化的时候,客户端不能及时的得知。
比如:我们要检测在线聊天室实时在线人数,一旦有人上线或者下线,就会提示我们。这种情况下,单项请求无法实时的检测服务器数据的变化,当然,除了使用轮询,但轮询的效率非常低,非常耗费资源,所以就发明了WebScoket。
那WebSocket兼容什么浏览器呢?
撒WebSocket与HTTP协议有良好的兼容性。而且它在与服务器的首次握手阶段就采用的HTTP协议,因此握手时不容易被屏蔽,能通过各种HTTP代理服务器。并且在2011年WebSocket就已经成为国际标准了,兼容所有的浏览器。
创建WebSocket对象
以下 API 用于创建 WebSocket 对象。
var Socket = new WebSocket(url, [protocol] );
以上代码中的第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的,指定了可接受的子协议。
socket.io简介
Socket.io实际上相当于WebSocket的父集。Socket.io封装了WebSocket和轮询等方法,不支持WebSocket的情况还提供了降级AJAX轮询,功能完备,设计优雅,是开发实时双向通讯的不二手段。
socket.io是一个以实现跨浏览器、跨平台的实时应用为目的的项目。针对不同的浏览器版本或者不同客户端会做自动降级处理,选择合适的实现方式(websocket, long pull..),隐藏实现只暴露统一的接口。可以让应用只关注于业务层面上。
Stompjs简介
Stomp是什么
STOMP即Simple (or Streaming) Text Orientated Messaging Protocol,简单(流)文本定向消息协议,它提供了一个可互操作的连接格式,允许STOMP客户端与任意STOMP消息代理(Broker)进行交互。STOMP协议由于设计简单,易于开发客户端,因此在多种语言和多种平台上得到广泛地应用。
STOMP协议的前身是TTMP协议(一个简单的基于文本的协议),专为消息中间件设计。
STOMP是一个非常简单和容易实现的协议,其设计灵感源自于HTTP的简单性。尽管STOMP协议在服务器端的实现可能有一定的难度,但客户端的实现却很容易。例如,可以使用Telnet登录到任何的STOMP代理,并与STOMP代理进行交互。
STOMP (Simple (or Streaming) Text Oriented Message Protocol ) 是一种在客户端与中转服务端之间进行异步消息传输的简单通用协议; 它定义了服务端与客户端之间的格式化文本传输方式;
面向流文本的消息传输协议(STOMP,Streaming Text Oriented Messaging Protocol)[7],是 WebSocket 通信标准。在通常的发布-订阅语义之上,它通过 begin/publish/commit 序列以及 acknowledgement 机制来提供消息可靠投递。
由于协议简单且易于实现,几乎所有的编程语言都有 STOMP 的客户端实现。但是在消息大小和处理速度方面并无优势。
什么时候会使用它?
当与 Apache Apollo[8] 这样的多协议代理(multi-protocol broker)中间件结合使用时,可以做许多有趣的集成。比如在浏览器的图表中不断更新 IoT 设备的数据。
总结
所以以上socket.io是基于H5的WebSocket进行与服务器的通讯,实现实时获取数据,而Stomp则是一种基于文本的信息交换协议,Stomp也是webSocket通信标准。