HTML5的Websocket(理论篇【10bet】 I)

来源:http://www.chinese-glasses.com 作者:Web前端 人气:83 发布时间:2020-03-24
摘要:时间: 2019-11-10阅读: 95标签:websocket本文首发于政采云前端团队博客:WebSocket 原理浅析与实现简单聊天 原文出处: 转转前端     随着 Web 的发展,用户对于 Web 的实时推送要求也越来越

时间: 2019-11-10阅读: 95标签: websocket本文首发于政采云前端团队博客:WebSocket 原理浅析与实现简单聊天

原文出处: 转转前端   

随着 Web 的发展,用户对于 Web 的实时推送要求也越来越高,在 WebSocket 出现之前,大多数情况下是通过客户端发起轮询来拿到服务端实时更新的数据,因为 HTTP1.x 协议有一个缺陷就是通信只能由客户端发起,服务端没法主动给客户端推送。这种方式在对实时性要求比较高的场景下,比如即时通讯、即时报价等,显然会十分低效,体验也不好。为了解决这个问题,便出现了 WebSocket 协议,实现了客户端和服务端双向通信的能力。介绍 WebSocket 之前,还是让我们先了解下轮询实现推送的方式。

先请来TA的邻居:

http:无状态、基于tcp请求/响应模式的应用层协议 (A:哎呀,上次你请我吃饭了么? B:我想想, 上次请你吃了么)
tcp:面向连接、保证高可靠性(数据无丢失、数据无失序、数据无错误、数据无重复到达) 传输层协议。(看啊,大阅兵,如此规整有秩序)

为什么要引入Websocket:

RFC开篇介绍:本协议的目的是为了解决基于浏览器的程序需要拉取资源时必须发起多个HTTP请求和长时间的轮询的问题。

短轮询(Polling)

long poll(长轮询): 客户端发送一个request后,服务器拿到这个连接,如果有消息,才返回response给客户端。没有消息,就一直不返回response。之后客户端再次发送request, 重复上次的动作。

10bet,短轮询的实现思路就是浏览器端每隔几秒钟向服务器端发送 HTTP 请求,服务端在收到请求后,不论是否有数据更新,都直接进行响应。在服务端响应完成,就会关闭这个 TCP 连接,代码实现也最简单,就是利用 XHR, 通过 setInterval 定时向后端发送请求,以获取最新的数据。

10bet 1

setInterval(function() { fetch(url).then((res) = { // success code })}, 3000);

从上可以看出,http协议的特点是服务器不能主动联系客户端,只能由客户端发起。它的被动性预示了在完成双向通信时需要不停的连接或连接一直打开,这就需要服务器快速的处理速度或高并发的能力,是非常消耗资源的。

优点:实现简单。

这个时候,Websocket出现了。

缺点:会造成数据在一小段时间内不同步和大量无效的请求,安全性差、浪费资源。

Websocket是什么:

RFC中写到:WebSocket协议使在控制环境下运行不受信任代码的客户端和能够选择与那些代码通信的远程主机之间能够双向通信。

对,划重点:双向通信

Websocket在连接之后,客户端可以主动发送消息给服务器,服务器也可以主动向客户端推送消息。比如:预订车票信息,除了我们发请求询问车票如何,当然更希望如果有新消息,可以直接通知我们。

其特点:

(1)握手阶段采用 HTTP 协议,默认端口是80和443

(2)建立在TCP协议基础之上,和http协议同属于应用层

(4)可以发送文本,也可以发送二进制数据

(5)没有同源限制,客户端可以与任意服务器通信

(6)协议标识符是ws(如果加密,为wss),如ws://localhost:8023

简单来说,Websocket协议分为两部分:握手和数据传输。

10bet 2

长轮询(Long-Polling)

Websocket API:

这里是指客户端 API。

客户端发送请求后服务器端不会立即返回数据,服务器端会阻塞请求连接不会立即断开,直到服务器端有数据更新或者是连接超时才返回,客户端才再次发出请求新建连接、如此反复从而获取最新数据。大致效果如下:

WebSocket 构造函数

通过调用WebSocket构造函数来创建一个WebSocket实例对象,建立客户端与服务器的连接。

JavaScript

const ws = new WebSocket('ws://localhost:8023');

1
const ws = new WebSocket('ws://localhost:8023');

客户端代码如下:

Websocket事件

WebSocket 是纯事件驱动,通过监听事件可以处理到来的数据和改变的连接状态。服务端发送数据后,消息和事件会异步到达。

  • open:
    服务端响应WebSocket连接请求,就会触发open事件。onopen是响应的回调函数。
JavaScript

// 连接请求open事件处理: ws.onopen = e => {
console.log('Connection success'); ws.send(`Hello ${e}`); };

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5a72977999e26474564720-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5a72977999e26474564720-2">
2
</div>
<div class="crayon-num" data-line="crayon-5a72977999e26474564720-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5a72977999e26474564720-4">
4
</div>
<div class="crayon-num" data-line="crayon-5a72977999e26474564720-5">
5
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5a72977999e26474564720-1" class="crayon-line">
 // 连接请求open事件处理:
</div>
<div id="crayon-5a72977999e26474564720-2" class="crayon-line crayon-striped-line">
     ws.onopen = e =&gt; {
</div>
<div id="crayon-5a72977999e26474564720-3" class="crayon-line">
         console.log('Connection success');
</div>
<div id="crayon-5a72977999e26474564720-4" class="crayon-line crayon-striped-line">
         ws.send(`Hello ${e}`);
</div>
<div id="crayon-5a72977999e26474564720-5" class="crayon-line">
     };
</div>
</div></td>
</tr>
</tbody>
</table>

如果要指定多个回调函数,可以使用addEventListener方法。

JavaScript

ws.addEventListener('open', e => { ws.send(`Hello ${e}`); });

1
2
3
ws.addEventListener('open', e => {
  ws.send(`Hello ${e}`);
});

当open事件触发时,意味着握手阶段已结束。服务端已经处理了连接的请求,可以准备收发数据。

  • Message:收到服务器数据,会触发消息事件,onmessage是响应的回调函数。如下:
JavaScript

// 接受文本消息的事件处理: ws.onmessage = e =&gt; { const data =
e.data; if (typeof data === "string") { console.log("Received string
message ",data); } else if (data instanceof Blob) {
console.log("Received blob message ", data); } };

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5a72977999e30543698552-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5a72977999e30543698552-2">
2
</div>
<div class="crayon-num" data-line="crayon-5a72977999e30543698552-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5a72977999e30543698552-4">
4
</div>
<div class="crayon-num" data-line="crayon-5a72977999e30543698552-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5a72977999e30543698552-6">
6
</div>
<div class="crayon-num" data-line="crayon-5a72977999e30543698552-7">
7
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5a72977999e30543698552-8">
8
</div>
<div class="crayon-num" data-line="crayon-5a72977999e30543698552-9">
9
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5a72977999e30543698552-1" class="crayon-line">
// 接受文本消息的事件处理:
</div>
<div id="crayon-5a72977999e30543698552-2" class="crayon-line crayon-striped-line">
ws.onmessage = e =&gt; {
</div>
<div id="crayon-5a72977999e30543698552-3" class="crayon-line">
    const data = e.data;
</div>
<div id="crayon-5a72977999e30543698552-4" class="crayon-line crayon-striped-line">
    if (typeof data === &quot;string&quot;) {
</div>
<div id="crayon-5a72977999e30543698552-5" class="crayon-line">
        console.log(&quot;Received string message &quot;,data);
</div>
<div id="crayon-5a72977999e30543698552-6" class="crayon-line crayon-striped-line">
    } else if (data instanceof Blob) {
</div>
<div id="crayon-5a72977999e30543698552-7" class="crayon-line">
        console.log(&quot;Received blob message &quot;, data);
</div>
<div id="crayon-5a72977999e30543698552-8" class="crayon-line crayon-striped-line">
    }
</div>
<div id="crayon-5a72977999e30543698552-9" class="crayon-line">
};
</div>
</div></td>
</tr>
</tbody>
</table>

服务器数据可能是文本,也可能是二进制数据,有Blob和ArrayBuffer两种类型,在读取到数据之前需要决定好数据的类型。

  • Error发生错误会触发error事件, onerror是响应的回调函数, 会导致连接关闭。
JavaScript

//异常处理 ws.onerror = e =&gt; { console.log("WebSocket Error: " ,
e); handleErrors(e); };

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5a72977999e34725915317-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5a72977999e34725915317-2">
2
</div>
<div class="crayon-num" data-line="crayon-5a72977999e34725915317-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5a72977999e34725915317-4">
4
</div>
<div class="crayon-num" data-line="crayon-5a72977999e34725915317-5">
5
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5a72977999e34725915317-1" class="crayon-line">
//异常处理
</div>
<div id="crayon-5a72977999e34725915317-2" class="crayon-line crayon-striped-line">
ws.onerror = e =&gt; {
</div>
<div id="crayon-5a72977999e34725915317-3" class="crayon-line">
    console.log(&quot;WebSocket Error: &quot; , e);
</div>
<div id="crayon-5a72977999e34725915317-4" class="crayon-line crayon-striped-line">
    handleErrors(e);
</div>
<div id="crayon-5a72977999e34725915317-5" class="crayon-line">
};
</div>
</div></td>
</tr>
</tbody>
</table>
  • Close当连接关闭时触发close事件,对应onclose方法,连接关闭之后,服务端和客户端就不能再通信。

WebSocket 规范中定义了ping 帧 和pong 帧,可以用来做心跳重连,网络状态查询等,但是目前 浏览器只会自动发送pong帧,而不会发ping 帧。(有兴趣可详查ping和pong帧)

JavaScript

//关闭连接处理 ws.onclose = e => { const code = e.code; const reason = e.reason; console.log("Connection close", code, reason); };

1
2
3
4
5
6
//关闭连接处理
ws.onclose = e => {
    const code = e.code;
    const reason = e.reason;
    console.log("Connection close", code, reason);
};
function async() { fetch(url).then((res) = { async(); // success code }).catch(() = { // 超时 async(); })}

WebSocket 方法:

WebSocket 对象有两个方法:send 和 close

  • send:客户端和服务器建立连接后,可以调用send方法去发送消息。
JavaScript

//发送一个文本消息 ws.send("this is websocket");

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5a72977999e3b847111158-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5a72977999e3b847111158-2">
2
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5a72977999e3b847111158-1" class="crayon-line">
//发送一个文本消息
</div>
<div id="crayon-5a72977999e3b847111158-2" class="crayon-line crayon-striped-line">
ws.send(&quot;this is websocket&quot;);
</div>
</div></td>
</tr>
</tbody>
</table>

在open事件的回调中调用send()方法传送数据:

JavaScript

const ws = new WebSocket('ws://localhost:8023'); ws.onopen = e => { console.log('Connection success'); ws.send(`Hello ${e}`); };

1
2
3
4
5
const ws = new WebSocket('ws://localhost:8023');
ws.onopen = e => {
    console.log('Connection success');
    ws.send(`Hello ${e}`);
};

如果想通过响应其他事件发送消息,可通过判断当前的Websocket的readyState属性。接下来会说到readyState.

  • closeclose方法用来关闭连接。调用close方法后,将不能发送数据。close方法可以传入两个可选的参数,code 和reason, 以告诉服务端为什么终止连接。
JavaScript

ws.close(); //1000是状态码,代表正常结束。 ws.close(1000, "Closing
normally");

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5a72977999e42958089470-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5a72977999e42958089470-2">
2
</div>
<div class="crayon-num" data-line="crayon-5a72977999e42958089470-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5a72977999e42958089470-4">
4
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5a72977999e42958089470-1" class="crayon-line">
ws.close();
</div>
<div id="crayon-5a72977999e42958089470-2" class="crayon-line crayon-striped-line">
 
</div>
<div id="crayon-5a72977999e42958089470-3" class="crayon-line">
//1000是状态码,代表正常结束。
</div>
<div id="crayon-5a72977999e42958089470-4" class="crayon-line crayon-striped-line">
ws.close(1000, &quot;Closing normally&quot;);
</div>
</div></td>
</tr>
</tbody>
</table>

优点:比 Polling 做了优化,有较好的时效性。

WebSocket 属性

  • readyState:

readyState值表示连接状态,是只读属性。它有以下四个值:

WebSocket.CONNECTING :连接正在进行,但还没有建立
WebSocket.OPEN :连接已经建立,可以发送消息
WebSocket.CLOSING :连接正在进行关闭握手
WebSocket.CLOSED :连接已经关闭或不能打开

除了在open事件回调中调用send方法,可通过判断readyState值来发送消息。

JavaScript

function bindEventHandler(data) { if (ws.readyState === WebSocket.OPEN) { ws.send(data); } else { //do something } }

1
2
3
4
5
6
7
function bindEventHandler(data) {
    if (ws.readyState === WebSocket.OPEN) {
        ws.send(data);
    } else {
        //do something
    }
}
  • bufferedAmount:当客户端传输大量数据时,浏览器会缓存将要流出的数据,bufferedAmount属性可判断有多少字节的二进制数据没有发送出去,发送是否结束。
JavaScript

ws.onopen = function () { setInterval( function() {
//缓存未满的时候发送 if (ws.bufferedAmount &lt; 1024 * 5) {
ws.send(data); } }, 2000); };

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5a72977999e48105878083-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5a72977999e48105878083-2">
2
</div>
<div class="crayon-num" data-line="crayon-5a72977999e48105878083-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5a72977999e48105878083-4">
4
</div>
<div class="crayon-num" data-line="crayon-5a72977999e48105878083-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5a72977999e48105878083-6">
6
</div>
<div class="crayon-num" data-line="crayon-5a72977999e48105878083-7">
7
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5a72977999e48105878083-8">
8
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5a72977999e48105878083-1" class="crayon-line">
ws.onopen = function () {
</div>
<div id="crayon-5a72977999e48105878083-2" class="crayon-line crayon-striped-line">
    setInterval( function() {
</div>
<div id="crayon-5a72977999e48105878083-3" class="crayon-line">
        //缓存未满的时候发送
</div>
<div id="crayon-5a72977999e48105878083-4" class="crayon-line crayon-striped-line">
        if (ws.bufferedAmount &lt; 1024 * 5) {
</div>
<div id="crayon-5a72977999e48105878083-5" class="crayon-line">
            ws.send(data);
</div>
<div id="crayon-5a72977999e48105878083-6" class="crayon-line crayon-striped-line">
        }
</div>
<div id="crayon-5a72977999e48105878083-7" class="crayon-line">
    }, 2000);
</div>
<div id="crayon-5a72977999e48105878083-8" class="crayon-line crayon-striped-line">
};
</div>
</div></td>
</tr>
</tbody>
</table>
  • protocol:protocol代表客户端使用的WebSocket协议。当握手协议未成功,这个属性是空。

接下来,我们说说握手阶段过程。

当我们创建Websocket实例对象与服务器建立连接时,

JavaScript

const ws = new WebSocket('ws://localhost:8023');

1
const ws = new WebSocket('ws://localhost:8023');

首先客户端向服务器发起一个握手请求,其请求报文的内容如下:

JavaScript

GET /game HTTP/1.1 Host: 10.242.17.102:8023 Cache-Control: no-cache Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ== Sec-WebSocket-Protocol: game Sec-WebSocket-Version: 10 Origin: http://192.168.185.16 Accept-Encoding: gzip, deflate, sdch Accept-Language: zh-CN,zh;q=0.8

1
2
3
4
5
6
7
8
9
10
11
GET /game HTTP/1.1
Host: 10.242.17.102:8023
Cache-Control: no-cache
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Sec-WebSocket-Protocol: game
Sec-WebSocket-Version: 10
Origin: http://192.168.185.16
Accept-Encoding: gzip, deflate, sdch
Accept-Language: zh-CN,zh;q=0.8

从请求头中可以看出,其实是一个基于http的握手请求。与通常的http请求不同的是,增加了一些头信息。

  • Upgrade字段:
    通知服务器,现在要使用一个升级版协议 – Websocket。
  • Sec-WebSocket-Key:
    是一个Base64编码的值,这个是浏览器随机生成,通知服务器,需要验证下是否可以进行Websocket通信
  • Sec_WebSocket-Protocol: 是用户自定义的字符串,用来标识服务所需要的协议
  • Sec-WebSocket-Version: 通知服务器所使用的协议版本

服务器响应:

当服务器返回以下内容,就表示已经接受客户端请求啦,可以建立Websocket通信啦。

JavaScript

HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: SIEylb7zRYJAEgiqJXaOW3V+ZWQ=

1
2
3
4
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: SIEylb7zRYJAEgiqJXaOW3V+ZWQ=
  • 101 状态码,表示要转换协议啦
  • Upgrde:
    通知客户端将要升级成Websocket协议
  • Sec-WebSocket-Accept:
    经过服务器确认,并且加密过后的 Sec-WebSocket-Key。用来证明客户端和服务器之间能进行通信了。

10bet 3

至此,客户端和服务器握手成功建立了Websocket连接,通信不再使用http数据帧,而采用Websocket独立的数据帧。


以上是Websocket协议的基础理论篇I, 欢迎小伙伴儿们接力(理论篇II, 实战篇神马的), 一起学习一起积累


1 赞 3 收藏 评论

缺点:保持连接挂起会消耗资源,服务器没有返回有效数据,程序超时。

WebSocket

前面提到的短轮询(Polling)和长轮询(Long-Polling), 都是先由客户端发起 Ajax 请求,才能进行通信,走的是 HTTP 协议,服务器端无法主动向客户端推送信息。

当出现类似体育赛事、聊天室、实时位置之类的场景时,轮询就显得十分低效和浪费资源,因为要不断发送请求,连接服务器。WebSocket 的出现,让服务器端可以主动向客户端发送信息,使得浏览器具备了实时双向通信的能力。

没用过 WebSocket 的人,可能会以为它是个什么高深的技术。其实不然,WebSocket 常用的 API 不多也很容易掌握,不过在介绍如何使用之前,让我们先看看它的通信原理。

通信原理

当客户端要和服务端建立 WebSocket 连接时,在客户端和服务器的握手过程中,客户端首先会向服务端发送一个 HTTP 请求,包含一个 Upgrade 请求头来告知服务端客户端想要建立一个 WebSocket 连接。

在客户端建立一个 WebSocket 连接非常简单:

letws =newWebSocket('ws://localhost:9000');

类似于 HTTP 和 HTTPS,ws 相对应的也有 wss 用以建立安全连接,本地已 ws 为例。这时的请求头如下:

Accept-Encoding: gzip, deflate, brAccept-Language: zh-CN,zh;q=0.9Cache-Control: no-cacheConnection: Upgrade // 表示该连接要升级协议Cookie: _hjMinimizedPolls=358479; ts_uid=7852621249; CNZZDATA1259303436=1218855313-1548914234-%7C1564625892; csrfToken=DPb4RhmGQfPCZnYzUCCOOade; JSESSIONID=67376239124B4355F75F1FC87C059F8D; _hjid=3f7157b6-1aa0-4d5c-ab9a-45eab1e6941e; acw_tc=76b20ff415689655672128006e178b964c640d5a7952f7cb3c18ddf0064264Host: localhost:9000Origin:  no-cacheSec-WebSocket-Extensions: permessage-deflate; client_max_window_bitsSec-WebSocket-Key: 5fTJ1LTuh3RKjSJxydyifQ== // 与响应头 Sec-WebSocket-Accept 相对应Sec-WebSocket-Version: 13 // 表示 websocket 协议的版本Upgrade: websocket // 表示要升级到 websocket 协议User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36

响应头如下:

本文由10bet发布于Web前端,转载请注明出处:HTML5的Websocket(理论篇【10bet】 I)

关键词:

最火资讯