From 8a1a8689a2d7e236a733ffb822da503d16fcb88e Mon Sep 17 00:00:00 2001 From: qingyiay <2386314947@qq.com> Date: 星期一, 10 七月 2023 08:45:49 +0800 Subject: [PATCH] websocket增加重连 --- pages/freight-forwarder-page/freightForwarder-my/freightForwarder-my.vue | 503 ++++++++++++++++++++++++--------------------- pages/driver-page/drvier-my/drvier-my.vue | 2 pages/tabbar-page/index-tabbar/index-tabbar.vue | 4 pages/customer-page/customer-my/customer-my.vue | 2 store/index.js | 93 +++++++ 5 files changed, 362 insertions(+), 242 deletions(-) diff --git a/pages/customer-page/customer-my/customer-my.vue b/pages/customer-page/customer-my/customer-my.vue index 7d3cf26..a2d91a3 100644 --- a/pages/customer-page/customer-my/customer-my.vue +++ b/pages/customer-page/customer-my/customer-my.vue @@ -360,6 +360,8 @@ }, logoutConfirm() { redirectLogin(); + this.$store.commit('changeisLogin', false) + this.$store.dispatch('websocketOnClose') }, logoutCancel() { this.logoutShow = false; diff --git a/pages/driver-page/drvier-my/drvier-my.vue b/pages/driver-page/drvier-my/drvier-my.vue index f3ce250..e251365 100644 --- a/pages/driver-page/drvier-my/drvier-my.vue +++ b/pages/driver-page/drvier-my/drvier-my.vue @@ -567,6 +567,8 @@ }, logoutConfirm() { redirectLogin(); + this.$store.commit('changeisLogin', false) + this.$store.dispatch('websocketOnClose') }, logoutCancel() { this.logoutShow = false; diff --git a/pages/freight-forwarder-page/freightForwarder-my/freightForwarder-my.vue b/pages/freight-forwarder-page/freightForwarder-my/freightForwarder-my.vue index c55e29c..0930398 100644 --- a/pages/freight-forwarder-page/freightForwarder-my/freightForwarder-my.vue +++ b/pages/freight-forwarder-page/freightForwarder-my/freightForwarder-my.vue @@ -1,11 +1,14 @@ <template> <view class="freightForwarder-my"> - <view class="driver-banner"><view class="navgation">鎴戠殑</view></view> + <view class="driver-banner"> + <view class="navgation">鎴戠殑</view> + </view> <view class="personal-information"> <view class="personal-information-block"> <view class="block-main"> <view class="fleet-container"> - <combined-title title="鎴戠殑杞﹂槦" @rightText="addFleet"> + <combined-title title="鎴戠殑杞﹂槦" + @rightText="addFleet"> <template v-slot:rightText> <text>娣诲姞</text> </template> @@ -13,16 +16,19 @@ <view class="fleet-list"> <u-swipe-action> <u-cell-group :border="false"> - <u-swipe-action-item - :options="options1" + <u-swipe-action-item :options="options1" v-for="(item, index) in fleetData" :index="index" :name="item.id" :key="index" - @click="deleteFleetClick" - > - <u-cell :title="item.name" :value="item.userSijisum + '杈�'" @click="tofleetDetails(item.id)"> - <u-icon name="arrow-right" color="#999999" size="30" slot="right-icon"></u-icon> + @click="deleteFleetClick"> + <u-cell :title="item.name" + :value="item.userSijisum + '杈�'" + @click="tofleetDetails(item.id)"> + <u-icon name="arrow-right" + color="#999999" + size="30" + slot="right-icon"></u-icon> </u-cell> </u-swipe-action-item> </u-cell-group> @@ -35,271 +41,307 @@ <!-- 鏂板缓杞﹂槦寮瑰嚭妗� --> <view class="addNewGroup"> - <u-popup :show="updateGroupShow" @close="addNewFleetPopupClose" @open="addNewFleetPopupOpen" mode="center"> - <view class="title"><u--text text="鏂板缓杞﹂槦" size="30" lineHeight="80" align="center"></u--text></view> + <u-popup :show="updateGroupShow" + @close="addNewFleetPopupClose" + @open="addNewFleetPopupOpen" + mode="center"> + <view class="title"><u--text text="鏂板缓杞﹂槦" + size="30" + lineHeight="80" + align="center"></u--text></view> <view class="addCarForm"> - <u--form labelPosition="left" :model="addGroupForm" ref="form1" labelAlign="center"> - <u-form-item label="缁勫悕" borderBottom ref="groupName" labelWidth="100"> - <u--input v-model="addGroupForm.name" border="none" placeholder="璇疯緭鍏ヨ溅闃熷悕绉�"></u--input> + <u--form labelPosition="left" + :model="addGroupForm" + ref="form1" + labelAlign="center"> + <u-form-item label="缁勫悕" + borderBottom + ref="groupName" + labelWidth="100"> + <u--input v-model="addGroupForm.name" + border="none" + placeholder="璇疯緭鍏ヨ溅闃熷悕绉�"></u--input> </u-form-item> <!-- <u-form-item label="杞︾墝" borderBottom ref="cars" labelWidth="80"> <u--textarea maxlength="2000" v-model="addGroupForm.carNums" placeholder="璇疯緭鍏ヨ溅鐗�" height="150"></u--textarea> </u-form-item> --> </u--form> </view> - <view class="addCarButton"><u-button text="娣诲姞" type="primary" @click="addNewGroupClick"></u-button></view> + <view class="addCarButton"><u-button text="娣诲姞" + type="primary" + @click="addNewGroupClick"></u-button></view> </u-popup> </view> <!-- <view class="statistics"><u-button text="鍙戣繍缁熻" type="primary" @click="statistics"></u-button></view> --> <view class="utils-button"> - <view class="utils"><u-button text="閫�鍑虹櫥褰�" type="primary" @click="logout"></u-button></view> + <view class="utils"><u-button text="閫�鍑虹櫥褰�" + type="primary" + @click="logout"></u-button></view> </view> <!-- 鍒犻櫎杞﹂槦妯℃�佹 --> <view class="deleteFleetModal"> - <u-modal - :show="deleteFleetShow" + <u-modal :show="deleteFleetShow" :title="deleteFleetTitle" @close="deleteFleetClose" @cancel="deleteFleetCancel" @confirm="deleteFleetConfirm" :closeOnClickOverlay="true" - :showCancelButton="true" - > + :showCancelButton="true"> <view class="slot-content"><rich-text :nodes="deleteFleetContent"></rich-text></view> </u-modal> </view> <view class="logoutModel"> - <u-modal :show="logoutShow" :title="logoutTitle" showCancelButton :content="logoutContent" @confirm="logoutConfirm" @cancel="logoutCancel"></u-modal> + <u-modal :show="logoutShow" + :title="logoutTitle" + showCancelButton + :content="logoutContent" + @confirm="logoutConfirm" + @cancel="logoutCancel"></u-modal> </view> </view> </template> <script> -import { redirectLogin } from '@/utils/status'; -export default { - data() { - return { - fleetData: [], - // 鏂板缓杞﹂槦 - addGroupForm: { - name: '' - // wxUserId: uni.getStorageSync('userInfo').id - }, - updateGroupShow: false, - options1: [ - { + import { redirectLogin } from '@/utils/status'; + export default { + data() { + return { + fleetData: [], + // 鏂板缓杞﹂槦 + addGroupForm: { + name: '' + // wxUserId: uni.getStorageSync('userInfo').id + }, + updateGroupShow: false, + options1: [{ text: '鍒犻櫎' - } - ], - // 鍒犻櫎杞﹂槦妯℃�佹 - deleteFleetId: null, // 鍒犻櫎杞﹂槦id - deleteFleetShow: false, - deleteFleetTitle: '', - deleteFleetContent: '', - // 閫�鍑烘ā鎬佹 - logoutShow: false, - logoutTitle: '鎻愮ず', - logoutContent: '鏄惁纭閫�鍑�' - }; - }, - onShow() { - this.init(); - }, - methods: { - init() { - this.getFleet(); + }], + // 鍒犻櫎杞﹂槦妯℃�佹 + deleteFleetId: null, // 鍒犻櫎杞﹂槦id + deleteFleetShow: false, + deleteFleetTitle: '', + deleteFleetContent: '', + // 閫�鍑烘ā鎬佹 + logoutShow: false, + logoutTitle: '鎻愮ず', + logoutContent: '鏄惁纭閫�鍑�' + }; }, - // 鑾峰彇杞﹂槦 - getFleet() { - // this.$reqGet('getFleet', { wxUserId: this.addGroupForm.wxUserId }).then(res => { - this.$reqGet('getFleet').then(res => { - console.log('璐т唬1杞﹂槦', res); - this.fleetData = res.data; - }); + onShow() { + this.init(); }, - // 娣诲姞杞﹂槦 - addFleet() { - console.log('娣诲姞杞﹂槦'); - this.updateGroupShow = true; - }, - addNewFleetPopupClose() { - this.updateGroupShow = false; - this.addGroupForm.name = ''; - }, - addNewFleetPopupOpen() { - console.log('娣诲姞杞﹂槦鎵撳紑'); - }, - // 纭鏂板缓杞﹂槦鎸夐挳 - addNewGroupClick() { - this.updateGroupShow = false; - this.$reqPost('saveFleet', this.addGroupForm, 'params').then(res => { - if (res.code == 0) { - this.$u.toast('娣诲姞鎴愬姛'); - this.getFleet(); - } - }); - }, - // 鍒犻櫎杞﹂槦 - deleteFleetClick(args) { - console.log(args.name, '杞﹂槦id'); - this.deleteFleetId = args.name; - this.deleteFleetShow = true; - this.fleetData.forEach(item => { - if (item.id == this.deleteFleetId) { - this.deleteFleetContent = '纭鍒犻櫎杞﹂槦' + item.name; - } - }); - }, - deleteFleetClose() { - this.deleteFleetShow = false; - }, - deleteFleetCancel() { - this.deleteFleetShow = false; - }, - deleteFleetConfirm() { - this.deleteFleetShow = false; - uni.showLoading({ - title: '鍔犺浇涓�...' - }); - this.$reqPost('deleteFleet', { id: this.deleteFleetId }, 'params').then(res => { - console.log('鍒犻櫎杞﹂槦', res); - if (res.code == 0) { - this.$u.toast('鍒犻櫎鎴愬姛'); - } else { - this.$u.toast(res.msg ? res.msg : '鍒犻櫎澶辫触'); - } - uni.hideLoading(); + methods: { + init() { this.getFleet(); - }); - }, - // 杞﹂槦璇︽儏 - tofleetDetails(id) { - uni.navigateTo({ - url: `/pages/customer-page/fleet-management/fleet-management?id=${id}` - }); - }, - logout() { - this.logoutShow = true; - }, - logoutConfirm() { - redirectLogin(); - }, - logoutCancel() { - this.logoutShow = false; - }, - // 璺宠浆鍙戣繍缁熻椤甸潰 - statistics() { - uni.navigateTo({ - url: '/pages/customer-page/customer-my/faYunstatistics/faYunstatistics' - }); + }, + // 鑾峰彇杞﹂槦 + getFleet() { + // this.$reqGet('getFleet', { wxUserId: this.addGroupForm.wxUserId }).then(res => { + this.$reqGet('getFleet').then(res => { + console.log('璐т唬1杞﹂槦', res); + this.fleetData = res.data; + }); + }, + // 娣诲姞杞﹂槦 + addFleet() { + console.log('娣诲姞杞﹂槦'); + this.updateGroupShow = true; + }, + addNewFleetPopupClose() { + this.updateGroupShow = false; + this.addGroupForm.name = ''; + }, + addNewFleetPopupOpen() { + console.log('娣诲姞杞﹂槦鎵撳紑'); + }, + // 纭鏂板缓杞﹂槦鎸夐挳 + addNewGroupClick() { + this.updateGroupShow = false; + this.$reqPost('saveFleet', this.addGroupForm, 'params').then(res => { + if (res.code == 0) { + this.$u.toast('娣诲姞鎴愬姛'); + this.getFleet(); + } + }); + }, + // 鍒犻櫎杞﹂槦 + deleteFleetClick(args) { + console.log(args.name, '杞﹂槦id'); + this.deleteFleetId = args.name; + this.deleteFleetShow = true; + this.fleetData.forEach(item => { + if (item.id == this.deleteFleetId) { + this.deleteFleetContent = '纭鍒犻櫎杞﹂槦' + item.name; + } + }); + }, + deleteFleetClose() { + this.deleteFleetShow = false; + }, + deleteFleetCancel() { + this.deleteFleetShow = false; + }, + deleteFleetConfirm() { + this.deleteFleetShow = false; + uni.showLoading({ + title: '鍔犺浇涓�...' + }); + this.$reqPost('deleteFleet', { id: this.deleteFleetId }, 'params').then(res => { + console.log('鍒犻櫎杞﹂槦', res); + if (res.code == 0) { + this.$u.toast('鍒犻櫎鎴愬姛'); + } else { + this.$u.toast(res.msg ? res.msg : '鍒犻櫎澶辫触'); + } + uni.hideLoading(); + this.getFleet(); + }); + }, + // 杞﹂槦璇︽儏 + tofleetDetails(id) { + uni.navigateTo({ + url: `/pages/customer-page/fleet-management/fleet-management?id=${id}` + }); + }, + logout() { + this.logoutShow = true; + }, + logoutConfirm() { + redirectLogin(); + this.$store.commit('changeisLogin', false) + this.$store.dispatch('websocketOnClose') + }, + logoutCancel() { + this.logoutShow = false; + }, + // 璺宠浆鍙戣繍缁熻椤甸潰 + statistics() { + uni.navigateTo({ + url: '/pages/customer-page/customer-my/faYunstatistics/faYunstatistics' + }); + } } - } -}; + }; </script> -<style lang="scss" scoped> -.statistics { - margin-top: vww(10); - margin-bottom: vww(10); -} -.utils-button { - margin-top: vww(35); - .utils { +<style lang="scss" + scoped> + .statistics { margin-top: vww(10); margin-bottom: vww(10); - /deep/ .u-button { - width: 631rpx; - height: 74rpx; - border: 2px solid #3b56eb; - background-color: #fff; - color: #3b56eb; - border-radius: 37rpx 37rpx 37rpx 37rpx; - } } -} -::v-deep.freightForwarder-my { - width: 100%; - margin: vww(90) auto; - .driver-banner { - width: 100%; - height: 430rpx; - background: linear-gradient(0deg, #ffffff 0%, #0055fe 100%); - background-size: contain; - position: fixed; - top: 0; - .navgation { - width: 80rpx; - height: 37rpx; - font-size: 40rpx; - font-weight: normal; - color: #ffffff; - line-height: 69rpx; - margin: vww(60) auto; - } - } - .personal-information { - width: 100%; - display: flex; - align-items: center; - justify-content: space-around; - flex-direction: column; - position: relative; - top: vww(20); - &-block { - width: 690rpx; - min-height: 478rpx; - background: #ffffff; - box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(73, 120, 240, 0.14), 0rpx 7rpx 45rpx 0rpx rgba(73, 120, 240, 0.12); - border-radius: 20rpx; - display: flex; - flex-direction: column; - justify-content: space-between; - margin-top: vww(8); - .block-main { - width: 636rpx; - margin: vww(10) vww(14); - } - } - } - // 鏂板缓杞﹂槦 - .addNewGroup { - .u-popup { - .u-popup__content { - width: 94%; - height: vww(160); - border-radius: 1%; - .title { - width: 100%; - text-align: center; - font-size: 20; - .u-text { - .u-text__value { - } - } - } - .addCarForm { - width: 80%; - margin: 0 auto vww(30); - } - .addCarButton { - width: 40%; - margin: 0 auto; - color: rgb(10, 108, 255); - } + + .utils-button { + margin-top: vww(35); + + .utils { + margin-top: vww(10); + margin-bottom: vww(10); + + /deep/ .u-button { + width: 631rpx; + height: 74rpx; + border: 2px solid #3b56eb; + background-color: #fff; + color: #3b56eb; + border-radius: 37rpx 37rpx 37rpx 37rpx; } } } - .fleet-container { - .fleet-list { - .u-swipe-action { - .u-swipe-action-item { - .u-swipe-action-item__right { - .u-swipe-action-item__right__button { - .u-swipe-action-item__right__button__wrapper { - background-color: #f56c6c !important; + ::v-deep.freightForwarder-my { + width: 100%; + margin: vww(90) auto; + + .driver-banner { + width: 100%; + height: 430rpx; + background: linear-gradient(0deg, #ffffff 0%, #0055fe 100%); + background-size: contain; + position: fixed; + top: 0; + + .navgation { + width: 80rpx; + height: 37rpx; + font-size: 40rpx; + font-weight: normal; + color: #ffffff; + line-height: 69rpx; + margin: vww(60) auto; + } + } + + .personal-information { + width: 100%; + display: flex; + align-items: center; + justify-content: space-around; + flex-direction: column; + position: relative; + top: vww(20); + + &-block { + width: 690rpx; + min-height: 478rpx; + background: #ffffff; + box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(73, 120, 240, 0.14), 0rpx 7rpx 45rpx 0rpx rgba(73, 120, 240, 0.12); + border-radius: 20rpx; + display: flex; + flex-direction: column; + justify-content: space-between; + margin-top: vww(8); + + .block-main { + width: 636rpx; + margin: vww(10) vww(14); + } + } + } + + // 鏂板缓杞﹂槦 + .addNewGroup { + .u-popup { + .u-popup__content { + width: 94%; + height: vww(160); + border-radius: 1%; + + .title { + width: 100%; + text-align: center; + font-size: 20; + + .u-text { + .u-text__value {} + } + } + + .addCarForm { + width: 80%; + margin: 0 auto vww(30); + } + + .addCarButton { + width: 40%; + margin: 0 auto; + color: rgb(10, 108, 255); + } + } + } + } + + .fleet-container { + .fleet-list { + .u-swipe-action { + .u-swipe-action-item { + .u-swipe-action-item__right { + .u-swipe-action-item__right__button { + .u-swipe-action-item__right__button__wrapper { + background-color: #f56c6c !important; + } } } } @@ -307,5 +349,4 @@ } } } -} -</style> +</style> \ No newline at end of file diff --git a/pages/tabbar-page/index-tabbar/index-tabbar.vue b/pages/tabbar-page/index-tabbar/index-tabbar.vue index 7fe7a38..f99df1d 100644 --- a/pages/tabbar-page/index-tabbar/index-tabbar.vue +++ b/pages/tabbar-page/index-tabbar/index-tabbar.vue @@ -171,11 +171,11 @@ }, onShow() { this.init(); - console.log(this.globalisconnect); if (this.globalisconnect) { this.$store.dispatch('websocketInit') this.changeisconnect(false) - console.log(this.globalisconnect, 'index鐨剋s蹇冧簨鈥�'); + this.$store.commit('changeisLogin', true) + console.log(this.globalisconnect, 'index鐨剋s鏁版嵁'); } this.userAuthorization(); this.messageReq(); diff --git a/store/index.js b/store/index.js index 1ce1db3..dff5e8e 100644 --- a/store/index.js +++ b/store/index.js @@ -78,6 +78,9 @@ socketTask: null, websocketData: null, // 瀛樻斁浠庡悗绔帴鏀跺埌鐨剋ebsocket鏁版嵁 globalIntervalId: null, + is_open_socket: false, //閬垮厤閲嶅杩炴帴 + connectNum: 1, //閲嶈繛娆℃暟, + reconnectTimeOut: null }, mutations: { lengthchange(state, payload) { @@ -131,7 +134,19 @@ }, setWebsocketData(state, data) { state.websocketData = data - } + }, + // 鏀瑰彉閲嶈繛鐘舵�� + changereconnectState(state, payload) { + state.is_open_socket = payload + }, + // 鏀瑰彉閲嶈繛娆℃暟 + changereconnectNum(state, payload) { + if (state.connectNum < 6) { + state.connectNum += payload + } else { + state.connectNum = payload + } + }, }, actions: { websocketInit({ state, dispatch, commit }) { @@ -139,20 +154,29 @@ state.socketTast = uni.connectSocket({ url: wsUrl, header: { CLIENT_TOC: 'Y' }, - complete: res => { - console.log(res, 'socket缁撴灉') + success: res => { + console.log(res, 'socketSuccess') if (res.errMsg === 'connectSocket:ok') { commit('changeisconnect', true) + commit('changereconnectState', true) } + }, + fail: res => { + console.log(res, 'socketFail') + console.log('ws澶辫触'); + commit('changereconnectState', false) + dispatch('reconnect') } }) state.socketTast.onOpen(() => dispatch('websocketOnOpen')) state.socketTast.onMessage(result => dispatch('websocketOnMessage', result.data)) state.socketTast.onClose(e => dispatch('websocketOnClose', e)) - state.socketTast.onError(e => dispatch('websocketOnError')) + state.socketTast.onError(e => dispatch('websocketOnError', e)) }, websocketOnOpen({ state, commit }) { - console.log('onOpen') + console.log('ws鎵撳紑') + clearInterval(state.reconnectTimeOut) + clearInterval(state.globalIntervalId) state.globalIntervalId = setInterval(() => { state.socketTast.send({ data: JSON.stringify({ type: 'ping' }), @@ -162,19 +186,70 @@ }) }, 30000) }, - websocketOnClose({ state, commit }) { + websocketOnClose({ state, commit, dispatch }, e) { if (!state.socketTast) return + console.log('ws鍏抽棴', e) state.socketTast.close(e => { commit('changeisconnect', false) }) - console.log('ws鍏抽棴') + clearInterval(state.globalIntervalId) + clearInterval(state.reconnectTimeOut) + state.socketTast = null + commit('changereconnectState', false) + if (state.connectNum < 6 && state.globalisLogin) { + uni.showToast({ + title: `杩炴帴澶辫触锛屾鍦ㄥ皾璇曠${state.connectNum}娆¤繛鎺, + icon: 'none' + }) + commit('changereconnectNum', 1) + dispatch('reconnect') + } else if (state.connectNum > 6 && state.globalisLogin) { + commit('changereconnectNum', 1) + uni.showToast({ + title: '缃戠粶寮傚父,璇风◢鍚庨噸璇�', + icon: 'none' + }) + } else { + return + } }, - websocketOnError(e) { - console.log('socket鎶ラ敊', e) + websocketOnError({ state, commit, dispatch }, e) { + // 濡傛灉閲嶈繛鐘舵�佷负false鍒欎笉杩涜閲嶈繛锛屼负true鎵嶄細 + console.log('ws鎶ラ敊', e) + clearInterval(state.globalIntervalId) + clearInterval(state.reconnectTimeOut) + state.socketTast = null + commit('changereconnectState', false) + if (state.connectNum < 6 && state.globalisLogin) { + uni.showToast({ + title: `杩炴帴澶辫触锛屾鍦ㄥ皾璇曠${state.connectNum}娆¤繛鎺, + icon: 'none' + }) + commit('changereconnectNum', 1) + dispatch('reconnect') + } else if (state.connectNum > 6 && state.globalisLogin) { + commit('changereconnectNum', 1) + uni.showToast({ + title: '缃戠粶寮傚父,璇风◢鍚庨噸璇�', + icon: 'none' + }) + } else { + return + } }, // 鎺ユ敹鏁版嵁 websocketOnMessage({ state, commit }, result) { commit('setWebsocketData', result) + }, + // 閲嶆柊杩炴帴 + reconnect({ state, commit, dispatch }) { + console.log(state.is_open_socket, '閲嶆柊杩炴帴socket鐘舵��'); + clearInterval(state.globalIntervalId) + if (!state.is_open_socket && state.globalisLogin) { + state.reconnectTimeOut = setInterval(() => { + dispatch('websocketInit') + }, 5000) + } } } }) -- Gitblit v1.9.1