HTML5之WebSocket（转自知乎）

在认识websocket以前，咱们必须了解的是websocket有什么用？ 他能解决咱们遇到的什么问题？ 若是没用，那么咱们就么有使用它的必要的。 

　　websocket就是创建起全双工协议的，提升了效率，节省了时间。  

 

   　什么是WebSocket？ WebSocket一种在单个 TCP链接上进行全双工通信的协议。即WebSocket是一个协议。 websocket是基于TCP协议的。

　　比较通俗的理解，咱们能够点击这里。

　　推荐文章：

　　 https://zhuanlan.zhihu.com/p/23467317 （强烈推荐 --- 这篇文章详尽介绍了websocket的原理以及长轮询、短轮、commet， 经过铺垫告诉咱们为何要使用 websocket。对于基本概念的理解能够看这一篇文章 ）

 

　　http://www.alloyteam.com/2015/04/qian-duan-qiang-hou-duan-fan-wan-node-js-socket-io-zhi-zuo-jian-yi-liao-tian-shi/ （推荐： 这篇文章是腾讯前端团队的成员所写，只是其中的例子都已经不能用了，可是这篇文章的思路仍是很是清晰的，而且分享了本身在作项目中遇到的一些坑。）

 

　　http://www.cnblogs.com/Wayou/p/hichat_built_with_nodejs_socket.html （这是讲解文章，很是好。能够参考学习。）

　　https://github.com/wayou/HiChat/blob/master/www/scripts/hichat.js （这是是github的源代码）

　　https://hichat.herokuapp.com/ （这个网站是聊天室在PC端的具体实现 。）

 　  https://www.websocket.org/index.html#  websocket官网

　　https://socket.io/demos/chat/ (socket.io提供了聊天室demo) 相关https://socket.io/get-started/chat/教程： 

 

第一部分：WebSocket的特色

• 经过TCP一次握手就能够创建链接。  而HTTP协议须要三次握手。
• HTTP中服务器永远是被动的，即每次只有客户端发出请求，服务器才会响应。 可是WebSocket协议中，服务器是能够主动的向客户端传递数据。这样就避免了轮询的问题。
• WebSocket须要浏览器、服务器同时支持才可使用，而http协议是广泛支持的。 且WebSocket是一种新的协议，只是目前为了兼容性，必需要创建在http的基础上发起请求，如只用WebSocket协议名将再也不是http:而是ws:。
• 一样地，WebSocket也是基于TCP协议的。

websocket 和 http 的区别

　　首先要知道的时 websocket 和 http是不一样的两个协议，最大的区别在于---http协议是被动的，而websocket协议是主动的。 所谓被动就是说只有客户端发起请求服务器端才会给出响应，而websocket显然就是说能够由服务器端来主动给数据，也许你并无请求。

　　

客户端：啦啦啦，我要创建Websocket协议，须要的服务：chat，Websocket协议版本：17（HTTP Request）
服务端：ok，确认，已升级为Websocket协议（HTTP Protocols Switched）
客户端：麻烦你有信息的时候推送给我噢。。
服务端：ok，有的时候会告诉你的。
服务端：balabalabalabala
服务端：balabalabalabala
服务端：哈哈哈哈哈啊哈哈哈哈
服务端：笑死我了哈哈哈哈哈哈哈

做者：Ovear
连接：https://www.zhihu.com/question/20215561/answer/40316953
来源：知乎
著做权归做者全部。商业转载请联系做者得到受权，非商业转载请注明出处。

 

 

　　这样， 服务器端就能够在有消息的时候再推送消息，那么客户端就能够减小没必要要的ajax轮询了。

 

 

 

注意： 虽然websocket和http协议是两个不一样的协议，可是咱们每次在使用websocket协议时，首先要创建http协议，经过http协议，咱们才能进一步升级（upgrade）为websocket协议。

 

 下面这张图片比较好地解释了websocket的相关原理。

 

 

相比于传统 HTTP 的每次“请求-应答”都要 client 与 server 创建链接的模式，WebSocket 是一种长链接的模式。具体什么意思呢？就是一旦 WebSocket 链接创建后，除非 client 或者 server 中有一端主动断开链接，不然每次数据传输以前都不须要 HTTP 那样请求数据。从上面的图能够看出，client 第一次须要与 server 创建链接，当 server 确认链接以后，二者便一直处于链接状态。直到一方断开链接，WebSocket 链接才断开。

 

第二部分： 基础知识

　　当咱们获取了WebSocket链接以后，咱们就能够经过send()方法来向服务器发送数据，并经过onmessage事件来接收服务器返回的数据。下面的api用于建立一个Websocket对象。

　　var Socket = new WebSocket(url, [protocol]);

　　其中第一个参数是须要链接的url，后一个参数是可选的，制定能够接受的子协议。

　   

WebSocket相关属性

　　即咱们建立了Socket对象以后，它会有一个readyState属性（这个和xhr的属性同名），取值以下：

0     表示链接还没有创建

1     表示链接已经创建，能够进行通讯

2     表示链接正在进行关闭

3     表示链接已经关闭或者链接不能打开

 

且websocket连接一旦创建，那么就能够双方进行通讯了，直到有一方主动提出终止连接为止。，

 

 

WebSocket方法

　　WebSocket中只有两个方法，一个是使用链接发送数据，即Socket.send()，另外一个就是关闭链接，即Socket.close()。

　　注意：在xhr中是没有close相关方法的，由于一次请求一次响应的方式使得其无需close。

 

WebSocket 事件

 

　　

第三部分：WebSocket实例

　　在创建一个WebSocket链接的时候，客户端浏览器首先向服务器发送一个http请求，这个请求和普通的http请求不一样，由于在首部字段中包含了Upgrade: WebSocket; 这代表这是一个申请升级为WebSocket协议的http请求， 服务器解析这些附加的头信息而后产生了应答信息返回给客户端，客户端和服务端的WebSocket链接就创建起来了，双方就可使用这个链接进行自由的传递信息，而且这个链接会持续存在到客户端或者服务器端的某一方主动的关闭链接。

　　

客户端的HTML和JavaScript

　　下面是菜鸟教程上的例子：

  View Code

　　可是若是要使用,咱们必须安装 pywebsocket， 安装过程以下：

https://looly.gitbooks.io/python-basic/100/101.html 这里有python环境的安装教程。

http://www.runoob.com/html/html5-websocket.html 这里是pywebsocket的安装过程。

 　　

 

 

第四部分： http与websocket在报文方面的差别

　　这里从报文层面谈一下二者的差别。

　　首先，client 发起 WebSocket 链接，报文相似于 HTTP，但主要有几点不同的地方：

　　

• "Upgrade: websocket"： 代表这是一个 WebSocket 类型请求，意在告诉 server 须要将通讯协议切换到 WebSocket

• "Sec-WebSocket-Key: *": 是 client 发送的一个 base64 编码的密文，要求 server 必须返回一个对应加密的 "Sec-WebSocket-Accept" 应答，不然 client 会抛出 "Error during WebSocket handshake" 错误，并关闭链接

 

 

　　server 收到报文后，若是支持 WebSocket 协议，那么就会将本身的通讯协议切换到 WebSocket，返回如下信息：

　　

• "HTTP/1.1 101 WebSocket Protocol Handshake"：返回的状态码为 101，表示赞成 client 的协议转换请求

• "Upgrade: websocket"

• "Connection: Upgrade"

• "Sec-WebSocket-Accept: *"

• ...

   以上都是利用 HTTP 协议完成的。这样，通过“请求-相应”的过程， server 与 client 的 WebSocket 链接握手成功，后续即可以进行 TCP 通信了，也就没有 HTTP 什么事了。能够查阅WebSocket 协议栈了解 WebSocket 的 client 与 server 更详细的交互数据格式。

 

 

第五部分： websocket 与 socket的区别

　　什么是socket? 

　　网络应用中，两个应用程序同时须要向对方发送消息的能力（即全双工通讯），所利用到的技术就是 socket，其可以提供端对端的通讯。对于程序员而言，其须要在 A 端建立一个 socket 实例，并为这个实例提供其所要链接的 B 端的 IP 地址和端口号，而在 B 端建立另外一个 socket 实例，而且绑定本地端口号来进行监听。当 A 和 B 创建链接后，双方就创建了一个端对端的 TCP 链接，从而能够进行双向通讯。

　　进一步解释： 能够知道socket并非仅仅针对于网络的，而是对于任何的双方之间能够进行全双工通讯，咱们就认为这是socket。 而不是说必须是客户端和服务器端。

　　

　　WebSocekt 是 HTML5 规范中的一部分，其借鉴了 socket 的思想，为 client 和 server 之间提供了相似的双向通讯机制。同时，WebSocket 又是一种新的应用层协议，包含一套标准的 API；而 socket 并非一个协议，而是一组接口，其主要方便你们直接使用更底层的协议（好比 TCP 或 UDP）。 

 

　　即 websocket是协议，而socket是技术。

 

 

 

第五部分： websocket与socket.io的区别

　　

https://socket.io/ 

Socket.IO 是一个封装了 Websocket、基于 Node 的 JavaScript 框架，包含 client 的 JavaScript 和 server 的 Node。其屏蔽了全部底层细节，让顶层调用很是简单。

另外，Socket.IO 还有一个很是重要的好处。其不只支持 WebSocket，还支持许多种轮询机制以及其余实时通讯方式，并封装了通用的接口。这些方式包含 Adobe Flash Socket、Ajax 长轮询、Ajax multipart streaming 、持久 Iframe、JSONP 轮询等。换句话说，当 Socket.IO 检测到当前环境不支持 WebSocket 时，可以自动地选择最佳的方式来实现网络的实时通讯。e

也就是说，经过socket.io，咱们能够更方便的调用websocket。 好比，对于ajax的封装就会大大提升咱们的效率，而不须要本身建立，考虑兼容性问题等。 

　

 

不难理解，socket.io这个库是结合了node更方便咱们调用socket的方法的库，更狭隘的说，socket.io是一个websocket库， 他和express不一样，由于express是node的库，因此二者是相互独立的，为了开发的高效性，咱们也能够同时使用express和socket.io两个库。

　　

　　

 

　

 

 

 

 

完

https://www.zhihu.com/question/20215561