文档章节

WebSocket详解(三):深入WebSocket通信协议细节

Idea
 Idea
发布于 2017/05/03 11:35
字数 1222
阅读 41
收藏 0

传统“长轮询”实现Web端即时通讯的问题


WebSocket出现之前,Web端为了实现即时通讯,所用的技术都是Ajax轮询(polling)。轮询是在特定的的时间间隔(如每1秒),由浏览器对服务器发出HTTP request,然后由服务器返回最新的数据给客服端的浏览器。这种传统的HTTP request 的模式带来很明显的缺点 – 浏览器需要不断的向服务器发出请求,然而HTTP request 的header是非常长的,里面包含的数据可能只是一个很小的值,这样会占用很多的带宽。

而比较新的技术去做轮询的效果是Comet(是一种被hack出来的基于http长连接的“服务器推”技术,看看这篇文章可以对Comet技术有个直观的了解:《开源Comet服务器iComet:支持百万并发的Web端即时通讯方案》)。但这种技术虽然可达到全双工通信,依然需要发出请求。

WebSocket 技术概览


在 WebSocket API,浏览器和服务器只需要要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送,改变了原有的B/S模式。

WebSocket技术应用的典型架构:
WebSocket详解(三):深入WebSocket通信协议细节_1.png 

WebSocket的技术原理:
WebSocket详解(三):深入WebSocket通信协议细节_2.png 

浏览器端的websocket 发起的请求一般是:

01

02

03

04

05

06

07

08

09

10

11

// javacsript

  var ws = new WebSocket("ws://127.0.0.1:4000");

  ws.onopen = function(){

    console.log("succeed");

  };

  ws.onerror = function(){

    console.log(“error”);

  };

  ws.onmessage = function(e){

  console.log(e);

  }


当 new 一个 websocket 对象之后,就会向服务器发送一个 get 请求:
WebSocket详解(三):深入WebSocket通信协议细节_3.png 

这个请求是对摸个服务器的端口发送的,一般的话,会预先在服务器将一个socket 绑定到一个端口上,客户端和服务器端在这个预定的端口上通信(我这里绑定的就是 4000 端口,默认情况下,websocke 使用 80 端口)。

然后,在服务器端的socket监听到这个packet 之后就生成一个新的 socket,将发送过来的数据中的 Sec-WebSocket-Key 解析出来,然后按照把“Sec-WebSocket-Ke”加上一个魔幻字符串“258EAFA5-E914-47DA-95CA-C5AB0DC85B11”。使用SHA-1加密,之后进行BASE-64编码,将结果做为“Sec-WebSocket-Accept”头的值,返回给客户端。

客户端收到这个之后,就会将 通信协议 upgrade 到 websocket 协议:
WebSocket详解(三):深入WebSocket通信协议细节_4.png 

然后就会在这个持久的通道下进行通信,包括浏览器的询问,服务器的push,双方是在一个全双工的状态下相互通信。

WebSocket 通信协议


如上述的例子:切换后的websocket 协议中的 数据传输帧的格式(此时不再使用html协议) 官方文档给出的说明:
WebSocket详解(三):深入WebSocket通信协议细节_QQ20160525-0.png 

直接看这个,谁都会有点头大: 我花了一幅图来简单的解释这个 frame 的结构:
WebSocket详解(三):深入WebSocket通信协议细节_5.png 

各字段的解释:

1

2

3

4

5

6

7

FIN              1bit 表示信息的最后一帧,flag,也就是标记符

RSV 1-3        1bit each 以后备用的 默认都为 0

Opcode         4bit 帧类型,

Mask              1bit 掩码,是否加密数据,默认必须置为1

Payload len   7bit 数据的长度,当这个7 bit的数据 == 126 时,后面的2 个字节也是表示数     据长度,当它 == 127 时,后面的 8 个字节表示数据长度

Masking-key      1 or 4 bit 掩码

Payload data  playload len  bytes 数据


所以我们这里的代码,通过判断 Playload len的值,来用 substr 截取 Masking-key 和 PlayloadData。

根据掩码解析数据的方法是:

1

2

3

for( i = 0; i < data.length ; i++){

   orginalData += data[i]  ^  maskingKey[i mod 4];

}


在PHP中,当我们收到数据之后,按照这里的格式截取数据,并将其按照这里的方法解析后就得到了浏览器发送过来的数据。 当我们想把数据发送给浏览器时,也要按照这个格式组装frame。 这里是我的方法:

01

02

03

04

05

06

07

08

09

10

11

function frame($s){

                  $a = str_split($s, 125);

                  if (count($a) == 1){

                          return "\x81" . chr(strlen($a[0])) . $a[0];

                  }

                  $ns = "";

                  foreach ($a as $o){

                          $ns .= "\x81" . chr(strlen($o)) . $o;

                  }

                  return $ns;

          }


强行将要发送的数据分割成 125 Byte / frame,这样 playload len 只需要 7 bits。也就是直接将数据的长度的ascall码拼接上去,然后后面跟上要发送的数据。 每一个 frame 前面加的 ‘\x81’ 用二进制就是: 1000 0001 1000 :

1

2

1 是 FIN

000 是三个备用的bit


0001 指的是 opcode 官方的解释:
WebSocket详解(三):深入WebSocket通信协议细节_QQ20160525-1.png 
可以设置 opcode的值,来告诉浏览器这个frame的数据属性。

本文转载自:http://www.52im.net/forum.php?mod=viewthread&tid=332&ctid=15

Idea
粉丝 16
博文 113
码字总数 75839
作品 0
青岛
CTO(技术副总裁)
私信 提问
八问WebSocket协议:为你快速解答WebSocket热门疑问

本文由“小姐姐养的狗”原创发布于“小姐姐味道”公众号,原题《WebSocket协议 8 问》,收录时有优化和改动。感谢原作者的分享。 一、引言 WebSocket是一种比较新的协议,它是伴随着html5规范...

JackJiang2011
04/25
0
0
八问WebSocket协议:为你快速解答WebSocket热门疑问

一、引言 WebSocket是一种比较新的协议,它是伴随着html5规范而生的,虽然还比较年轻,但大多主流浏览器都已经支持。它使用方面、应用广泛,已经渗透到前后端开发的各种场景中。 对http一问一...

首席大胸器
04/25
0
0
(websocket)协议中Ping Pong,长连接

- websocket协议,长连接;Http短连接 WebSocket如何建立连接、交换数据的细节,以及数据帧的格式。 WebSocket复用了HTTP的握手通道。具体指的是,客户端通过HTTP请求与WebSocket服务端协商升...

desaco
2018/12/25
0
0
Web端即时通讯技术盘点:短轮询、Comet、Websocket、SSE

1. 前言 Web端即时通讯技术因受限于浏览器的设计限制,一直以来实现起来并不容易,主流的Web端即时通讯方案大致有4种:传统Ajax短轮询、Comet技术、WebSocket技术、SSE(Server-sent Events)...

JackJiang-
2016/07/14
1K
4
WebSocket协议详解及应用

https://blog.csdn.net/u014520745/article/details/52639452 WebSocket协议详解及应用(一)-初识WebSocket 一、什么是WebSocket WebSocket是一个允许Web应用程序(通常指浏览器)与服务器进行双...

徐风来
2018/10/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

group by分组后获得每组中时间最大的那条记录

用途: GROUP BY 语句用于 对一个或多个列对结果集进行分组。 例子: 原表: 现在,我们希望根据USER_ID 字段进行分组,那么,可使用 GROUP BY 语句。 我们使用下列 SQL 语句: SELECT ID,US...

豆花饭烧土豆
50分钟前
1
0
android6.0源码分析之Camera API2.0下的Preview(预览)流程分析

本文将基于android6.0的源码,对Camera API2.0下Camera的preview的流程进行分析。在文章android6.0源码分析之Camera API2.0下的初始化流程分析中,已经对Camera2内置应用的Open即初始化流程进...

天王盖地虎626
今天
4
0
java 序列化和反序列化

1. 概述 序列恢复为Java对象的过程。 对象的序列化主要有两 首先我们介绍下序列化和反序列化的概念: 序列化:把Java对象转换为字节序列的过程。 反序列化:把字节序列恢复为Java对象的过程。...

edison_kwok
今天
2
0
分布式数据一致性

狼王黄师傅
今天
2
0
经验

相信每位开发者在自己开发的过程中,都会反思一些问题,比如怎样提高编程能力、如何保持心态不砍产品经理、996 之后怎样恢复精力……最近开发者 Tomasz Łakomy 将他 7 年的开发生涯中学习到...

WinkJie
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部