分享web端即时通讯的发展与websocket的实践

wecloud1314 wecloud1314     2022-12-01     772

关键词:

为什么说Web即时通讯技术这么重要?我们生活在一个实时(real-time)的世界中,因此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必定会是未来的潮流和趋势,值得深入研究和了解。即时通讯聊天软件app开发可以加蔚可云的v:weikeyun24咨询

 

WebSocket 技术实践

WebSocket是HTML5规范的一部分,提供了基于TCP的双向的、全双工的socket连接。这意味着服务器可以直接将数据推送给客户端,而不需要开发者求助于长轮询或插件来实现,这是一个很大的进步。尽管有一些浏览器无法支持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:

    IE >= 10
    Chrome >= 4
    Safari >= 5
    iOS >= 4.2
    Firefox >= 4*
    Opera >= 11*

你肯定注意到了我们在实例化一个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版协议草案,因为这个协议是被大多数客户端所支持的。

分享基于http长连接的web端即时通讯技术

...即时通讯方案大致有4种:传统Ajax短轮询、Comet技术、WebSocket技术、SSE(Server-sentEvents)。 本文将介绍如何在现有的技术基础上选择合适的方案开发一个“服务器推”(Comet技术)的应用,最优的方案还是... 查看详情

websocket实现即时通讯怎么操作?

参考技术A要使用WebSocket实现即时通讯,可以按照以下步骤进行操作:1,打开浏览器并创建WebSocket对象:在需要与服务器进行通信的页面中添加JavaScript代码,创建WebSocket对象。例如:varws=newWebSocket("ws://server_ip:port");其中&q... 查看详情

web端即时通讯技术原理分享

web端的IM应用,由于浏览器的兼容性以及其固有的“客户端请求服务器处理并响应”的通信模型,造成了要在浏览器中实现一个兼容性较好的IM应用,其通信过程必然是诸多技术的组合,本文的目的就是要详细探讨... 查看详情

如何用websocket打造web端im即时通讯聊天

WebSocket如今在Web端即时通讯技术应用里使用广泛,不仅用于传统PC端的网页里,也被很多移动端开发者用于基于HTML5的混合APP里。对于想要在基于Web的应用里添加IM、推送等实时通信功能,WebSocket几乎是必须要掌握的技... 查看详情

即时通讯web端开发:短轮询cometwebsocketsse

...即时通讯方案大致有4种:传统Ajax短轮询、Comet技术、WebSocket技术、SSE(Server-sentEvents)。本文将简要介绍这4种技术的原理,并指出各自的异同点、优缺点等。 1996年IETF  HTTP工作组 查看详情

web端即时通讯技术:websocketsocket.iosse

...谓绞尽脑汁,极尽所能。自从HTML5标准发布之后,WebSocket这类技术横空出世,实现Web端即时通讯技术的便利性大大提前,以往想都不敢想的真正全双工实时 查看详情

支持百万并发的web端即时通讯方案(代码片段)

...即时通讯方案大致有4种:传统Ajax短轮询、Comet技术、WebSocket技术、SSE(Server-sentEvents)。 以上4种即时通讯技术各有各的优势和限制,很难决定最佳实践,开发者选型时根据自已的应用 查看详情

im即时通讯开发新手快速入门:websocket教程

WebSocket是html5规范中的一个部分,它借鉴了socket这种思想,为web应用程序客户端和服务端之间(注意是客户端服务端)提供了一种全双工通信机制。同时,它又是一种新的应用层协议,WebSocket协议是为了提... 查看详情

即时通讯开发中websocket和sse技术如何实现web端消息推送

HTTP服务器推送也称为HTTP流,是一种客户端-服务器通信模式,它将信息从HTTP服务器异步发送到客户端,而无需客户端请求。在高度交互的Web或移动应用程序中,一个或多个客户端需要连续不断地从服务器接收信息... 查看详情

浅析现代web端im即时通讯开发技术

...谓绞尽脑汁,极尽所能。自从HTML5标准发布之后,WebSocket这类技术横空出世,实现Web端即时通讯技术的便利性大大提前,以往想都不敢想的真正全双工实时 查看详情

深入即时通讯开发协议websocket协议细节(代码片段)

WebSocket是HTML5一种新的web通信技术,它真正实现了浏览器与服务器的全双工实时通信(full-duplex)。本文将详解介绍WebSocket的通信协议细节。 传统“长轮询”实现Web端即时通讯的问题WebSocket出现之前,Web端为了实现即时通讯... 查看详情

国内外基于web的好友聊天系统的现状

...手机端、电脑端和网页端使用,提供了好友聊天、朋友圈分享、公众号订阅等功能。2.QQ:中国最早的即时通讯软件,也可以在手机端、电脑端和网页端使用,提供了好友聊天、群组聊天、游戏等功能。3.钉钉:一款专注于企业办... 查看详情

分享im即时通讯开发之websocket:概念原理易错常识

WebSocket诞生背景早期,很多网站为了实现推送技术,所用的技术都是轮询(也叫短轮询)。轮询是指由浏览器每隔一段时间向服务器发出HTTP请求,然后服务器返回最新的数据给客户端。 这种传统的模式带来... 查看详情

用于web端的即时通讯的框架socket.io(代码片段)

WebSocket是HTML5的一种新通信协议,它实现了浏览器与服务器之间的双向通讯。 而Socket.IO是一个完全由JavaScript实现、基于Node.js、支持WebSocket的协议用于实时通信、跨平台的开源框架,它包括了客户端的JavaScript和服务器端... 查看详情

分享即时通讯开发之websocket:概念原理易错常识动手实践

...多个方面入手,万字长文,带你一起全方位探索WebSocket技术。 阅读完本文,你将了解以下内容:1)了解WebSocket的诞生背景、WebSocket是什么及它的优点;2)了解WebSocket含有哪些API及如何使用WebSocketAPI发... 查看详情

即时通讯技术文集(第13期):web端即时通讯技术精华合集[共15篇]

...- 2 -] Web端即时通讯技术盘点:短轮询、Comet、Websocket、SSE[链接] http://www.52im.net/thread-336-1-1.html[摘要] 本文将简要介绍这4种技术的原理,并指出各自的异同点、优缺点等。[- 3 -] SSE技术详解:一种全... 查看详情

im即时通讯开发websocket从入门到精通

自从HTML5里的WebSocket出现后,彻底改变了以往Web端即时通讯技术的基础通道这个“痛点”(在此之前,开发者们不得不弄出了诸如:短轮询、长轮询、Comet、SSE等技术,可谓苦之久矣...),如今再也不用... 查看详情

初步认识即时通讯开发技术websocket

...于webAPP的开发,这些新特性得以推广和使用,而websocket作为一种新的web通信技术具有巨大意义。 什么是Socket?什么是WebSocket?对于第1次听说WebSocket技术的人来说,两者有什么区别? 查看详情