Vue里怎么使用socket?(websocket)

第一步：封装socket.js

import { Message } from 'iview';class Socket {constructor (wsurl, binaryType){this.wsurl = wsurlthis.websock = nullthis.binaryType = binaryTypethis.initWebSocket()}initWebSocket(){var that = thisthis.websock = new WebSocket(this.wsurl)if(this.binaryType){this.websock.binaryType = this.binaryType}this.websock.onmessage = function(e){that.webMessage(e)}this.websock.onclose = function(e){that.webClose(e)}this.websock.onopen = function(){that.webOpen()}this.websock.onerror = function(){Message.error('websocket连接中断！请刷新重试')}}sendSock(agentData, callback){this.callback = callbackif(agentData){if（this.websock.readyState === this.websock.OPEN）{this.webSend(agentData)} else if(this.websock.readyState === this.websock.CONNECTING){let that = thissetTimeout(function(){that.webSend(agentData)}, 300)}else{this.initWebSocket()let that = thissetTimeout(function(){that.webSend(agentData)}, 500)}}}       webMessage(e){this.callback(e)}webSend(agentData){this.websock.send(agentData)        }webClose(e){this.websock.close()}webOpen(){}
}export default Socket

第二步：在vue文件里引入使用

socket的使用

//引入socket
import socket from "@/libs/socket.js"; //根据自己放的路径来引入socketmethods:{//socket操作initWebsocket(){console.log("初始化websocket");if(!this.websocket){this.websocket = new socket(//这里填写要请求socket的url字符串)this.websocket.sendSock("", this.websocketonmessage);}},websocketonmessage(e){console.log(e.data)},closeWebSocket(){if(this.websocket != null){this.websocket.webClose();}}
},
mounted(){this.initWebsocket()
},
beforeDestroy(){this.closeWebSocket()
}

Vue里怎么使用socket?(websocket)相关推荐

socket/WebSocket/WebService/http/https概念
学习了这么久的java技术, 但是这5个 socket/WebSocket/WebService/http/https 概念还不是很清楚, 总是很模糊,或者是弄混. 惭愧! ! 学习之前, 要对这个 ...
Vue里标签嵌套限制问题解决------解析DOM模板时注意事项：
Vue里标签嵌套限制问题解决------解析DOM模板时注意事项: 参考文章: (1)Vue里标签嵌套限制问题解决------解析DOM模板时注意事项: (2)https://www.cnblogs. ...
vue 打包后访问接口报错404 解决方案（前提是在vue里使用了代理）
vue 打包后访问接口报错404 解决方案 (前提是在vue里使用了代理) 参考文章: (1)vue 打包后访问接口报错404 解决方案 (前提是在vue里使用了代理) (2)https://www. ...
Vue 里的$如何理解
如下代码: new Vue({el: '#app',router,store,i18n,test,render: h => h(App) })// 用的时候this.$store.dispatc ...
Vue 里几个重要的指令
Vue 里几个重要的指令 --资源来自黑马程序员 v-text v-html v-on v-show v-if v-bind v-for v-model --资源来自黑马程序员) v-text &l ...
Vue项目实战01: vue里父传子传事件(easy)
vue中的组件通信相信小伙伴们已经达到炉火纯青的地步了提到vue里父子组件通信脑子里第一个想到的是不是使用$emit来传递. 实现肯定是能实现的下面我们一起看一下一种简单的方法父组件: 在父 ...
[vue] 为什么我们写组件的时候可以写在.vue里呢？可以是别的文件名后缀吗？
[vue] 为什么我们写组件的时候可以写在.vue里呢?可以是别的文件名后缀吗? 也可以写为js,jsx,ts,tsx这种个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很 ...
解决vue里iscroll（better-scroll）点击触发两次和初始化无法滚动问题！
这两个插件我用过好几次,有时候很顺利,不顺利的时候真的很麻烦,一直无法滚动,明明style里已经有样式了,就是滚动不了. 先说下在vue里的三种的引入方式: 在index.html文件里通过scrip ...
html input 的value变颜色,vue里input根据value改变背景色的实例
这篇文章主要为大家详细介绍了vue里input根据value改变背景色的实例,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! 1.首先定义两个不同 ...

Vue里怎么使用socket?(websocket)

Vue里怎么使用socket?(websocket)相关推荐

最新文章

热门文章