HTML5技术

浅谈Websocket、Ajax轮询和长连接(long pull) - flyrui316

字号+ 作者:H5之家 来源:H5之家 2015-11-20 19:52 我要评论( )

最近看到了一些介绍Websocket的文章,觉得挺有用,所以在这里将自己的对其三者的理解记录一下。 1.什么是Websocket Websocket是HTML5中提出的新的协议,注意,这里是协议,可以实现客户端与服务器端的通信,实现服务器的推送功能。 2.Websocket和HTTP协议是

  最近看到了一些介绍Websocket的文章,觉得挺有用,所以在这里将自己的对其三者的理解记录一下。

1.什么是Websocket

  Websocket是HTML5中提出的新的协议,注意,这里是协议,可以实现客户端与服务器端的通信,实现服务器的推送功能。

2.Websocket和HTTP协议是什么关系

  简单来说,Websocket和HTTP有关系,但是关系不大,它们的关系类似于数学中的交集,如下图(借用的Ovear的图)。Websocket借用了HTTP协议来完成一部分握手过程。

  

3.Websocket的握手过程

  当客户端要建立Websocket连接时,其向服务器发送:

GET /chat HTTP/1.1

Host: xxx.com

Upgrade: websocket

Connection: Upgrade

Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==

Sec-WebSocket-Protocol: chat, superchat

Sec-WebSocket-Version: 13

Origin:

  其中,Upgrade: websocket和Connection: Upgrade告诉服务器,我要建立的是websocket连接;Sec-WebSocket-Key部分服务器加密后还要返回浏览器,确保建立的是websocket连接;Sec-WebSocket-Version: 13是websocket的版本号。

当服务器接收到上述包后,会返回一下内容:

HTTP/1.1 101 Switching Protocols

Upgrade: websocket

Connection: Upgrade

Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=

Sec-WebSocket-Protocol: chat

  它告诉客户端,我已经切换到websocket协议了,Sec-WebSocket-Accept就是Sec-WebSocket-Key加密后的内容,这样,一个websocket连接就建立了。

4.Websocket怎么工作的

      客户端:我要建立websocket连接

      服务器端:好的,已经切换到websocket协议,websocket连接已经建立

        客户端:有什么消息要及时告诉(推送)我

        服务器端:好的

        服务器端:xxxxxx

        服务器端:yyyyyyy

       。。。。。

  其优点就是,只要建立一次连接,就可以连续不断的得到服务器推送的消息,节省带宽和服务器端的压力。

5.Ajax轮询怎么实现的

  其实,这个大多数小伙伴都知道了,ajax轮询模拟长连接就是每个一段时间(0.5s)就向服务器发起ajax请求,查询服务器端是否有数据更新

      客户端:有没有新消息

      服务器端:没有。。

      客户端:有没有新消息

      服务器端:有,xxxxx

      客户端:有没有新消息

      服务器端:没有。。

      客户端:有没有新消息

      服务器端:没有。。

      。。。。。。

  其缺点显而易见,每次都要建立HTTP连接,即使需要传输的数据非常少,所以这样很浪费带宽;同时,这个过程是被动性的,即不是服务器主动推送的。

6.长连接(long pull)

      客户端:有没有新信息(Request)
      服务端:没有,

      (时间一直的流逝。。。,当等待到有消息的时候)

      服务器端:给你xxxx(Response)

      客户端:有没有新消息(Request)

      。。。。。

  其缺点也是显而易见的,同ajax轮询一样,也是每次都要建立HTTP连接,也都是被动的。而且这种方法对服务器的并行要求比较大,因为在没有消息的时候,连接照样保持,而这时需要其它信息是又要建立新的连接(就连接保持中)。

7.参考:

  a.百度
  b.

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 车大棒浅谈jQuery源码(二) - 车大棒

    车大棒浅谈jQuery源码(二) - 车大棒

    2017-04-02 10:07

  • 车大棒浅谈jQuery源码(一) - 车大棒

    车大棒浅谈jQuery源码(一) - 车大棒

    2017-03-27 09:00

  • FormData+Ajax 实现多文件上传 学习使用FormData对象 - 天青色的西瓜莹

    FormData+Ajax 实现多文件上传 学习使用FormData对象 - 天青色的西瓜

    2017-03-08 18:01

  • 车大棒浅谈for循环+canvas实现黑客帝国矩形阵 - 车大棒

    车大棒浅谈for循环+canvas实现黑客帝国矩形阵 - 车大棒

    2017-01-18 15:01

网友点评
>