vue-scoket.io用法 代替定时器实现实时接受后端传过来的数据

1、下载vue-scoket.io

2、在main.js种配置

import ScoketIo from 'vue-socket.io'

Vue.use(new ScoketIo({   debug: false,   connection: location.hostname === 'localhost' ? 'https://你的服务器ip/BroadcastSpace' : `https://${location.hostname}:${location.port}/BroadcastSpace`,   vuex: {     store,     actionPrefix: 'SOCKET_',     mutationPrefix: 'SOCKET_'   },   options: { path: '/socket.io', autoConnect: false // 不自动连接 在需要的地方控制 } }))

h(App)","marks":[]}]}]},{"type":"block","id":"08td-1657694448210","name":"code-line","data":{},"nodes":[{"type":"text","id":"8FV6-1657694448209","leaves":[{"text":"})","marks":[]}]}]}],"state":{}}]'>

new Vue({   el: '#app',   router,   store,   i18n,   sockets: {     connecting() {       console.log('链接中');     },     disconnect() {       console.log('断开链接');     },     connect_failed() {       console.log('链接失败');     },     connect() {       console.log('链接');     }   },   render: h => h(App) })

3、页面种使用

{","marks":[]}]}]},{"type":"block","id":"oJ6I-1657694648839","name":"code-line","data":{},"nodes":[{"type":"text","id":"6p4C-1657694648838","leaves":[{"text":"        // console.log(res.buzzer_data, '蜂鸣器接口数据 导航中编写 原来接口/monitor/buzzer_info get');","marks":[]}]}]},{"type":"block","id":"H22Z-1657694648841","name":"code-line","data":{},"nodes":[{"type":"text","id":"lSlR-1657694648840","leaves":[{"text":"        console.log(res, '');","marks":[]}]}]},{"type":"block","id":"MqWW-1657694650638","name":"code-line","data":{},"nodes":[{"type":"text","id":"f4pY-1657694650637","leaves":[{"text":" })","marks":[]}]}]},{"type":"block","id":"9fMQ-1657694716148","name":"code-line","data":{},"nodes":[{"type":"text","id":"hX5D-1657694716147","leaves":[{"text":" ","marks":[]}]}]},{"type":"block","id":"UIXp-1657694716320","name":"code-line","data":{},"nodes":[{"type":"text","id":"pyMj-1657694716318","leaves":[{"text":" ","marks":[]}]}]},{"type":"block","id":"j8W0-1657694727035","name":"code-line","data":{},"nodes":[{"type":"text","id":"ho42-1657694727034","leaves":[{"text":"   // 组件销毁时清空定时器 或者 取消订阅","marks":[]}]}]},{"type":"block","id":"ZvZO-1657694727487","name":"code-line","data":{},"nodes":[{"type":"text","id":"hwrO-1657694727486","leaves":[{"text":"  destroyed() {","marks":[]}]}]},{"type":"block","id":"HCDt-1657694727489","name":"code-line","data":{},"nodes":[{"type":"text","id":"Emoz-1657694727488","leaves":[{"text":"    this.sockets.unsubscribe('monitor_center_data'); // 取消订阅 ","marks":[]}]}]},{"type":"block","id":"bfBK-1657694727491","name":"code-line","data":{},"nodes":[{"type":"text","id":"j2yF-1657694727490","leaves":[{"text":"   // socket代替定时器，离开页面取消订阅 但是不能关闭，因为关闭之后全局的scoket也就断开了","marks":[]}]}]},{"type":"block","id":"ax5j-1657694727493","name":"code-line","data":{},"nodes":[{"type":"text","id":"QTYV-1657694727492","leaves":[{"text":"    // clearInterval(this.timer)","marks":[]}]}]},{"type":"block","id":"jpKY-1657694727495","name":"code-line","data":{},"nodes":[{"type":"text","id":"Q2Na-1657694727494","leaves":[{"text":"  },","marks":[]}]}]},{"type":"block","id":"lXKc-1657694833535","name":"code-line","data":{},"nodes":[{"type":"text","id":"EQ9Y-1657694833534","leaves":[{"text":" ","marks":[]}]}]},{"type":"block","id":"I4Wm-1657694833705","name":"code-line","data":{},"nodes":[{"type":"text","id":"nqjm-1657694833703","leaves":[{"text":" 在退出登录时关闭scoket","marks":[]}]}]},{"type":"block","id":"jbRM-1657694848625","name":"code-line","data":{},"nodes":[{"type":"text","id":"yJIU-1657694848624","leaves":[{"text":" this.$socket.close()","marks":[]}]}]}],"state":{}}]'>

mounted() {     this.$socket.open() }, 订阅消息： 接受数据名: monitor_center_data buzzer_data 命名空间: BroadcastSpace this.sockets.subscribe('monitor_center_data', res => {         // console.log(res.buzzer_data, '蜂鸣器接口数据 导航中编写 原来接口/monitor/buzzer_info get');         console.log(res, ''); })   // 组件销毁时清空定时器 或者 取消订阅   destroyed() {     this.sockets.unsubscribe('monitor_center_data'); // 取消订阅    // socket代替定时器，离开页面取消订阅 但是不能关闭，因为关闭之后全局的scoket也就断开了     // clearInterval(this.timer)   }, 在退出登录时关闭scoket this.$socket.close()