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

wecloud1314 wecloud1314     2022-12-01     266

关键词:

HTML5规范在传统的web交互基础上为我们带来了众多的新特性,随着web技术被广泛用于web APP的开发,这些新特性得以推广和使用,而websocket作为一种新的web通信技术具有巨大意义。

 

什么是Socket?什么是WebSocket?

对于第1次听说WebSocket技术的人来说,两者有什么区别?websocket是仅仅将socket的概念移植到浏览器中的实现吗?

我们知道,在网络中的两个应用程序(进程)需要全双工相互通信(全双工即双方可同时向对方发送消息),需要用到的就是socket,它能够提供端对端通信,对于程序员来讲,他只需要在某个应用程序的一端(暂且称之为客户端)创建一个socket实例并且提供它所要连接一端(暂且称之为服务端)的IP地址和端口,而另外一端(服务端)创建另一个socket并绑定本地端口进行监听,然后客户端进行连接服务端,服务端接受连接之后双方建立了一个端对端的TCP连接,在该连接上就可以双向通讯了,而且一旦建立这个连接之后,通信双方就没有客户端服务端之分了,提供的就是端对端通信了。我们可以采取这种方式构建一个桌面版的im程序,让不同主机上的用户发送消息。从本质上来说,socket并不是一个新的协议,它只是为了便于程序员进行网络编程而对tcp/ip协议族通信机制的一种封装。

websocket是html5规范中的一个部分,它借鉴了socket这种思想,为web应用程序客户端和服务端之间(注意是客户端服务端)提供了一种全双工通信机制。同时,它又是一种新的应用层协议,websocket协议是为了提供web应用程序和服务端全双工通信而专门制定的一种应用层协议,通常它表示为:ws://echo.websocket.org/?encoding=text HTTP/1.1,可以看到除了前面的协议名和http不同之外,它的表示地址就是传统的url地址。

可以看到,websocket并不是简单地将socket这一概念在浏览器环境中的移植,本文最后也会通过一个小的demo来进一步讲述socket和websocket在使用上的区别。

WebSocket的通信原理和机制

既然是基于浏览器端的web技术,那么它的通信肯定少不了http,websocket本身虽然也是一种新的应用层协议,但是它也不能够脱离http而单独存在。具体来讲,我们在客户端构建一个websocket实例,并且为它绑定一个需要连接到的服务器地址,当客户端连接服务端的时候,会向服务端发送一个类似下面的http报文:即时通讯聊天软件app开发可以加蔚可云的v:weikeyun24咨询

 

可以看到,这是一个http get请求报文,注意该报文中有一个upgrade首部,它的作用是告诉服务端需要将通信协议切换到websocket,如果服务端支持websocket协议,那么它就会将自己的通信协议切换到websocket,同时发给客户端类似于以下的一个响应报文头:

返回的状态码为101,表示同意客户端协议转换请求,并将它转换为websocket协议。以上过程都是利用http通信完成的,称之为websocket协议握手(websocket Protocol handshake),进过这握手之后,客户端和服务端就建立了websocket连接,以后的通信走的都是websocket协议了。所以总结为websocket握手需要借助于http协议,建立连接后通信过程使用websocket协议。同时需要了解的是,该websocket连接还是基于我们刚才发起http连接的那个TCP连接。一旦建立连接之后,我们就可以进行数据传输了,websocket提供两种数据传输:文本数据和二进制数据。

基于以上分析,我们可以看到,websocket能够提供低延迟,高性能的客户端与服务端的双向数据通信。它颠覆了之前web开发的请求处理响应模式,并且提供了一种真正意义上的客户端请求,服务器推送数据的模式,特别适合实时数据交互应用开发。

WebSocket技术出现之前,Web端实现即时通讯的方法有哪些?

定期轮询的方式

客户端按照某个时间间隔不断地向服务端发送请求,请求服务端的最新数据然后更新客户端显示。这种方式实际上浪费了大量流量并且对服务端造成了很大压力。

SSE(Server-Sent Event,服务端推送事件)

SSE(Server-Sent Event,服务端推送事件)是一种允许服务端向客户端推送新数据的HTML5技术。与由客户端每隔几秒从服务端轮询拉取新数据相比,这是一种更优的解决方案。

相较于WebSocket,它也能从服务端向客户端推送数据。WebSocket能做的,SSE也能做,反之亦然,但在完成某些任务方面,它们各有千秋。关于SSE的介绍,即时通讯网将在稍后的文章中详细介绍。

Comet技术

Comet并不是一种新的通信技术,它是在客户端请求服务端这个模式上的一种hack技术,通常来讲,它主要分为以下两种做法:

(1)基于长轮询的服务端推送技术
具体来讲,就是客户端首先给服务端发送一个请求,服务端收到该请求之后如果数据没有更新则并不立即返回,服务端阻塞请求的返回,直到数据发生了更新或者发生了连接超时,服务端返回数据之后客户端再次发送同样的请求,

(2)基于流式数据传输的长连接
通常的做法是在页面中嵌入一个隐藏的iframe,然后让这个iframe的src属性指向我们请求的一个服务端地址,并且为了数据更新,我们将页面上数据更新操作封装为一个js函数,将函数名当做参数传递到这个地址当中。

服务端收到请求后解析地址取出参数(客户端js函数调用名),每当有数据更新的时候,返回对客户端函数的调用,并且将要更新的数据以js函数的参数填入到返回内容当中,例如返回“<script type="text/javascript">update("data")</script>”这样一个字符串,意味着以data为参数调用客户端update函数进行客户端view更新。

当然并不是说这些技术没有用,就算websocket已经作为规范被提出并实现,但是对于老式浏览器,我们依然需要将它降级为以上方式来实现实时交互和服务端数据推送。

即时通讯开发之websocket与socket的关系

对于很多初次接触Web端即时通讯技术的人来说,WebSocket是个很新的概念,但无疑它也是当前Web端即时通讯技术中最热门的关键词。随便点开一篇文章,只要说打算开发Web端即时通讯类应用,老司机们无一例外推荐... 查看详情

im即时通讯开发之websocket断网重连更快的方法

在一个完善的即时通讯IM应用中,WebSocket是极其关键的一环,它为基于Web的即时通讯应用提供了一种全双工的通信机制。但为了提升IM等实际应用场景下的消息即时性和可靠性,我们需要克服WebSocket及其底层依赖的TCP... 查看详情

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

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

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

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

即时通讯开发如何撸一个websocket服务器

如果你想要写一个WebSocket服务器,首先需要读懂对应的网络协议RFC6455,不过这对于一般人来说有些“晦涩”,英文且不说,还得咬文嚼字理解网络编程含义。好在WebSocket技术出现比较早,所以早就有人翻译了... 查看详情

即时通讯(文字,图片,视频)包括坐席调度排队系统初步理解

  最近公司跟腾讯合作,要搞一个视频呼叫服务,业务场景是这样的:客户通过小程序或者H5发起视频呼叫,坐席端接入进行视频通话。原本最初接到该需求的时候,有想法自己搞一个视频呼叫服务,后来经过调研发现,想搞... 查看详情

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

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

即时通讯开发长连接网关技术:websocket实时推送网关技术

丛所周之,HTTP协议是一种无状态、基于TCP的请求/响应模式的协议,即请求只能由客户端发起、由服务端进行响应。在大多数场景,这种请求/响应的Pull模式可以满足需求。但在某些情形:例如消息推送(IM中... 查看详情

即时通讯开发之在websocket基础上实现hybrid移动端消息推送

...的移动操作系统(Android、iOS)的webview都已经支持WebSocket,所以对于Hybrid移动应用,WebSocket也将成为消息推送的备用选择。 何为Hybrid移动应用? 查看详情

即时通讯安全:跨站点websocket劫持漏洞

WebSocket作为HTML5的新特性之一格外吸引着开发人员的注意,因为它的出现使得客户端(主要指浏览器)提供对Socket的支持成为可能,从而在客户端和服务器之间提供了一个基于单TCP连接的双向通道。对于实时性要... 查看详情

即时通讯开发如何在websocket基础上实现hybrid移动应用的消息推送

...的移动操作系统(Android、iOS)的webview都已经支持WebSocket,所以对于Hybrid移动应用,WebSocket也将成为消息推送的备用选择。 何为Hybrid移动应用? 查看详情

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

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

javassm后台框架平台项目源码websocket即时通讯imquartzspri

博文来源:http://www.fhadmin.org/webnewsdetail2.htmlA代码编辑器,在线模版编辑,仿开发工具编辑器,pdf在线预览,文件转换编码B集成代码生成器[正反双向](单表、主表、明细表、树形表,快速开发利器)+快速表单构建器freemaker模版技... 查看详情

android使用websocket实现即时通讯功能,聊天功能

...不愿意花这份钱),那就得自己做了,所以我们需要使用WebSocket。一.Android实现即时通讯功能1.引入WebSock依赖2.创建一个java类并继承WebSocketClient其中onOpen()方法在websocket连接开启时调用,onMessage()方法在接收到消息时调用,onClose()... 查看详情

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

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

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

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

javassm框架代码生成器websocket即时通讯shiroredis后台框架源码

博文来源:http://www.fhadmin.org/webnewsdetail2.htmlA代码编辑器,在线模版编辑,仿开发工具编辑器,pdf在线预览,文件转换编码B集成代码生成器[正反双向](单表、主表、明细表、树形表,快速开发利器)+快速表单构建器freemaker模版技... 查看详情

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

为什么说Web即时通讯技术这么重要?我们生活在一个实时(real-time)的世界中,因此Web的最终最自然的状态也应当是实时的。用户需要实时的沟通、数据和搜索。我们对互联网信息实时性的要求也越来越高,... 查看详情