websockt原理

WebSocket原理及技术简介

Siwind原创

WebSocket用于在Web浏览器和服务器之间进行任意的双向数据传输的一种技术。WebSocket协议基于TCP协议实现&＃xff0c;包含初始的握手过程&＃xff0c;以及后续的多次数据帧双向传输过程。其目的是在WebSocket应用和WebSocket服务器进行频繁双向通信时&＃xff0c;可以使服务器避免打开多个HTTP连接进行工作来节约资源&＃xff0c;提高了工作效率和资源利用率。

1. 引言

互联网发展的早期&＃xff0c;网站上只是一些静态展示页面。用户请求(Request)网站页面&＃xff0c;网站回复(Response)页面内容给用户浏览器。因为需求简单&＃xff0c;所以也没有很复杂的协议过程。这种形式的Request/Response交互流程如下图所示&＃xff1a;

图 11 Request/Response

    随着互联网技术的发展&＃xff0c;带宽逐步提高&＃xff0c;用户数也越来越庞大。对互联网的呈现内容提出了要求&＃xff0c;随之出现了动态页面技术&＃xff0c;对同一个页面&＃xff0c;页面的某些部分对不同的访问用户&＃xff0c;呈现的内容不同。相关的实现技术有CGI、ASP、PHP、JSP等。由于访问量的增加&＃xff0c;WEB服务器同时处理的用户数也达到了万(10K)以上级别&＃xff0c;这就是C10K问题&＃xff1a;"The C10K problem"[1]。为了缓解服务器压力&＃xff0c;每次Request/Response后连接(TCP连接)继续保持&＃xff0c;以及对同一个TCP连接&＃xff0c;多次复用Request/Response的方法(也称为Pipeline)也提了出来。这就是HTTP/1.1协议中长连接的主要内容。

    伴随移动互联网的发展&＃xff0c;大量移动终端和其上的APP应用接入网络&＃xff0c;HTML5技术也提了出来&＃xff0c;以便支持WEB上的音视频播放、实时游戏、实时聊天等。催生了这样一个需求&＃xff0c;当服务器有更新时&＃xff0c;需要立即将数据发送给客户端&＃xff0c;这就是基于服务器端的推送技术。

    WEBSOCKET之前的解决方法大概这么几种&＃xff1a; 1)轮询&＃xff1a;客户端设置一个时间间隔&＃xff0c;时间到以后&＃xff0c;向服务器发送request询问有无新数据&＃xff0c;服务器立即返回response&＃xff0c;如果有更新则携带更新的数据。2)长连接(long poll): 和轮询相似&＃xff0c;但是为阻塞模式的轮询&＃xff0c;客户端请求新的数据request, 服务器会阻塞请求&＃xff0c;直到有新数据后才返回response给客户端&＃xff1b;然后客户端再重复此过程。这两种方式的特点&＃xff0c;不断的建立HTTP连接&＃xff0c;然后发送请求request&＃xff0c;之后服务器等待处理。服务端体现的是一种被动性&＃xff0c;同时这种处理方式&＃xff0c;非常耗费网络带宽和服务器资源。

    服务器向客户端推送更新时&＃xff0c;因为被动性&＃xff0c;对低延迟的应用体验不好&＃xff1b;因为request/response的交互方式&＃xff0c;对网络带宽和服务器带来了额外的负担&＃xff08;例如多次请求的HTTP头部&＃xff0c; TCP连接复用会导致的Head-of-Line Blocking线头阻塞[2]等&＃xff09;。如果在单一的TCP连接中&＃xff0c;使用双向通信&＃xff08;全双工通信&＃xff09;就能很好的解决此问题。这就是WebSocket技术的缘由。

2. WebSocket技术及协议

WebSocket技术的优点有&＃xff1a;1&＃xff09;通过第一次HTTP Request建立了连接之后&＃xff0c;后续的数据交换都不用再重新发送HTTP Request&＃xff0c;节省了带宽资源&＃xff1b; 2) WebSocket的连接是双向通信的连接&＃xff0c;在同一个TCP连接上&＃xff0c;既可以发送&＃xff0c;也可以接收; 3)具有多路复用的功能(multiplexing)&＃xff0c;也即几个不同的URI可以复用同一个WebSocket连接。这些特点非常类似TCP连接&＃xff0c;但是因为它借用了HTTP协议的一些概念&＃xff0c;所以被称为了WebSocket。

2.1 WebSocket API

WebSocket API[3], 也称为WebSocket接口(Interface)&＃xff0c;定义了Web应用和服务器进行双向通信的公共接口。 如下图所示&＃xff1a;

图 21 WebSocket API

接口的内容可以分为三类&＃xff1a;状态变量、网络功能和消息处理等。

1. 构造函数WebSocket(url, protocols)&＃xff1a;构造WebSocket对象&＃xff0c;以及建立和服务器连接; protocols可选字段&＃xff0c;代表选择的子协议

2. 状态变量readyState: 代表当前连接的状态&＃xff0c;短整型数据&＃xff0c;取值为CONNECTING(值为0)&＃xff0c; OPEN(值为1), CLOSING(值为2), CLOSED(值为3)

3. 方法变量close(code, reason)&＃xff1a; 关闭此WebSocket连接。

4. 状态变量bufferedAmount: send函数调用后&＃xff0c;被缓存并且未发送到网络上的数据长度

5. 方法变量send(data): 将数据data通过此WebSocket发送到对端

6. 回调函数onopen/onmessage/onerror/onclose: 当相应的事件发生时会触发此回调函数

 2.1.1 示例

客户端使用例子(Javascript)&＃xff1a;

1. var websocket &＃61; new WebSocket("ws://www.host.com/path");

2. websocket.onopen &＃61; function(evt) { onOpen(evt) };

3. websocket.onclose &＃61; function(evt) { onClose(evt) };

4. websocket.onmessage &＃61; function(evt) { onMessage(evt) };

5. websocket.onerror &＃61; function(evt) { onError(evt) }; }

6. function onMessage(evt) { alert( evt.data); }

7. function onError(evt) { alert( evt.data); }

8. websocket.send("client to server");

 2.2 WebSocket协议

WebSocket看成是一种类似TCP/IP的socket技术&＃xff1b;此socket在Web应用中实现&＃xff0c;并获得了和TCP/IP通信一样灵活方便的全双向通信功能。

WebSocket协议由RFC 6455定义。协议分为两个部分&＃xff1a; 握手阶段和数据通信阶段。

WebSocket为应用层协议&＃xff0c;其定义在TCP/IP协议栈之上。WebSocket连接服务器的URI以"ws"或者"wss"开头。ws开头的默认TCP端口为80&＃xff0c;wss开头的默认端口为443。

 2.2.1 握手阶段

客户端和服务器建立TCP连接之后&＃xff0c;客户端发送握手请求&＃xff0c;随后服务器发送握手响应即完成握手阶段。如下图所示&＃xff1a;

图 22 Handshake

• 客户端握手请求类似如下&＃xff1a;

• 服务器的握手响应类似如下&＃xff1a;

需要关闭连接时&＃xff0c;任意一方直接发送类型为关闭帧(Close frame)的控制帧数据给对方即可。

 2.2.2 数据通信

WebSocket的数据在发送时&＃xff0c;被组织为依次序的一串数据帧(data frame)&＃xff0c;然后进行传送。

传送的帧类型分为两类&＃xff1a;数据帧(data frame)和控制帧(Control frame)。数据帧可以携带文本数据或者二进制数据&＃xff1b;控制帧包含关闭帧(Close frame)和Ping/Pong帧。

帧的格式如下所示&＃xff1a;

其中最重要的字段为opcode(4bit)和MASK(1bit)&＃xff1a;

• MASK值&＃xff0c;从客户端进行发送的帧必须置此位为1&＃xff0c;从服务器发送的帧必须置为0。如果任何一方收到的帧不符合此要求&＃xff0c;则发送关闭帧(Close frame)关闭连接。

• opcode的值&＃xff1a; 0x1代表此帧为文本数据帧, 0x2代表此帧为二进制数据帧, 0x8为控制帧中的连接关闭帧(close frame), 0x9为控制帧中的Ping帧, 0xA(十进制的10)为控制帧中的Pong帧。

• Ping/Pong帧&＃xff1a; Ping帧和Pong帧用于连接的保活(keepalive)或者诊断对端是否在线。这两种帧的发送和接收不对WEB应用公开接口&＃xff0c;由实现WebSocket协议的底层应用(例如浏览器)来实现它。

 2.2.3 连接关闭

任何一端发送关闭帧给对方&＃xff0c;即可关闭连接。关闭连接时通常都带有关闭连接的状态码(status code)。常见状态码的含义如下&＃xff1a;

• 1000 连接正常关闭

• 1001 端点离线&＃xff0c;例如服务器down&＃xff0c;或者浏览器已经离开此页面

• 1002 端点因为协议错误而中断连接

• 1003 端点因为受到不能接受的数据类型而中断连接

• 1004 保留

• 1005 保留, 用于提示应用未收到连接关闭的状态码

• 1006 端点异常关闭

• 1007 端点收到的数据帧类型不一致而导致连接关闭

• 1008 数据违例而关闭连接

• 1009 收到的消息数据太大而关闭连接

• 1010 客户端因为服务器未协商扩展而关闭

• 1011 服务器因为遭遇异常而关闭连接

• 1015 TLS握手失败关闭连接

4.  结论

WebSocket和传统的HTTP交互方式的区别如下图&＃xff1a;

图 41交互方式比较

为了兼容低版本浏览器可以使用轮询和长连接等

Socket的结论如下&＃xff1a;

• 基于TCP/IP协议实现

• 是一种全双向的通信, 具有底层socket的特点

• 节约带宽&＃xff0c;节省服务器资源

• 是HTML5的技术之一&＃xff0c;具有巨大的应用前景