Websocket入门教程

　　什么是Websocket
　　websocket和http一样，也是一种网络的通信协议
　　为什么会出现Websocket
　　我们平时用的最多的就是http协议来完成通信交互，那为什么还要设计出Websocket
　　因为在某些通信的过程中，http协议就不大适合了，http是无状态的协议，一般是客户端主动发起请求，服务器接收到后给予回应然后就结束了，客户端如果没有请求，服务端也没法主动推送信息给客户端
　　如果客户端想不定时的收到服务端的数据，http的协议要么就通过轮询的方式，比如说每隔5秒客户端主动发送一次请求，但是轮询的效率太低，浪费资源（需要不断的发送http请求），并且会存在通信延时的问题（有可能刚好5秒请求才能拿到最新数据），所以这个时候Websocket就出现了
　　Websocket特点
　　websocket最大的特点就是，客户端一旦和服务端建立好连接后，服务端是可以主动给客户端发送数据，并且连接是一直保持的，这样服务端一旦有新数据就可以立马推送过来，同时客户端也可以主动发信息给服务端，从而实现真正的双向平等通信
　　Websocket应该场景是比较多的，比较说实时聊天、直播互动等
　　Websocket的常用Api// 协议可以是ws或者wss // wss相对ws多了一层安全 const ws = new WebSocket(＂wss://xxx.socket.io＂);  // 监听连接打开时 ws.onopen = function(event) {    console.log(＂连接已经打开＂);      // 通过send方法发送数据给服务器   // 发送的数据可以是字符串   // 也可以是二进制数据   ws.send(＂服务器你好＂); };  // 通过onmessage用来接收数据 ws.onmessage = function(event) {   // 接收的数据可以是字符串   // 也可以是二进制数据   console.log( ＂收到数据: ＂ + event.data);      // 通过close方法来主动断开连接   ws.close(); };  // 通过onclose监听连接是否断开 ws.onclose = function(evt) {   console.log(＂Connection closed.＂); };
　　需要注意的是如果客户端和服务端长时间没有通信的话，那么连接就会主动断开掉，这个时候就出现了心跳检测的机制，比如每隔15秒，客户端主动发送ping，然后服务端接收到后主动回应一个pong，连接就可以一直连接着
　　建议大家用一个封装好的websoket库，每次建议连接后会自带心跳检测
　　websocket-heartbeat-js// github地址 https://github.com/zimv/websocket-heartbeat-js/blob/master/README-zh.md
　　安装npm install websocket-heartbeat-js -S
　　引入使用import WebsocketHeartbeatJs from ＂websocket-heartbeat-js＂;  let websocketHeartbeatJs = new WebsocketHeartbeatJs({     url: ＂ws://xxxxxxx＂ });  websocketHeartbeatJs.onopen = function () {     console.log(＂connect success＂);     websocketHeartbeatJs.send(＂hello server＂); }  websocketHeartbeatJs.onmessage = function (e) {     console.log(`onmessage: ${e.data}`); }  websocketHeartbeatJs.onreconnect = function () {     console.log(＂reconnecting...＂); }
　　好了，websocket的基本入门就介绍到这了
　　觉得效果不错的请帮忙加个关注点个赞，经常分享前端实用开发技巧