这是我参与8月更文挑战的第26天，活动详情查看：8月更文挑战
什么是 Web Socket
WebSocket 协议在2008年诞生，2011年成为国际标准，所有浏览器都已经支持了。其是基于TCP的一种新的网络协议，是 HTML5 开始提供的一种在单个TCP连接上进行全双工通讯的协议，它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端。
都有http协议了，为什么要用Web Socket
WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后浏览器和服务器之间就形成了一条快速通道，两者之间就直接可以数据互相传送。
HTTP协议是一种无状态、单向的应用层协议，其采用的是请求/响应模型，通信请求只能由客户端发起，服务端对请求做出应答响应，无法实现服务器主动向客户端发起消息，这就注定如果服务端有连续的状态变化，客户端想要获知就非常的麻烦。而大多数Web应用程序通过频繁的异步JavaScript 和 aJax 请求实现长轮询，其效率很低，而且非常的浪费很多的带宽等资源。
HTML5定义的WebSocket协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。WebSocket 连接允许客户端和服务器之间进行全双工通信，以便任一方都可以通过建立的连接将数据推送到另一端。WebSocket 只需要建立一次连接，就可以一直保持连接状态，这相比于轮询方式的不停建立连接显然效率要大大提高。
特点
-
服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话
-
建立在 TCP 协议之上，服务器端的实现比较容易。
-
与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。
-
数据格式比较轻量，性能开销小，通信高效。
-
可以发送文本，也可以发送二进制数据。
-
没有同源限制，客户端可以与任意服务器通信。
-
协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。
怎样使用？
执行流程
- 1 连接建立：客户端向服务端请求建立连接并完成连接建立
- 2 数据上行：客户端通过已经建立的连接向服务端发送数据
- 3 数据下行：服务端通过已经建立的连接向客户端发送数据
- 4 客户端断开：客户端要求断开已经建立的连接
- 5 服务端断开：服务端要求断开已经建立的连接
客户端
连接建立
连接成功后，会触发 onopen 事件
var ws = new WebSocket("wss://ws.iwhao.top");
ws.onopen = function(evt) {
console.log("Connection open ...");
};
数据上行
ws.send("Hello WebSockets!");
数据下行
ws.onmessage = function(evt) {
console.log( "Received Message: " + evt.data);
ws.close();
};
客户端断开
ws.close();
服务端断开
ws.onclose = function(evt) {
console.log("closed.");
};
异常报错
如果连接失败，发送、接收数据失败或者处理数据出现错误，browser 会触发 onerror 消息；
ws.onerror = function(evt) {
};
服务端 node
参考
api/浏览器版本兼容性
| Api/浏览器 | Chrome | Edge Firefox | Internet | Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on iOS | Samsung Internet | Deno |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| WebSocket | 4 | 12 | 11 | 10 | 12.1 | 5 | 37 | 18 | 14 | 12.1 | 4.2 | 1.0 | 1.4 |
| WebSocket()constructor | 4 | 12 | 11 | 10 | 12.1 | 5 | 37 | 18 | 14 | 12.1 | 4.2 | 1.0 | 1.4 |
| binaryType | 15 | 12 | 11 | 10 | 12.1 | 6 | 37 | 18 | 14 | 12.1 | 6 | 1.0 | 1.4 |
| bufferedAmount | 4 | 12 | 7 | 10 | 12.1 | 5 | 37 | 18 | 7 | 12.1 | 4.2 | 1.0 | 1.4 |
| close | 4 | 12 | 7 | 10 | 12.1 | 5 | 37 | 18 | 7 | 12.1 | 4.2 | 1.0 | 1.4 |
| close event | 4 | 12 | 7 | 10 | 12.1 | 5 | 37 | 18 | 7 | 12.1 | 4.2 | 1.0 | 1.4 |
| error event | 5 | 12 | 7 | No | 12.1 | 5 | 37 | 18 | 7 | 12.1 | 4.2 | 1.0 | 1.4 |
| extensions | 16 | 12 | 8 | 10 | 12.1 | 6 | 37 | 18 | 8 | 12.1 | 6 | 1.0 | 1.4 |
| extensions | 16 | 12 | 8 | 10 | 12.1 | 6 | 37 | 18 | 8 | 12.1 | 6 | 1.0 | 1.4 |
| message event | 4 | 12 | 7 | No | 12.1 | 5 | 37 | 18 | 7 | 12.1 | 4.2 | 1.0 | 1.4 |
| onclose | 4 | 12 | 7 | 10 | 12.1 | 5 | 37 | 18 | 7 | 12.1 | 4.2 | 1.0 | 1.4 |
| onerror | 5 | 12 | 7 | No | 12.1 | 5 | 37 | 18 | 7 | 12.1 | 4.2 | 1.0 | 1.4 |
| onmessage | 4 | 12 | 7 | No | 12.1 | 5 | 37 | 18 | 7 | 12.1 | 4.2 | 1.0 | 1.4 |
| onopen | 4 | 12 | 7 | No | 12.1 | 5 | 37 | 18 | 7 | 12.1 | 4.2 | 1.0 | 1.4 |
| open event | 4 | 12 | 7 | No | 12.1 | 5 | 37 | 18 | 7 | 12.1 | 4.2 | 1.0 | 1.4 |
| protocol | 15 | 12 | 7 | No | 12.1 | 6 | 37 | 18 | 7 | 12.1 | 6 | 1.0 | 1.4 |
| Supports protocol as specified by RFC 6455 | 16 | 12 | 11 | 10 | 15 | 6 | 37 | 18 | 14 | 14 | 6 | 1.0 | 1.4 |
| readyState | 4 | 12 | 7 | No | 12.1 | 5 | 37 | 18 | 7 | 12.1 | 4.2 | 1.0 | 1.4 |
| send | 4 | 12 | 18 | 12.1 | 5 | 37 | 18 | 18 | 12.1 | 4.2 | 1.0 | 1.4 | |
| url | 18 | 12 | 7 | No | 12.1 | 6 | 37 | 18 | 7 | 12.1 | 6 | 1.0 | 1.4 |
| Available in workers | 4 | 12 | 37 | 10 | 12.1 | 5 | 37 | 18 | 37 | 12.1 | 5 | 1.0 | 1.4 |
以上就是本篇的全部内容了，非常感谢帅哥美女们能看到这里，如果这个文章写得还不错或者对你有一点点帮助，求点赞，求关注，求分享，当然有任何问题可以在评论讨论，我都会积极回答的，再次感谢😁
