2023年8月1日发(作者：)
Websocket在Vue中的使⽤1、初始化WebSocket对象为了兼容各个浏览器所以初始化的时候针对不同的浏览器初始化调⽤不同的⽅法。2、注册Websocket的url其中KET_URL为wensocket服务地址，_是登录⽤户的⽤户名，这样做为了保证不同⽤户的websocket地址的唯⼀性，防⽌消息发⽣混淆。3、增加⼼跳检测 由于⽹络以及websocket⾃⾝的⼀些不稳定性，页⾯长时间打开的情况下有时会发⽣websocket链接的断开，为了防⽌这种情况，我们增加⼼跳检测机制并且在websocket链接建⽴时触发该⽅法4、Vue组件中什么时候创建和销毁websocket对象 为了保证websocket对象能够及时创建，建议在vue的created的钩⼦函数中触发websocket的初始化，同时在beforeRouteLeave⽅法⾥关闭websocket的链接 5、完整代码参考 截图：截图源码（复制粘贴即可使⽤）：export default { name: 'Resource', data () { return { wsUrl: '', websocket:null } }, methods: { updateUrl(urlPath){ let _this = this; if (f('sockjs') != -1) { _ = '' + KET_URL +urlPath + ";" + _; } else { if (ol == 'http:') { _ = 'ws://' +KET_URL + urlPath + ";" + _; } else { _ = 'wss://' +KET_URL + urlPath + ";" + _; } } }, webSocketLink(){ let _this = this; varheartCheck = { timeout: 5000,//5秒 timeoutObj: null, reset: function(){ clearInterval(tObj); returnthis; }, start: function(){ tObj = setInterval(function(){ _("HeartBeat");("HeartBeat"); }, t) } }; if ('WebSocket' in window) {_Url("/webSocketServer"); _ket = new WebSocket(_); } else if('MozWebSocket' in window) { _Url("/webSocketServer"); _ket = newMozWebSocket(_); } else { _Url("/sockjs/webSocketServer"); _ket = newSockJS(_) } _ = function(){ ("websock连接成功");().start(); }; _age = function (event) { (); } } },beforeRouteLeave (to, from, next) { if(ket){ () } }, created(){ketLink(); }}
2023年8月1日发(作者：)
Websocket在Vue中的使⽤1、初始化WebSocket对象为了兼容各个浏览器所以初始化的时候针对不同的浏览器初始化调⽤不同的⽅法。2、注册Websocket的url其中KET_URL为wensocket服务地址，_是登录⽤户的⽤户名，这样做为了保证不同⽤户的websocket地址的唯⼀性，防⽌消息发⽣混淆。3、增加⼼跳检测 由于⽹络以及websocket⾃⾝的⼀些不稳定性，页⾯长时间打开的情况下有时会发⽣websocket链接的断开，为了防⽌这种情况，我们增加⼼跳检测机制并且在websocket链接建⽴时触发该⽅法4、Vue组件中什么时候创建和销毁websocket对象 为了保证websocket对象能够及时创建，建议在vue的created的钩⼦函数中触发websocket的初始化，同时在beforeRouteLeave⽅法⾥关闭websocket的链接 5、完整代码参考 截图：截图源码（复制粘贴即可使⽤）：export default { name: 'Resource', data () { return { wsUrl: '', websocket:null } }, methods: { updateUrl(urlPath){ let _this = this; if (f('sockjs') != -1) { _ = '' + KET_URL +urlPath + ";" + _; } else { if (ol == 'http:') { _ = 'ws://' +KET_URL + urlPath + ";" + _; } else { _ = 'wss://' +KET_URL + urlPath + ";" + _; } } }, webSocketLink(){ let _this = this; varheartCheck = { timeout: 5000,//5秒 timeoutObj: null, reset: function(){ clearInterval(tObj); returnthis; }, start: function(){ tObj = setInterval(function(){ _("HeartBeat");("HeartBeat"); }, t) } }; if ('WebSocket' in window) {_Url("/webSocketServer"); _ket = new WebSocket(_); } else if('MozWebSocket' in window) { _Url("/webSocketServer"); _ket = newMozWebSocket(_); } else { _Url("/sockjs/webSocketServer"); _ket = newSockJS(_) } _ = function(){ ("websock连接成功");().start(); }; _age = function (event) { (); } } },beforeRouteLeave (to, from, next) { if(ket){ () } }, created(){ketLink(); }}
发布评论