引言:实时Web越来越被重视,Google、Facebook等大公司也逐渐开始提供实时性服务。实时Web将是未来最热门的话题之一。
本文选自《基于MVC的JavaScript Web富应用开发》。
为什么实时Web这么重要?我们生活在一个实时(real-time)的世界中,因此Web的最终最自然的状态也应当是实时的。用户需要实时的沟通、数据和搜索。我们对互联网信息实时性的要求也越来越高,如果信息或消息延时几分钟后才更新,简直让人无法忍受。现在很多大公司(如Google、Facebook和Twitter)已经开始关注实时Web,并提供了实时性服务。实时Web将是未来最热门的话题之一。
实时Web的发展历史
传统的Web是基于HTTP的请求/响应模型的:客户端请求一个新页面,服务器将内容发送到客户端,客户端再请求另外一个页面时又要重新发送请求。后来有人提出了AJAX,AJAX使得页面的体验更加“动态”,可以在后台发起到服务器的请求。但是,如果服务器有更多数据需要推送到客户端,在页面加载完成后是无法实现直接将数据从服务器发送给客户端的。实时数据无法被“推送”给客户端。
为了解决这个问题,有人提出了很多解决方案。最简单(暴力)的方案是用轮询:每隔一段时间都会向服务器请求新数据。这让用户感觉应用是实时的。实际上这会造成延时和性能问题,因为服务器每秒都要处理大量的连接请求,每次请求都会有TCP三次握手并附带HTTP的头信息。尽管现在很多应用仍在使用轮询,但这并不是最理想的解决方案。
后来随着Comet技术的提出,又出现了很多更高级的解决方案。这些技术方案包括永久帧(forever frame)、XHR流(xhr-multipart)、htmlfile,以及长轮询。长轮询是指,客户端发起一个到服务器的XHR连接,这个连接永不关闭,对客户端来说连接始终是挂起状态。当服务器有新数据时,就会及时地将响应发送给客户端,接着再将连接关闭。然后重复整个过程,通过这种方式就实现了“服务器推”(server push)。
Comet技术是非标准的hack技术,正因为此,浏览器端的兼容性就成了问题。首先,性能问题无法解决,向服务器发起的每个连接都带有完整的HTTP头信息,如果你的应用需要很低的延时,这将是一个棘手的问题。当然不是说Comet本身有问题,因为还没有其他替代方案前Comet是我们的唯一选择。
浏览器插件(如Flash)和Java同样被用于实现服务器推。它们可以基于TCP直接和服务器建立socket连接,这种连接非常适合将实时数据推给客户端。问题是并不是所有的浏览器都安装了这些插件,而且它们常常被防火墙拦截,特别是在公司网络中。
现在HTML5规范为我们准备了一个替代方案。但这个规范稍微有些超前,很多浏览器都还不支持,特别是IE,对于现在很多开发者来说帮助不大,鉴于大部分浏览器还未实现HTML5的WebSocket,现行最好的办法仍然是使用Comet。
WebSocket
WebSocket(http://dev.w3.org/html5/websockets)是HTML5规范(http://www.w3.org/TR/html5)的一部分,提供了基于TCP的双向的、全双工的socket连接。这意味着服务器可以直接将数据推送给客户端,而不需要开发者求助于长轮询或插件来实现,这是一个很大的进步。尽管有一些浏览器实现了WebSocket,但由于一些安全问题没有解决,因此协议(http://goo.gl/F7lvW)仍然在修订之中。然而这不会阻碍我们的脚步,这些安全问题属于技术性问题,会很快被修复,WebSocket很快就会成为最终规范。与此同时,对于那些不支持WebSocket的浏览器,可以降级使用笨方法来实现,比如Comet或轮询。
和之前的服务器推的技术相比,WebSocket有着巨大的优势,因为WebSocket是全双工的,而不是基于HTTP的,一旦建立连接就不会断掉。Comet所面对的现实问题就是HTTP的体积太大,每个请求都带有完整的HTTP头信息。而且包含很多没有用的TCP握手,因为HTTP是比TCP更高层次的网络协议。
使用WebSocket时,一旦服务器和客户端之间完成握手,信息就可以畅通无阻地随意往来于两端,而不用附加那些无用的HTTP头信息。这极大地降低了带宽的占用,提高了性能。因为连接一直处于活动状态,服务器一旦有新数据要更新时就可以立即发送给客户端(不需要客户端先请求,服务器再响应了)。另外,连接是双工的,因此客户端同样可以发送数据给服务器,当然也不需要附带多余的HTTP头。
下面这段话出自Google的Ian Hickson,HTML5规范小组负责人,它是这样描述WebSocket的:
将千字节的数据降为2字节……并将延时从150毫秒降为50毫秒,这种优化跨越了不止一个量级,实际上仅这两点优化就足以让Google确信WebSocket会给产品带来非一般的用户体验。
现在我们来看一下都有哪些浏览器支持WebSocket:
Chrome >= 4
Safari >= 5
iOS >= 4.2
Firefox >= 4*
Opera >= 11*
尽管Firefox和Opera也都实现了WebSocket,但考虑到WebSocket仍然存在安全隐患,默认并没有启用它。但这不是什么大问题,或许本书出版时WebSocket的安全问题就已经解决了。同时你也可以在那些对WebSocket支持不好的浏览器中进行降级处理,使用诸如Comet和Flash的笨方法。
检测浏览器是否支持WebSocket也非常简单、直接:
varsupported=("WebSocket"inwindow);
if(supported)alert("WebSocketsaresupported");
长远来看,浏览器的WebSocket API非常清晰且合乎逻辑。可以使用WebSocket类来实例化一个新的套接字(socket),这需要传入服务器的端地址,在这个例子中是ws://example.com:
var socket = new WebSocket("ws://example.com");
然后我们需要给这个套接字添加事件监听 :
// 建立连接
socket.onopen = function(){ /* ... */ }
// 通过连接发送了一些新数据
socket.onmessage = function(data){ /* ... */ }
// 关闭连接
socket.onclose = function(){ /* ... */ }
当服务器发送一些数据时,就会触发onmessage事件,同样,客户端也可以调用send()函数将数据传回服务器。很明显,我们应当在连接建立且触发了onopen事件之后调用它:
socket.onmessage=function(msg){
console.log("Newdata-",msg);
};
socket.onopen=function(){
socket.send("Why,hellothere").
};
发送和接收的消息只支持字符串格式。但在字符串和JSON数据之间可以很轻松地相互转换,这样就可以创建你自己的协议:
varrpc={
test:function(arg1,arg2){/*...*/}
};
socket.onmessage=function(data){
//解析JSON
varmsg=JSON.parse(data);
//调用RPC函数
rpc[msg.method].apply(rpc,msg.args);
};
这段代码中,我们创建了一个远程过程调用(remoteprocedurecall,RPC)脚本,服务器可以发送一些简单的JSON来调用客户端的函数,就像下面这行代码:
{"method":"test","args":[1,2]}
注意,这里的调用是限制在rpc对象里的。这样做的原因主要是出于安全考虑,如果允许在客户端执行任意JavaScript代码,黑客就会利用这个漏洞。可以调用close()函数来关闭这个连接:
varsocket=newWebSocket("ws://localhost:8000/server");
你肯定注意到了我们在实例化一个WebSocket的时候使用了WebSocket特有的协议前缀ws://,而不是http://。WebSocket同样支持加密的连接,这需要使用以wss://为协议前缀的TLS。默认情况下WebSocket使用80端口建立非加密的连接,使用443端口建立加密的连接。你可以通过给URL带上自定义端口来覆盖默认配置。要记住,并不是所有的端口都可以被客户端使用,一些非常规的端口很容易被防火墙拦截。
说到现在,你或许会想,“我还不能在项目中使用WebSocket,因为标准还未成型,而且IE不支持WebSocket”。这样的想法并没有错,幸运的是,我们有解决方案。Web-socket-js是一个基于AdobeFlash实现的WebSocket。用这个库就可以在不支持WebSocket的浏览器中做优雅降级。毕竟几乎所有的浏览器都安装了Flash插件。基于Flash实现的SocketAPI和HTML5标准规范完全一样,因此当WebSocket的浏览器兼容性更好的时候,只需简单地将库移除即可,而不必对代码做任何修改。
尽管客户端的API非常简洁、直接,但在服务器端情况就不同了。WebSocket协议包含两个互不兼容的草案协议:草案75和草案76。服务器需要通过检测客户端使用的连接握手类型来判断使用哪个草案协议。
WebSocket首先向服务器发起一个HTTP“升级”(upgrade)请求。如果你的服务器支持WebSocket,则会执行WebSocket握手并初始化一个连接。“升级”请求中包含了原始域(请求所发出的域名)的信息。客户端可以和任意域名建立WebSocket连接,只有服务器才会决定哪些客户端可以和它建立连接,常用做法是将允许连接的域名做成白名单。
在WebSocket的设计之初,设计者们希望只要初始连接使用了常用的端口和HTTP头字段,就可以和防火墙和代理软件和谐相处。然而理想是丰满的,现实是骨感的。有些代理软件对WebSocket的“升级”请求的头信息做了修改,打破了协议规则。事实上,协议草案的最近一次更新(版本76)也无意中打破了对反向代理和网关的兼容性。为了更好更成功地使用WebSocket,这里给出一些步骤:
- 使用安全的WebSocket连接(wss)。代理软件不会对加密的连接胡乱篡改,此外你所发送的数据都是加密后的,不容易被他人窃取。
- 在WebSocket服务器前面使用TCP负载均衡器,而不要使用HTTP负载均衡器,除非某个HTTP负载均衡器大肆宣扬自己支持WebSocket。
- 不要假设浏览器支持WebSocket,虽然浏览器支持WebSocket只是时间问题。诚然,如果连接无法快速建立,则迅速优雅降级使用Comet和轮询的方式来处理。
那么,如何选择服务器端的解决方案呢?幸运的是,在很多语言中都实现了对WebSocket的支持,比如Ruby、Python和Java。要再次确认每个实现是否支持最新的76版协议草案,因为这个协议是被大多数客户端所支持的。
- Node.js
─node-Websocket-server(http://github.com/miksago/node-websocket-server)
─Socket.IO(http://socket.io)
- Ruby
─EventMachine(http://github.com/igrigorik/em-websocket)
─Cramp(https://github.com/lifo/cramp)
─Sunshowers(http://rainbows.rubyforge.org/sunshowers/)
- Python
─Twisted(http://github.com/rlotun/txWebSocket)
─Apachemodule(http://code.google.com/p/pywebsocket)
- PHP
─php-Websocket(http://github.com/nicokaiser/php-websocket)
- Java
─Jetty(http://www.eclipse.org/jetty)
- GoogleGo
─native(http://code.google.com/p/go)
相关推荐
1.7.0 以下版本,一个小程序同时只能有一个 WebSocket 连接,如果当前已存在一个 WebSocket 连接,会自动关闭该连接,并重新创建一个 Web
在京东到家商家中心系统中,商家提出在Web端实现自动打印的需求,不需要人工盯守点击打印,直接打印小票,以节约人工成本。关于问题的思考逻辑:第一种:想到的是可以用ajax来轮询服务端获取最新订单,也就是pull。...
本源码项目是基于NodeJs和Vue的WebSocket网络聊天室设计,包含41个文件,主要使用JavaScript、Vue和...通过该项目,开发者可以学习并实践NodeJs和Vue技术的集成,为后续的Web开发奠定基础。适合用于各类实时通信场景。
本文实例讲述了php基于websocket搭建简易聊天室实践。分享给大家供大家参考。具体如下: 1、前言 公司游戏里面有个简单的聊天室,了解了之后才知道是node+websocket做的,想想php也来做个简单的聊天室。于是搜集各种...
使用websocket将音频从浏览器麦克风流传输到Dialogflow或Google Cloud STT的最佳实践。 Airport SelfService Kiosk演示,通过Web应用程序演示如何将麦克风流传输到GCP。 它利用了以下GCP资源: 对话流程和知识库...
实战项目与经验分享:通过实际项目实战,让您在实践中掌握SSM的运用,同时分享经验与心得,让您少走弯路。 三、适用人群与场景 无论您是初学者还是资深开发者,无论您是在校学生还是职场人士,本系列资料都将是您...
第三部分实践环节我们使用了 gorilla/websocket 库帮助我们快速构建 WebSocket 服务,它帮封装了使用 Go 标准库实现 WebSocket 服务相关的基础逻辑,让我们能从繁琐的底层代码中解脱出来,根据业务需求快速构建 ...
, 本书适合所有Web 应用及站点开发人员阅读,包括但不限于前端、后端、运维、大数据分析、, UI/UX、存储、视频、实时消息,以及性能工程师。, Ilya Grigorik 是谷歌“Web加速”(Make The Web Fast)团队的性能...
Flutter WebSocket局域网聊天 :speech_balloon: 使用此Flutter应用程序在局域网上聊天。结构体该存储库包含2个主要项目: 位于... 我还制作了Flutter应用程序以显示一些最佳实践,例如使用provider , web_socke
描述Crow是用于运行Web服务的C ++微框架。 它使用类似于Python的Flask的路由,使其易于使用。 它也非常快,击败了多个现有的C ++框架以及非C ++框架。产品特点易于布线(类似于长颈瓶)。 类型安全的处理程序。 速度...
聊天 Websocket 实践 Chat Websocket Practice 是 Makers Academy 的第 7 周项目。 本周我们学习了如何使用 express 和 web-sockets 在 node.js 中构建简单的应用程序。 规格 Chat Websocket Practice 是一个在线...
145Effective前端16:使用Service Worker做一个PWA离线网页应用 151第5章 前端与计算机基础 164Effective前端17:理解WebSocket和TCP/IP 164Effective前端18:理解HTTPS连接的前几毫秒发生了什么 185Effective前端...
警告此存储库不再受支持如果您正在寻找使用laravel的网络套接字的好方法,请查看: : Laravel库,用于异步服务WebSocket。 通过简单的界面构建应用程序,然后重新使用您的应用程序,而无需更改任何代码,只需组合...
ThinkPHP是一个快速、简单的面向对象的轻量级PHP开发框架,遵循Apache2开源...简洁、快速和实用是ThinkPHP发展秉承的宗旨,为此ThinkPHP会不断吸收和融入更好的技术以保证其新鲜和活力,提供WEB应用开发的最佳实践!
于是诞生了开发Jayce这个框架的想法,一句话描述就是:基于websocket的实时单页应用开发框架Jayce可以让开发者用node.js + websocket + redux + react 开发出能够灵活的、健壮的、复杂的实时web应用,让程序员有更多...
更多链接: 文档: : 从介绍和教程到技术方法文档的不同类型的文档亮点+快速入门示例: : 教程: : 有助于获得实践的主要思想项目模板: : 用于快速启动项目范例: : 增加测试 介绍 JDI Dark –是服务测试的测试...
cloudpush- 分布式推送产品cloudpush是我对于springcloud微服务框架的一个学习实践,旨在学习微服务架构的同时,实现一个基于websocket协议,可平滑水平拓展的分布式推送产品。应用架构图项目用到的技术目前核心的...
spring boot 实践学习案例,与其它组件结合如 mybatis、jpa、dubbo、redis、mongodb、memcached、kafka、rabbitmq、activemq、elasticsearch、security、shiro等 #### Spring Boot 版本 - 2.0.3.RELEASE #### 模块...
尝试在 Spring Boot 中使用 WebSocket 是一种实践。它被配置为制作暂时有效的东西。 先决条件 实施此动手操作的先决条件如下。 具备 Java 和 Web 应用程序开发的基本知识 已安装 JDK 1.7 或更高版本 安装了 Eclipse...
探索RESTful模式以及低延迟WebSocket API 与各种远程Web服务交互以使用从身份验证和授权到功能全面的同义词库的功能探索在Go中启用并发的核心语法和语言功能了解何时何地使用并发性来保持数据一致和应用程序无阻塞,...