目录结构如下
封装代码
import { Message } from 'element-ui' let websock = null // let messageCallback = null // const errorCallback = null var tryTime = 0 let wsUrl = '' // 接收ws后端返回的数据 function websocketonmessage(e, successCallback) { successCallback(JSON.parse(e.data)) // console.log(JSON.parse(e.data)) // messageCallback(e.data) } /** * 发起websocket连接 * @param {Object} agentData 需要向后台传递的参数数据 */ function websocketSend(agentData) { // 加延迟是为了尽量让ws连接状态变为OPEN setTimeout(() => { // 添加状态判断,当为OPEN时,发送消息 if (websock.readyState === websock.OPEN) { // websock.OPEN = 1 // 发给后端的数据需要字符串化 websock.send(JSON.stringify(agentData)) } // if (websock.readyState === websock.CLOSED) { // websock.CLOSED = 3 // console.log('websock.readyState=3') // Message.error('ws连接异常,请稍候重试') // } }, 3000) } // 关闭ws连接 function websocketclose(e) { // e.code === 1000 表示正常关闭。 无论为何目的而创建, 该链接都已成功完成任务。 // e.code !== 1000 表示非正常关闭。 if (e && e.code !== 1000) { if (tryTime < 50) { setTimeout(function() { websock = null tryTime++ initWebSocket() console.log(`第${tryTime}次重连`) }, 3 * 1000) } else { Message.error('重连失败!请稍后重试') } // Message.error('ws连接异常,请稍候重试') // errorCallback() } } // 建立ws连接 function websocketOpen(e) { console.log('ws连接成功') } // 初始化weosocket function initWebSocket(successCallback) { if (typeof (WebSocket) === 'undefined') { Message.error('您的浏览器不支持WebSocket,无法获取数据') return false } // ws请求完整地址 const requstWsUrl = wsUrl websock = new WebSocket(requstWsUrl) websock.onmessage = function(e) { websocketonmessage(e, successCallback) } websock.onopen = function() { websocketOpen() } websock.onerror = function() { // Message.error('ws连接异常,请稍候重试') // errorCallback() } websock.onclose = function(e) { websocketclose(e) } } /** * 发起websocket请求函数 * @param {string} url ws连接地址 * @param {Object} agentData 传给后台的参数 * @param {function} successCallback 接收到ws数据,对数据进行处理的回调函数 * @param {function} errCallback ws连接错误的回调函数 */ export function sendWebsocket(url, agentData, successCallback) { wsUrl = url + agentData.group_id + '/' initWebSocket(successCallback) console.log(wsUrl, 'wsurl') // messageCallback = successCallback websocketSend() } /** * 关闭websocket函数 */ export function closeWebsocket() { if (websock) { websock.close() // 关闭websocket websock.onclose() // 关闭websocket } }
注释的地方可以来看ws 的状态 , 在这里加入了重连次数
引用
// ws连接成功,后台返回的ws数据,组件要拿数据渲染页面等操作 wsMessage(data) { const dataJson = data // 在这里可以写逻辑 }, requstWs() { // 防止用户多次连续点击发起请求,所以要先关闭上次的ws请求。 closeWebsocket() this.percentage = 1 this.timeNumber = 0 // 传递给后端的数据 这里的obj 我是作为参数进行传递的 , 如果你需要与服务端对话的话obj 也可以作为消息模板进行传递 // 但是在websocket.js 里需要修改下 websocketSend 这个函数 const obj = { group_id: this.taskRecord } // 发起ws请求 sendWebsocket('wss://192.168.0.21/ws/task_new_infos/', obj, this.wsMessage) },
ok 就这么多 附赠两断代码
- 将 “1天4时30分60秒” 转换为 秒
const dateA = this.duration.replace('天', ',') // 更改日期格式 const dateB = dateA.replace('时', ',') // 更改日期格式时 const dateC = dateB.replace('分', ',') // 更改日期格式时 const dateD = dateC.replace('秒', '') // 更改日期格式时 // console.log(dateD) const fullTimer = dateD.split(',') // 数组的转换 this.timeNumber = 0 this.timeNumber = parseInt(fullTimer[0] * 24 * 60 * 60) + parseInt(fullTimer[1] * 60 * 60) + parseInt(fullTimer[2] * 60) + parseInt(fullTimer[3])
- 将秒数转换为 “00 :33:22:11”
const one_day = 60 * 60 * 24 const one_hour = 60 * 60 const one_minute = 60 var days = Math.abs(parseInt(this.timeNumber / one_day)) < 10 ? '0' + parseInt(this.timeNumber / one_day) : parseInt(this.timeNumber / one_day) var hours = Math.abs(parseInt((this.timeNumber % one_day) / one_hour)) < 10 ? '0' + parseInt((this.timeNumber % one_day) / one_hour) : parseInt((this.timeNumber % one_day) / one_hour) var minutes = Math.abs(parseInt((this.timeNumber % one_day % one_hour) / one_minute)) < 10 ? '0' + parseInt((this.timeNumber % one_day % one_hour) / one_minute) : parseInt((this.timeNumber % one_day % one_hour) / one_minute) var seconds = Math.abs(this.timeNumber % one_day % one_hour % one_minute) < 10 ? '0' + this.timeNumber % one_day % one_hour % one_minute : this.timeNumber % one_day % one_hour % one_minute return days + ':' + hours + ':' + minutes + ':' + seconds