From 9c4e9cb9181022526af870ad4fa3a80dbfa4cc53 Mon Sep 17 00:00:00 2001 From: yj <1336058017@qq.com> Date: Mon, 24 Feb 2025 14:34:14 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/meeting/index.scss | 2 +- pages/meeting/index.ts | 289 +++++++++++++++++++-------------------- pages/meeting/index.wxml | 12 +- utils/agora.ts | 17 ++- 4 files changed, 154 insertions(+), 166 deletions(-) diff --git a/pages/meeting/index.scss b/pages/meeting/index.scss index b291836..bf901b6 100644 --- a/pages/meeting/index.scss +++ b/pages/meeting/index.scss @@ -10,7 +10,7 @@ border-radius: 4rpx; padding: 2rpx; bottom: 4rpx; - width: calc(100% - 12rpx); + max-width: calc(100% - 12rpx); box-sizing: border-box; &-view { diff --git a/pages/meeting/index.ts b/pages/meeting/index.ts index 8d30734..c2866b8 100644 --- a/pages/meeting/index.ts +++ b/pages/meeting/index.ts @@ -9,7 +9,6 @@ import dayjs from 'dayjs'; const computedBehavior = require('miniprogram-computed').behavior; let reconnectTime = "" as any; let refreshTime = "" as any; -let isReconnecTimeSetTimeout = "" as any; let isAutoApplySpeakTime = "" as any; Page({ behaviors: [computedBehavior], @@ -104,9 +103,9 @@ Page({ isFirstShow: true, isCurrePage: true, isReconnec: false, - isReconnecTime: false, isAutoApplySpeakDialog: false, showScroll: false, + reconnecNumber: 0 }, watch: { 'roomUserList.**': function (roomUserList) { @@ -173,31 +172,9 @@ Page({ }, 10000); } }, - 'isReconnecTime': function (isReconnecTime) { - if (isReconnecTime) { - isReconnecTimeSetTimeout = setTimeout(() => { - clearTimeout(isReconnecTimeSetTimeout) - this.setData({ - isReconnec: true, - isReconnecTime: false, - }) - isReconnecTimeSetTimeout = '' - wx.hideLoading() - }, 10000) - } else { - if (isReconnecTimeSetTimeout) { - clearTimeout(isReconnecTimeSetTimeout) - isReconnecTimeSetTimeout = '' - wx.hideLoading() - } - } - }, 'isCurrePage': function (isCurrePage) { if (isCurrePage) { - if (refreshTime) { - clearInterval(refreshTime) - refreshTime = '' - } + this.clearTimer() } else { refreshTime = setInterval(() => { GetRoomUser(this.data.channelId).then(res => { @@ -213,8 +190,6 @@ Page({ }); this.changeAgoraDevice() } - }).catch(() => { - this.setIsConnectedBack() }) }, 1000 * 30) } @@ -293,7 +268,7 @@ Page({ onReady() { wx.onNetworkStatusChange(this.listener) }, - onShow() { + async onShow() { wx.setKeepScreenOn({ keepScreenOn: true, }); @@ -305,83 +280,105 @@ Page({ isFirstShow: false, }) } else { - const item = this.data.roomUserList.find(row => row.uid === this.data.user.uid) - if (item && !item.isRoomManager) { - wx.showLoading({ - title: '重连中', - mask: true - }) - this.setData({ - isReconnecTime: true, - }) - agora.destroy(() => { - reconnectTime = setInterval(() => { - if (getSignIr() === signalR.HubConnectionState.Connected) { - this.reconnecFun() - clearInterval(reconnectTime) + this.reconnecFun() + } + }, + // 隐藏 + onHide() { + this.setData({ + isCurrePage: true, + }) + this.clearTimer() + }, + // 卸载 + onUnload() { + wx.offNetworkStatusChange(this.listener) + this.clearTimer() + }, + async reconnecFun() { + wx.hideLoading() + wx.showLoading({ + title: '重连中', + mask: true + }) + if (reconnectTime) { + clearTimeout(reconnectTime) + reconnectTime = '' + } + agora.destroy(() => { + this.startReconnec() + reconnectTime = setInterval(() => { + this.startReconnec() + }, 3000) + }) + }, + async startReconnec() { + if (getSignIr() === signalR.HubConnectionState.Connected) { + await GetRoomRtcToken(this.data.channelId).then(res => { + if (res.code === 200) { + agora.reconnecSetOption(res.data, async (bool) => { + if (bool) { + await this.joinChannel() + this.startClientEvent() + this.startSignalr() + await this.getRoomUser() + await this.getShowUser() + Message.success({ + context: this, + offset: [20, 32], + duration: 3000, + content: '重连成功', + }); + clearTimeout(reconnectTime) reconnectTime = '' + this.setData({ + isReconnec: false + }) + } else { + this.setData({ + isReconnec: true + }) } - }, 2000) + wx.hideLoading() + }) + } else { + wx.hideLoading() + this.setData({ + isReconnec: true + }) + } + }).catch(() => { + wx.hideLoading() + this.setData({ + isReconnec: true }) + }) + } else { + if (this.data.reconnecNumber > 10) { + this.setIsConnectedBack() } else { this.setData({ - currentUser: '', - currentUid: '' - }, () => { - this.getShowUser() + reconnecNumber: this.data.reconnecNumber + 1 }) } } }, - onHide() { - this.setData({ - isCurrePage: true, - isReconnecTime: false - }) - if (reconnectTime) { - clearInterval(reconnectTime) - reconnectTime = '' - } - if (isReconnecTimeSetTimeout) { - clearInterval(isReconnecTimeSetTimeout) - isReconnecTimeSetTimeout = '' - } + // 清除定时器 + clearTimer() { if (refreshTime) { clearInterval(refreshTime) refreshTime = '' } - }, - onUnload() { - wx.offNetworkStatusChange(this.listener) if (reconnectTime) { clearInterval(reconnectTime) reconnectTime = '' } - if (isReconnecTimeSetTimeout) { - clearInterval(isReconnecTimeSetTimeout) - isReconnecTimeSetTimeout = '' - } - if (refreshTime) { - clearInterval(refreshTime) - refreshTime = '' - } if (isAutoApplySpeakTime) { clearTimeout(isAutoApplySpeakTime) isAutoApplySpeakTime = '' } }, - setIsConnectedBack() { - wx.setStorage({ - key: "isConnected", - data: true - }) - wx.disableAlertBeforeUnload({ - complete: () => { - onStop() - wx.navigateBack() - } - }) - }, + // 显示聊天输入框 showInputPopup() { this.setData({ inputPopupVisible: true, @@ -389,6 +386,7 @@ Page({ chatPopupVisible: false }) }, + // 隐藏聊天输入框 hideInputPopup() { this.setData({ inputPopupVisible: false, @@ -396,6 +394,7 @@ Page({ chatPopupVisible: true }) }, + // 申请发言提示框 confirmIsAutoApplySpeakDialog() { if (!this.data.isClicked) { GetApplySpeak(this.data.channelId).then(res => { @@ -417,53 +416,15 @@ Page({ this.message('申请太频繁了，请稍后重试！').error(); } }, + // 关闭发言断开弹窗 cancelIsAutoApplySpeakDialog() { this.setData({ isAutoApplySpeakDialog: false }) }, - async reconnecFun() { - offSignalr() - await GetRoomRtcToken(this.data.channelId).then(res => { - if (res.code === 200) { - agora.reconnecSetOption(res.data, async (bool) => { - if (bool) { - await this.joinChannel() - this.startClientEvent() - this.startSignalr() - await this.getRoomUser() - await this.getShowUser() - Message.success({ - context: this, - offset: [20, 32], - duration: 3000, - content: '重连成功', - }); - this.setData({ - isReconnecTime: false, - isReconnec: false - }) - } else { - this.setData({ - isReconnec: true - }) - } - wx.hideLoading() - }) - } else { - wx.hideLoading() - this.setData({ - isReconnec: true - }) - } - }).catch(() => { - wx.hideLoading() - this.setData({ - isReconnec: true - }) - }) - }, + // socket监听 startSignalr() { + offSignalr() onSignalr(async (item) => { if (this.data.isCurrePage) { const item = this.data.roomUserList.find(row => row.uid === this.data.user.uid) @@ -496,12 +457,7 @@ Page({ key: "isAllLeave", data: true }) - wx.disableAlertBeforeUnload({ - complete: () => { - onStop() - wx.navigateBack() - } - }) + this.closeRoom() break; // 移出会议 case 'ForceExitRoom': @@ -509,12 +465,7 @@ Page({ key: "isForceExitRoom", data: true }) - wx.disableAlertBeforeUnload({ - complete: () => { - onStop() - wx.navigateBack() - } - }) + this.closeRoom() break; // 更新视图模式 case 'RefreshView': @@ -675,6 +626,7 @@ Page({ } }) }, + // 声网监听 startClientEvent() { agora.clientEvent({ streamAdded: async (url: string, uid: number | string) => { @@ -722,10 +674,11 @@ Page({ } }, error: (e) => { - this.setIsConnectedBack() + this.reconnecFun() }, }) }, + // 获取房间用户 async getRoomUser(): Promise { await GetRoomUser(this.data.channelId).then(res => { if (res.code === 200) { @@ -740,6 +693,7 @@ Page({ } }) }, + // 成员显示用户名称 showMultiText(e) { Toast({ context: this, @@ -747,6 +701,7 @@ Page({ message: e.currentTarget.dataset.item.userName, }); }, + // 查看全员观看 async getShowUser(): Promise { await GetShowUser(this.data.channelId).then(async (res) => { if (res.code === 200 && res.data) { @@ -756,6 +711,7 @@ Page({ } }) }, + // 首次获取用户信息 async getRoomInfo(): Promise { await GetRoomInfo(this.data.channelId).then(async (res) => { if (res.code === 200) { @@ -765,14 +721,26 @@ Page({ } }) }, + // 加入房间 async joinChannel(): Promise { + const item = this.data.roomUserList.find(row => row.uid === this.data.user.uid) await onInvoke('joinChannel', { roomNum: this.data.channelId, enableMicr: this.data.footerList[1].active, enableCamera: this.data.footerList[2].active, + isRoomManager: item ? item.isRoomManager : false, }) - await agora.joinChannel() + agora.joinChannel(item ? item.isRoomManager : false, (url: string) => { + const roomUserListTemp = [...this.data.roomUserList] + const itemUser = roomUserListTemp.find(row => row.uid == this.data.user.uid) + itemUser.src = url + this.setData({ + roomUserList: roomUserListTemp, + }) + }) + this.changeAgoraDevice() }, + // 用户数据组装 async setAllUserListData(key: string, item: any, callBack?: Function): Promise { const { roomUserList } = this.data; const userInfo: any = await getStorage('user') @@ -858,6 +826,7 @@ Page({ } this.changeAgoraDevice() }, + // 点击底部按钮 async changeFooterList(e): Promise { const userInfo: any = await getStorage('user') const { index } = e.currentTarget.dataset; @@ -960,6 +929,7 @@ Page({ break; } }, + // 开关摄像头 async postOpenMicrApi(enableMicr: boolean, uid: string, isAll: boolean, isMessage: boolean = false): Promise { if (isAll) { await PostMuteAll({ @@ -986,6 +956,7 @@ Page({ this.message('操作成功').success() } }, + // 开关摄像头 async postOpenCameraApi(enableCamera: boolean, uid: string, isMessage: boolean = false): Promise { if (enableCamera) { // await agora.startCameraCapture() @@ -1010,6 +981,7 @@ Page({ this.message('操作成功').success() } }, + // 关闭弹窗 async closeDialog(e) { const { type } = e.currentTarget.dataset; switch (e.type) { @@ -1029,7 +1001,6 @@ Page({ case "leaveDialog": wx.disableAlertBeforeUnload({ complete: () => { - onStop() wx.navigateBack() } }) @@ -1043,12 +1014,7 @@ Page({ break; } }, - playerStateChange(e) { - - }, - recorderStateChange(e) { - - }, + // 音量提示 playerAudioVolumenotify(e) { const { uid } = e.currentTarget.dataset; const { volume } = e.detail; @@ -1063,12 +1029,14 @@ Page({ userVolume: audioListTemp.find(row => row.uid == this.data.user.uid).volume }) }, + // 切换视频 clickChangeVideo(e) { const { item } = e.currentTarget.dataset; this.setData({ currentUid: item.uid }) }, + // 悬浮提示 message(content: string) { return { success: () => { @@ -1089,6 +1057,7 @@ Page({ } } }, + // 获取当前用户在房间信息 async getUserRoomInfo(): Promise { const userInfo: any = await getStorage('user') return new Promise((resolve, _reject) => { @@ -1100,6 +1069,7 @@ Page({ } }) }, + // 更改数据 async changeAgoraDevice(): Promise { const userInfo: any = await getStorage('user') this.data.roomUserList.forEach(async (item: any) => { @@ -1118,27 +1088,32 @@ Page({ } }); }, + // 退出提示 async back() { this.setData({ leaveDialog: true }) }, + // 关闭聊天和成员 onVisibleChange() { this.setData({ userPopupVisible: false, chatPopupVisible: false, }) }, + // 聊天内容输入框赋值 changeMessageStr(e) { this.setData({ messageStr: e.detail.value }) }, + // 聊天内容输入框赋值 changeInputStr(e) { this.setData({ inputStr: e.detail.value }) }, + // 聊天发送 async sendMeg(e) { if (this.data.messageStr || e.target.dataset.item) { await onInvoke('sendChannelMsg', { @@ -1164,11 +1139,13 @@ Page({ this.message('请输入文字！').error() } }, + // 全屏切换 changeFullscreen() { this.setData({ isFullscreen: !this.data.isFullscreen }) }, + // 聊天框位置滚动 scrollToBottom() { wx.createSelectorQuery() .select('#chatView') @@ -1180,27 +1157,38 @@ Page({ }) }) }, + // 断网退出房间 + setIsConnectedBack() { + wx.setStorage({ + key: "isConnected", + data: true + }) + wx.disableAlertBeforeUnload({ + complete: () => { + wx.navigateBack() + } + }) + }, + // 监听网络变化 async listener(res) { if (res.isConnected && (res.networkType !== 'none' || res.networkType !== 'unknown')) { } else { - this.setIsConnectedBack() + } }, + // 重连失败退出房间 closeRoom() { wx.disableAlertBeforeUnload({ complete: () => { this.setData({ isReconnec: false }) - onStop() wx.navigateBack() } }) }, - scroll() { - - }, + // 上箭头滚动 scrollUp() { const query = wx.createSelectorQuery() query.select('#meeting-content-smallvideo').scrollOffset((res => { @@ -1210,6 +1198,7 @@ Page({ })) query.exec() }, + // 下箭头滚动 scrollDown() { const query = wx.createSelectorQuery() query.select('#meeting-content-smallvideo').scrollOffset((res => { diff --git a/pages/meeting/index.wxml b/pages/meeting/index.wxml index 93ed59d..ced636b 100644 --- a/pages/meeting/index.wxml +++ b/pages/meeting/index.wxml @@ -16,10 +16,10 @@ - + - + @@ -29,7 +29,7 @@ {{currentUser.userName}} - + @@ -38,8 +38,8 @@ - - + + @@ -146,4 +146,4 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/utils/agora.ts b/utils/agora.ts index 8567689..7cb73f9 100644 --- a/utils/agora.ts +++ b/utils/agora.ts @@ -22,13 +22,10 @@ export const agora = { destroy: async (callback?) => { if (client) { await client.leave() - await client.destroy(() => { - callback?.() - client = ''; - }) - } else { - callback?.() + await client.destroy() + client = ''; } + callback?.() }, // 设置角色 setRole: async (isRoomManager: boolean, callBack?: Function) => { @@ -54,9 +51,11 @@ export const agora = { await agora.init(callback) }, // 加入频道 - joinChannel: () => { - client.join(option.token, option.channelId, option.uid, () => { - agora.setRole(false) + joinChannel: async (roleStatus: boolean, callBack: Function) => { + await client.join(option.token, option.channelId, option.uid, () => { + agora.setRole(roleStatus, (url) => { + callBack(url) + }) }) }, // 刷新token