前言

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

一.短轮询（Polling）

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

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

优点：实现简单。
缺点：会造成数据在一小段时间内不同步和大量无效的请求，安全性差、浪费资源。

二.长轮询（Long-Polling）

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

客户端代码如下：

function async() {fetch(url).then((res) => {async();// success code}).catch(() => {// 超时async();})
}

优点：比 Polling 做了优化，有较好的时效性。
缺点：保持连接挂起会消耗资源，服务器没有返回有效数据，程序超时。

三.WebSocket

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

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

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

》通信原理

WebSocket 协议本质上是一个基于 TCP 的协议。当客户端要和服务端建立 WebSocket 连接时，在客户端和服务器的握手过程中，客户端首先会向服务端发送一个 HTTP 请求，包含一个 Upgrade 请求头来告知服务端客户端想要建立一个 WebSocket 连接。

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

let ws = new WebSocket('ws://localhost:9000');

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

Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9
Cache-Control: no-cache
Connection: Upgrade // 表示该连接要升级协议
Cookie: _hjMinimizedPolls=358479; ts_uid=7852621249; CNZZDATA1259303436=1218855313-1548914234-%7C1564625892; csrfToken=DPb4RhmGQfPCZnYzUCCOOade; JSESSIONID=67376239124B4355F75F1FC87C059F8D; _hjid=3f7157b6-1aa0-4d5c-ab9a-45eab1e6941e; acw_tc=76b20ff415689655672128006e178b964c640d5a7952f7cb3c18ddf0064264
Host: localhost:9000
Origin: http://localhost:9000
Pragma: no-cache
Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits
Sec-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

响应头如下：

Connection: Upgrade
Sec-WebSocket-Accept: ZUip34t+bCjhkvxxwhmdEOyx9hE=
Upgrade: websocket

此时响应行（General）中可以看到状态码 status code 是 101 Switching Protocols ，表示该连接已经从 HTTP 协议转换为 WebSocket 通信协议。转换成功之后，该连接并没有中断，而是建立了一个全双工通信，后续发送和接收消息都会走这个连接通道。

注意，请求头中有个 Sec-WebSocket-Key 字段，和相应头中的 Sec-WebSocket-Accept 是配套对应的，它的作用是提供了基本的防护，比如恶意的连接或者无效的连接。Sec-WebSocket-Key 是客户端随机生成的一个 base64 编码，服务器会使用这个编码，并根据一个固定的算法：

GUID = "258EAFA5-E914-47DA-95CA-C5AB0DC85B11";    //  一个固定的字符串
accept = base64(sha1(key + GUID));    // key 就是 Sec-WebSocket-Key 值，accept 就是 Sec-WebSocket-Accept 值

其中 GUID 字符串是 RFC6455 官方定义的一个固定字符串，不得修改。

客户端拿到服务端响应的 Sec-WebSocket-Accept 后，会拿自己之前生成的 Sec-WebSocket-Key 用相同算法算一次，如果匹配，则握手成功。然后判断 HTTP Response 状态码是否为 101（切换协议），如果是，则建立连接，大功告成。

》属性

属性	描述
Socket.readyState	只读属性 readyState 表示连接状态，可以是以下值： 0 - 表示连接尚未建立。 1 - 表示连接已建立，可以进行通信。 2 - 表示连接正在进行关闭。 3 - 表示连接已经关闭或者连接不能打开。
Socket.bufferedAmount	只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。

属性

描述

Socket.readyState

只读属性 readyState 表示连接状态，可以是以下值：

0 - 表示连接尚未建立。
1 - 表示连接已建立，可以进行通信。
2 - 表示连接正在进行关闭。
3 - 表示连接已经关闭或者连接不能打开。

Socket.bufferedAmount

只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。

》事件

事件	事件处理程序	描述
open	Socket.onopen	连接建立时触发
message	Socket.onmessage	客户端接收服务端数据时触发
error	Socket.onerror	通信发生错误时触发
close	Socket.onclose	连接关闭时触发

》方法

方法	描述
Socket.send()	使用连接发送数据
Socket.close()	关闭连接

四.websocket与socket的区别

软件通信有七层结构，下三层结构偏向与数据通信，上三层更偏向于数据处理，中间的传输层则是连接上三层与下三层之间的桥梁，每一层都做不同的工作，上层协议依赖与下层协议。基于这个通信结构的概念。

Socket 其实并不是一个协议，是应用层与 TCP/IP 协议族通信的中间软件抽象层，它是一组接口。当两台主机通信时，让 Socket 去组织数据，以符合指定的协议。TCP 连接则更依靠于底层的 IP 协议，IP 协议的连接则依赖于链路层等更低层次。

WebSocket 则是一个典型的应用层协议。

总的来说：Socket 是传输控制层协议，WebSocket 是应用层协议。

【websocket】 websocket 详解相关推荐

webSocket（与http请求区别、请求和返回示例、替代方法：ajax轮询、long poll、Flash、NodeJS实现WebSocket通信代码、原理、WebSocket构造函数详解）
目录简介优点请求示例请求成功返回示例替代方法 Ajax 轮询 long poll Flash NodeJS实现webSocket(ws模块) 服务端代码客户端代码在线网页客户端运行结果 ...
WebSocket协议详解及应用
标签:websocket WebSocket协议详解及应用(七)-WebSocket协议关闭帧本篇介绍WebSocket协议的关闭帧,包括客户端及服务器如何发送并处理关闭帧.关闭帧错误码及错误处理方 ...
Spring和WebSocket整合详解
Spring和WebSocket整合详解本篇编写日期较早,代码冗余较多,新博文:Spring和WebSocket整合并建立简单的Web聊天室官方主页 Spring WebSocket 概述 Web ...
Node.js websocket/ws 详解
前言众所周知,HTTP协议是一种无状态.无连接.单向的应用层协议,只能由客户端发起请求,服务端响应请求. 这就显示了一个明显的弊端:服务端无法主动向客户端发起消息,一旦客户端需要知道服务端的频繁状态 ...
websocket java详解_WebSocket详解
WebSocket详解 WebSocket可提供一个在单一TCP连接全双工双向通信协议.全双工意味着客户端和服务器可以独立发送信息给对方.双向意味着客户端可以向服务器发送信息, 反之亦然. Web ...
计算机网络：WebSocket协议详解
1. 概述一直以来,网络在很大程度上都是围绕着HTTP的请求/响应模式而构建的.所有的HTTP通信都是由客户端控制的,这就需要用户进行互动或者定期轮询,以便从服务器加载数据.长期以来存在着各种技术让 ...
php websocket应用实例,php使用websocket示例详解
下面我画了一个图演示 client 和 server 之间建立 websocket 连接时握手部分,这个部分在 node 中可以十分轻松的完成,因为 node 提供的 net 模块已经对 socket ...
php使用websocket示例详解
一.php 中处理 websocket WebSocket 连接是由客户端主动发起的,所以一切要从客户端出发.第一步是要解析拿到客户端发过来的 Sec-WebSocket-Key 字符串. 复制代码代 ...
websocket网络层详解_【技术分享】WebSocket漏洞与防护详解
2017-05-02 14:15:48 阅读:1889次预估稿费:120RMB 投稿方式:发送邮件至linwei#360.cn,或登陆网页版在线投稿 socket简介一个socket是一次网络通信 ...
BeetleX实现MessagePack和Protobuf消息控制器调用websocket服务详解
最近有用户问如何使用BeetleX封装一个基于Protobuf格式的websocket服务并支持控制器调用:其实BeetleX.FastHttpApi是支持Websocket服务和自定义数据格式的,但 ...

【websocket】 websocket 详解

前言