WebSocket 与 Socket

[Leo-lin214]

WebSocket 是 H5 引入的全双工通信方式，让服务端主动推送信息成为了可能。那么下面就来简单总结一下 WebSocket 与 Socket。

WebSocket 通信

WebSocket 是基于 TCP 连接的全双工方式所实现的持久化协议。

那么，WebSocket 在建立连接过程中，需要经历两次握手。分别是：

• 客户端通过 new WebSocket(url, [ protocol ]) 向服务端发出一个连接连接的请求。请求中会带上两个请求头部，分别是 Ugrade 和 Connection 字段，其中 Ugrade 字段用于表示请求所使用的协议，Connection 则是结合 Ugrade 使用。
• 服务端收到请求后，就会重新向客户端返回响应内容，响应头会带上一个很重要字段，就是 Sec-WebSocket-Protocol，客户端收到响应内容后，就会检查该字段的合法性，一旦通过就会正式建立连接。

WebSocket 中的 API 主要就是 onopen、onmessage、onclose、onerror 和 send。

建立连接。

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

当客户端和服务端成功建立连接时，会触发 onopen 事件。

Socket.onopen = function(e) {}

当建立连接不成功时，会触发onerror事件。

Socket.onerror = function(e) {}

当客户端与服务端之间的 WebSocket 连接关闭时，会触发 onclose 事件。

Socket.onclose = function(e) {}

客户端使用 send 向服务端发送信息，使用 onmessage 监听事件。

Socket.send(...)
Socket.onmessage = function(e) {}

Socket 通信

提到 Socket，就不得不提一下 Socket 与 WebSocket 之间区别，那么它们两者之间有什么区别呢？

Socket 并不是一个协议，而是为了方便使用 TCP 或 UDP 而抽象出来的一个层，是位于应用层和传输层之间的一组接口。而 WebSocket 是基于 HTTP 协议所编写的，那么 WebSocket 是应用层协议。

那么，有人会提问，好像还听说过 Socket.io ，这个又是什么鬼？

其实，Socket.io 是对 WebSocket 的封装，原理其实就是对于高版本浏览器会使用 WebSocket 通信，而对于低版本浏览器则会使用长轮询进行兼容。

借用一下别人图。

当然，如果想深入的话，可以看看别人分享的好文。

[基于socket.io快速实现一个实时通讯应用](https://segmentfault.com/a/1190000018944634)