盒子
盒子
文章目录
  1. 背景
    1. 无连接
    2. 无状态
  2. 什么是AJAX轮询?
  3. 这样会引发什么问题?
  4. Comet
    1. 基于AJAX long-polling与传统的 AJAX 应用不同之处:
    2. 基于 Iframe 及 htmlfile 的流(streaming)
  5. 什么是WebSocket?
    1. 优势
    2. 举个栗子
      1. 浏览器请求
      2. 服务器响应
      3. 原理

通过Swoole理解Websocket

背景

HTTP特点:

无连接

限制每次连接只处理一个请求。服务器处理完客户的请求,并收到客户的应答后,即断开连接。采用这种方式可以节省传输时间。

无状态

无状态是指协议对于事务处理没有记忆能力,服务器不知道客户端是什么状态。即我们给服务器发送 HTTP 请求之后,服务器根据请求,会给我们发送数据过来,但是,发送完,不会记录任何信息。

现在,很多网站为了实现服务器推技术,通常的解决办法是使用客户端(浏览器)做AJAX轮询

什么是AJAX轮询?

浏览器每间隔一定时间向服务器发送AJAX请求,询问是否有新的数据,如果有,则返回给客户端。一般像下面的代码这样(JQuery描述)

1
2
3
4
5
6
7
8
9
10
11
12
var link={          //AJAX执行的配置对象
type:"GET",       //设置请求方式,默认为GET,
async:true,       //设置是否异步,默认为异步
url:"getNewData.php", //请求的链接
dataType:"json",    //设置数据的返回格式
success:function (msg){
   //在这里处理返回的数据
  setTimeout("link()",300);//每隔0.3s建立一次新的请求
}//成功时的回调函数
}

$.ajax(link);          //执行ajax请求。

这样会引发什么问题?

浏览器需要不断的向服务器发出请求,然而HTTP request的header是非常长的,里面包含的数据可能只是一个很小的值,这样会占用很多的带宽和服务器资源。

Comet

比较新的技术去做轮询的效果是Comet,Comet有两种常用的方式

  1. 基于AJAX long-polling
  2. 基于 Iframe 及 htmlfile 的流(streaming)

基于AJAX long-polling与传统的 AJAX 应用不同之处:

  1. 服务器端会阻塞请求直到有数据传递或超时才返回。
  2. 客户端 JavaScript响应处理函数会在处理完服务器返回的信息后,再次发出请求,重新建立连接。
  3. 当客户端处理接收的数据、重新建立连接时,服务器端可能有新的数据到达;这些信息会被服务器端保存直到客户端重新建立连接,客户端会一次把当前服务器端所有的信息取回。

基于 Iframe 及 htmlfile 的流(streaming)

iframe 是很早就存在的一种 HTML 标记, 通过在 HTML 页面里嵌入一个隐蔵帧,然后将这个隐蔵帧的 SRC 属性设为对一个长连接的请求,服务器端就能源源不断地往客户端输入数据。

尽管Comet这种技术可达到双向通信,但依然需要发出请求,而且在Comet中,普遍采用了长链接,这也会大量消耗服务器带宽和资源。

面对这种状况,HTML5定义了WebSocket协议,能更好的节省服务器资源和带宽并达到实时通讯。

什么是WebSocket?

一种在单个 TCP 连接上进行全双工通讯的协议。

WebSocket 是独立的、创建在 TCP 上的协议,和 HTTP 的唯一关联是使用 HTTP 协议的101状态码进行协议切换,使用的 TCP 端口是80,可以用于绕过大多数防火墙的限制。
WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端直接向客户端推送数据而不需要客户端进行请求,在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并允许数据进行双向传送。

优势

服务器与客户端之间交换的数据包档头很小,大概只有2字节。(早期版本7.0)

举个栗子

今天使用swoole写了基于Websocket的聊天室,正好用来作为例子

浏览器请求

服务器响应

原理

在请求中的“Sec-WebSocket-Key”是随机的,服务器端会用这些数据来构造出一个SHA-1的信息摘要。
把“Sec-WebSocket-Key”加上一个魔幻字符串“258EAFA5-E914-47DA-95CA-C5AB0DC85B11”。使用SHA-1加密,之后进行BASE-64编码,将结果做为“Sec-WebSocket-Accept”头的值,返回给客户端。

请我喝一杯咖啡
扫一扫,支持funsoul
  • 微信扫一扫