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();
},
如果有错误,欢迎大家及时指出,相互沟通.
前端小菜鸟,多多指教,啊哈