vue项目中 使用 websocket

Websocket是一个持久化的协议，HTTP是不支持持久连接的

Websocket其实是一个新协议，跟HTTP协议基本没有关系，只是为了兼容现有浏览器的握手规范而已

比如说我们现在有个需求,实时获取一个网站当前的访问人数, 如果使用http协议去做的话,那我们要使用轮询,用定时器隔一秒查一次,这样的话非常的消耗我们的效率.这个时候就需要websocket了,也就是当数据发生改变的时候让后台主动把东西给我们,而不是从我们前台去要.下面用图来表示一下两种协议:

简单的了解了websocket之后,接下来就是如何在vue项目中去使用websocket了

在vuejs框架中使用websocket , 可以比较方便的运用到vuejs框架的响应式系统 , 以及一些简单的生命周期函数

下面就是详细的使用方式:

1.如果是全局的websocket,则需要在main.js中进行设置websocket,具体如图所示:

ReconnectingWebSocket是类库reconnecting-websocket , 可以进行自动的断线重连,引入连接 :  

<script src="https://cdn.bootcss.com/reconnecting-websocket/1.0.0/reconnecting-websocket.min.js"></script>  

如果不使用断线重连的话,那么就直接new Websocket(地址)就可以了

上图中有个onmessage方法,这是websocket中,接收到消息后出发的函数,在其形参中可以拿到后端返回的数据. onopen是打开websocket的连接

接着讲几个websocket中比较重要的几个回调函数:

let  websocket = new WebSocket(后台给的地址);
 
   //连接发生错误的回调方法
   websocket.onerror = function () {
       setMessageInnerHTML("WebSocket连接发生错误");
   };
   //连接成功建立的回调方法
   websocket.onopen = function () {
       //setMessageInnerHTML("WebSocket连接成功");
   }
   //接收到消息的回调方法
   websocket.onmessage = function (event) {
       setMessageInnerHTML(event.data);
   }
   //连接关闭的回调方法
   websocket.onclose = function () {
       //setMessageInnerHTML("WebSocket连接关闭");
   }
   //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
   window.onbeforeunload = function () {
       websocket.close();
   }

2.如果是某个组件需要用到websocket,那么就到当前组件中,完成上述操作,不同的是,我这里离开当前路由的时候希望当前连接关闭,所以我是利用了导航守卫去关闭连接(注意写的时候和生命周期同级),如下:

 beforeRouteLeave(to, from, next) {
    this.socket.close();
    console.log("关闭连接");
    next();
  },

如果有错误,欢迎大家及时指出,相互沟通.

前端小菜鸟,多多指教,啊哈