websocket js（websocket其实很简单--前端）

1、websocket 被称之为双向通讯，之所以出现，无非是因为以下相关的情景：图表展示，老板想让你实时展示数据库的表格信息，怎么做？setInterval?这种方法在不考虑性能以及消耗的情况下完全是可以的，但是我们可能不能为了一个图表实时展示来消耗如此多的性能！（即服务端无法主动向客户端发起信息，需要我们定时主动询问）

2、websocket 这么解决这类问题的呢？大概意思就是建立通讯管道，这种管道消耗的性能很少，并且每次服务器通知我们的时候都会给我们一个回调，我们在这个回调能拿到后端给我们的数据，做出一系列操作（列如重新渲染某些dom）

3、为什么说它简单？
据我们这边的后端所说，他们需要搭建一个websocket服务，然后搞一些花里胡哨的东西，咱前端只需要下面两步：
一、建立链接，前面的ws://是固定的写法，后面url换成目标地址就行

const ws = new WebSocket('ws://url');

当然它不仅仅只有一个参数url，websocket还有一些其他的接受参数：protocols 、send、close ，基本一个url就能满足日常的开发了，可自行百度其它参数的意义
二、回调
websocket 有以下几个回调：open 、message 、close 、error ，光看上面的回调名字就能看出来，open是打开（即websocket 连接打开的回调），message是通知（即服务端通知我们之后，会触发的回调），close是关闭（即连接关闭的回调），error是错误（即连接过程发生错误的回调）

 const websocket = new WebSocket("ws://url");
        // 引入websocket
        websocket.onopen = function(){
            console.log('websocket open');
        }
        // 结束websocket
        websocket.onclose = function(){
            console.log('websocket close');
        }
        // 接受到信息
        websocket.onmessage = function(res){
            console.log('websocket message',res.data);
        }
        // 错误信息
        websocket.onerror = function(error){
            console.log('websocket err ',error);
        }
     

4、当然除此之外还有websocket.send 等方法，还有默认的4种状态符。查看详情