菜单

HTML5的Websocket(理论篇 I)

2019年2月9日 - 金沙前端

WebSocket 构造函数

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

金沙国际,JavaScript

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

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

WebSocket 构造函数

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

JavaScript

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

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

.md#websocket-api)Websocket API:

此间是指客户端 API。

.md#websocket%E6%98%AF%E4%BB%80%E4%B9%88)Websocket是什么:

RFC中写到:WebSocket协议使在支配环境下运行不受信任代码的客户端和可以选择与那一个代码通信的长距离主机之间可以双向通讯。

对,划重点:双向通讯

Websocket在连接之后,客户端可以积极发送音讯给服务器,服务器也足以再接再厉向客户端推送音信。比如:预定车票音信,除了大家发请求询问车票怎么样,当然更期待借使有新音信,能够一向布告我们。

其特点:

(1)握手阶段选择 HTTP 协议,默许端口是80和443

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

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

(5)没有同源限制,客户端可以与自由服务器通讯

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

概括的话,Websocket商讨分成两部分:握手和数量传输。

金沙国际 1

WebSocket 属性

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
    }
}
JavaScript

ws.onopen = function () { setInterval( function() {
//缓存未满的时候发送 if (ws.bufferedAmount < 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-5b8f447934b7a325701025-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f447934b7a325701025-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f447934b7a325701025-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f447934b7a325701025-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f447934b7a325701025-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f447934b7a325701025-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f447934b7a325701025-7">
7
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f447934b7a325701025-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-5b8f447934b7a325701025-1" class="crayon-line">
ws.onopen = function () {
</div>
<div id="crayon-5b8f447934b7a325701025-2" class="crayon-line crayon-striped-line">
    setInterval( function() {
</div>
<div id="crayon-5b8f447934b7a325701025-3" class="crayon-line">
        //缓存未满的时候发送
</div>
<div id="crayon-5b8f447934b7a325701025-4" class="crayon-line crayon-striped-line">
        if (ws.bufferedAmount &lt; 1024 * 5) {
</div>
<div id="crayon-5b8f447934b7a325701025-5" class="crayon-line">
            ws.send(data);
</div>
<div id="crayon-5b8f447934b7a325701025-6" class="crayon-line crayon-striped-line">
        }
</div>
<div id="crayon-5b8f447934b7a325701025-7" class="crayon-line">
    }, 2000);
</div>
<div id="crayon-5b8f447934b7a325701025-8" class="crayon-line crayon-striped-line">
};
</div>
</div></td>
</tr>
</tbody>
</table>

接下去,大家说说握手阶段进程。

当大家创制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: 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请求例外的是,增添了一部分头新闻。

服务器响应:

当服务器再次回到以下内容,就象征已经接受客户端请求啦,能够建立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=

金沙国际 2

迄今甘休,客户端和服务器握手成功建立了Websocket连接,通讯不再选用http数据帧,而选用Websocket独立的数据帧。


上述是Websocket探究的基础理论篇I, 欢迎小伙伴儿们陆续(理论篇II,
实战篇神马的), 一起念书共同积累


1 赞 4 收藏
评论

金沙国际 3

原稿出处:
走走前端   

HTML5的Websocket(理论篇 I)

** 先请来TA的邻居:**

http:无状态、基于tcp恳请/响应情势的应用层共谋
(A:哎哎,上次您请我吃饭了么? B:我寻思,
上次请你吃了么) tcp:面向连接、保障高可靠性(数据无遗失、数据无失序、数据无不当、数据无重复到达) 传输层合计。(看呀,大阅兵,如此规整有秩序)

HTML5的Websocket(理论篇 I)

** 先请来TA的邻居:**

http:无状态、基于tcp伸手/响应形式的应用层协商
(A:哎哎,上次您请自己吃饭了么? B:我构思,
上次请您吃了么) tcp:面向连接、有限支撑高可相信性(数据无遗失、数据无失序、数据无不当、数据无重复到达) 传输层协和。(看呀,大阅兵,如此规整有秩序)

Websocket是什么:

RFC中写到:WebSocket协议使在决定环境下运作不受信任代码的客户端和力所能及选择与那一个代码通讯的远距离主机之间可以双向通讯。

对,划重点:双向通讯

Websocket在延续之后,客户端可以主动发送信息给服务器,服务器也可以百尺竿头更进一步向客户端推送新闻。比如:预约车票音信,除了大家发请求询问车票怎样,当然更期待假设有新新闻,可以从来通告我们。

其特点:

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

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

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

(5)没有同源限制,客户端可以与自由服务器通讯

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

简简单单的话,Websocket合计分成两有的:握手和数码传输。

金沙国际 4

WebSocket 属性

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
    }
}
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>

接下去,大家说说握手阶段进程。

当我们创立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: 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请求例外的是,扩大了部分头音讯。

服务器响应:

当服务器重临以下内容,就象征早已接受客户端请求啦,可以建立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=

金沙国际 5

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


如上是Websocket共商的基础理论篇I, 欢迎小伙伴儿们交叉(理论篇II,
实战篇神马的), 一起学学共同积累


1 赞 3 收藏
评论

.md#websocket%E6%98%AF%E4%BB%80%E4%B9%88)Websocket是什么:

RFC中写到:WebSocket协议使在决定环境下运作不受信任代码的客户端和力所能及拔取与那个代码通讯的中远距离主机之间可以双向通讯。

对,划重点:双向通讯

Websocket在接二连三之后,客户端可以主动发送信息给服务器,服务器也可以主动向客户端推送音信。比如:预定车票音讯,除了大家发请求询问车票怎么着,当然更期望倘诺有新音讯,可以直接布告大家。

其特点:

(1)握手阶段选择 HTTP 协议,默许端口是80和443

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

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

(5)没有同源限制,客户端可以与人身自由服务器通讯

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

概括的话,Websocket商量分成两有些:握手和数目传输。

金沙国际 6

.md#websocket-api)Websocket API:

此处是指客户端 API。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图