为了账号安全,请及时绑定邮箱和手机立即绑定

浅谈websocket的点点滴滴

一、前言

websocket是HTML5规范中的一部分,为web应用程序客户端和服务端之间提供了一种全双工通信机制(即双方可同时向对方发送消息),由于websocket借鉴了socket这种思想,因此我们先一起来看看什么是socket。

二、Socket简介

socket又称为“套接字”,应用程序一般通过“套接字”向网络发出请求或者应答网络请求,作为Unix的进程通信机制,socket可以实现应用程序间的网络通信,同时也能够使用TCP/IP协议或者UDP协议。
image

三、TCP/IP协议

这两种协议是目前应用最为广泛的协议,是构成Internet国际互联网协议最为基础的协议,下面来简单看看这两种协议。

  • 1、TCP协议:面向连接的、可靠的、基于字节流的传输层通信协议,负责数据的可靠性传输问题。
  • 2、IP协议:用于报文交换网络的一种面向数据的协议,主要负责给每台网络设备一个网络地址,保证数据传输到正确的目的地。
四、UDP协议

它是一种无连接、不可靠、基于报文的传输层协议,优点是发送后不用管,速度比TCP块。

五、WebSocket简介

产生背景: 在B/S结构的软件项目中,有时候客户端需要实时的获得服务器消息,但是为了可以简化Web服务器,减少服务器的负担,加快响应速度(因为服务器不需要与客户端长时间建立一个通信链接),默认HTTP协议只支持请求响应模式,因此不容易直接完成实时的消息推送功能,如聊天室、后台信息提示、实时更新数据等功能,于是就出现了websocket这门技术。

再简介一次: websocket是HTML5开始提供的一种浏览器与服务器间进行的全双工通讯网路技术。依靠这种技术可以实现客户端和服务器端的长连接,双向实时通信。唯一有些不足的是少部分浏览器不支持,并且有些浏览器支持的程度与方式有区别。

特点: 事件驱动、异步、使用ws或者wss协议的客户端socket、能够实现真正意义上的推送功能。

六、WebSocket客户端

websocket允许通过JavaScript建立与远程服务器的连接,从而实现客户端与服务器间的双向通信。在websocket中有两个方法:

  • 1、send():向远程服务器发送数据;
  • 2、close():关闭该websocket链接。

websocket同时定义了四个监听函数:

  • 1、onopen当网络连接建立时触发该事件;
  • 2、当网络发生错误时触发该事件;
  • 3、onclose当websocket被关闭时触发该事件;
  • 4、onmessage当websocket接收到服务器发来消息时触发的事件,也是通信中最重要的一个监听事件。

websocket还定义了一个readyState属性,这个属性可以返回websocket所处的状态:

  • 1、CONNECTING(0):websocket正尝试与服务器建立连接;
  • 2、OPEN(1):websocket与服务器已经建立连接;
  • 3、CLOSING(2):websocket正在关闭与服务器的连接;
  • 4、CLOSED(3):websocket已经关闭了与服务器的连接;

注意:
websocket的url开头是ws,如果需要ssl加密可以使用wss,当我们调用websocket的构造方法构建一个websocket对象(new WebSocket(url))的之后,就可以进行即时通信了。点击查看源代码

七、WebSocket的通信原理和机制

既然是基于浏览器的web技术,那么它的通信肯定少不了HTTP,websocket本身虽然也是一种新的应用层协议,但是它也不能够脱离HTTP而单独存在。

具体来说,我们在客户端构建一个websocket实例,并且为它绑定一个需要连接到的服务器地址,当客户端连接到服务端的时候会向服务端发送一个类似下面的HTTP报文:
image
可以看到,这是一个HTTP的get请求报文,注意该报文中有一个upgrade首部,它的作用是告诉服务端需要将通信协议切换到websocket。如果服务端支持websocket协议,那么它就会将自己的通信协议切换到websocket,同时发给客户端类似于以下的一个响应报文头:
image
返回的状态码为101,表示同意客户端协议转换请求,并将它转换为websocket协议。以上过程都是利用HTTP通信完成的,称之为websocket协议握手。

经过这握手之后,客户端和服务端就建立了websocket连接,以后的通信走的都是websocket协议了。所以总结为:websocket握手需要借助于HTTP协议,建立连接后通信过程使用websocket协议。

同时需要了解的是,该websocket连接还是基于我们刚才发起HTTP连接的那个TCP连接,一旦建立连接之后,我们就可以进行数据传输了。在websocket中,提供两种数据传输:文本数据和二进制数据。

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

八、在websocket之前,我们在web上要得到实时数据交互都采用了哪些方式?

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

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

(3)基于流式数据传输的长连接:
通常的做法是在页面中嵌入一个隐藏的iframe,然后让这个iframe的src属性指向我们请求的一个服务端地址,并且为了数据更新,我们将页面上数据更新操作封装为一个js函数,将函数名当做参数传递到这个地址当中,服务端收到请求后解析地址取出参数(客户端js函数调用名),每当有数据更新的时候,返回对客户端函数的调用,并且将要跟新的数据以js函数的参数填入到返回内容当中。

尾声

好了,关于今天的技术总结就到这里,下期再见。

点击查看更多内容
5人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
114
获赞与收藏
415

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消