2020-04-03

## webSocket初探

## 目录

- 为什么WebSocket

- 什么是WebSocket

- WebSocket JS Client

- WebSocket Node Server

## 一、为什么WebSocket

1、在WebSocket之前我们如何解决服务端向浏览器推送消息的需求?

![websocket](https://note.youdao.com/yws/api/personal/file/WEBf253aa1afe8b5cf993844253e539e85c?method=download&shareKey=94b0e9cc5afef83c076db6d8c112f5c9)

2、http协议的弊端,和浏览器的限制;

http协议 服务端只能够做到被动的等待客户端的请求,然后做返回;

前端页面收到浏览器的限制并不能够直接在browser和server之间通过tcp的形式建立全双工的连接。

因为要想实现,服务端推送数据,只能够近似的使用browser高频率请求server,来完成近似的推送;

3、Websocket应运而生

那在browser和server之间能不能有一条一次连接,多次使用的全双工通道,便于browser和server之间的数据交换呢?

## 二、什么是WebSocket

###  全双工通信

![websocket](https://note.youdao.com/yws/api/personal/file/WEB6697371b1a585300b3483edef64076c3?method=download&shareKey=4a87cc80d46432369ad617367d29752b)

1、半双工数据传输允许数据在两个方向上传输,但是,在某一时刻,只允许数据在一个方向上传输,它实际上是一种切换方向的单工通信;在同一时间只可以有一方接受或发送信息,可以实现双向通信。举例:对讲机。

2、全双工数据通信允许数据同时在两个方向上传输,因此,全双工通信是两个单工通信方式的结合,它要求发送设备和接收设备都有独立的接收和发送能力;在同一时间可以同时接受和发送信息,实现双向通信,举例:电话通信。

### 关于http通信模式的解释

![websocket](https://note.youdao.com/yws/api/personal/file/WEB6e262bc83e846e5b61a10c798fc2782b?method=download&shareKey=69ba32ee50bbeb171d5f6b9f20cafd22)

### 和HTTP的关系

![websocket](https://note.youdao.com/yws/api/personal/file/WEB85b53c72d70a7a08023dd346fe8e83e6?method=download&shareKey=cd6b92fd595089b577d2a061dd9438bf)

websocket和Http协议是相互独立的、都是在 TCP 上的应用层协议。 但是借用了Http 1.1 协议的101状态码进行握手。

### 通信过程 

![websocket](https://note.youdao.com/yws/api/personal/file/WEB22e590db4f5467e18f5c5f7f70b43d1b?method=download&shareKey=6effc37612da096ccf5ae9a5772e31cc)

1、

HTTP通信流程

TCP三次握手

传送HTTP请求头

传送HTTP请求体

服务器处理后响应头

服务器处理后响应体

断开TCP连接

2、WebSocket通信流程

TCP三次握手

WebSocket握手

浏览器发送请求

服务器发送响应

断开TCP连接

总结:其实可以看得出,WebSocket比HTTP还要多一次握手,但是在频繁交互过程中,WebSocket的优势就表现出来了。

例如,当有10次数据交互时,前者要建立10个TCP连接(HTTP 1.0需要建立10次,HTTP 1.1可以通过长连接keep-alive复用TCP连接),然后要发送10次请求头(包含Cookie等信息,可能会达到K级别),接收的响应信息可能才几个字节(如某些心跳包),这样会极大的浪费带宽等资源。

### 协议头的详解

- Connection: Upgrade, Upgrade:websocket

明确发起的类型是webSocket协议

- Sec-WebSocket-Version:告诉服务器所使用的 Websocket Draft

- Sec-WebSocket-Key: 32pdAhmqFrFZik/MP7fU8A==

握手的认证串,服务端需要将此key进行一定处理后返回,再由浏览器验证有效性,必须符合算法结果才可正常建立连接

## 三、WebSocket JS Client

1、创建WebSocket实例

new WebSocket('ws://127.0.0.1:3000')

![websocket](https://note.youdao.com/yws/api/personal/file/WEB3a44fa8b620adc9335e268d54a0440a2?method=download&shareKey=98dd70e3126fb7fe9d12417e2435dab2)

readyState值如下:

- 正在建立连接, WebSocket.OPENING

- 已经建立连接, WebSocket.OPEN

- 正在关闭连接, WebSocket.CLOSING

- 已经关闭连接, WebSocket.CLOSE

握手协议成功以后,readyState就从0变为1,并触发open事件,这时就可以向服务器发送信息了

2、收发数据

- 发送数据

connection.send("hello, wolrd")

![websocket](https://note.youdao.com/yws/api/personal/file/WEBb1f92cdf4f8c658274666d49cd8cad5c?method=download&shareKey=2705442abb378b64bb4771ffc34aa1bd)

- 接受数据

通过onmessage函数进行回调

![websocket](https://note.youdao.com/yws/api/personal/file/WEB48cfaa5b0ff6379b2147cf82db6e29ca?method=download&shareKey=e2b3825a805ede9d91af621e0cb5b9cb)

3、错误处理

通过onerror函数进行回调

4、关闭事件

通过onclose函数进行回调

## 四、WebSocket Node Server

1、创建WebSocket Server

![websocket](https://note.youdao.com/yws/api/personal/file/WEBc9aa35e709e05ec82a7e634057e94938?method=download&shareKey=eb47caf92d67c84a02716c5f602ef0cb)

2、收发数据

![websocket](https://note.youdao.com/yws/api/personal/file/WEBf6007d0a92e611e1e5c75cc27658a92a?method=download&shareKey=957c9fa94f0329bd3cce386ce2b741ce)

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,098评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,213评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,960评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,519评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,512评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,533评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,914评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,574评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,804评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,563评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,644评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,350评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,933评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,908评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,146评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,847评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,361评论 2 342

推荐阅读更多精彩内容