From 36f4016c05b351949f144a19955e1faaf3c0a89d Mon Sep 17 00:00:00 2001 From: tdg930622 <51816549+tdg930622@users.noreply.github.com> Date: Thu, 16 Jan 2025 11:28:06 +0800 Subject: [PATCH] =?UTF-8?q?=E8=A7=86=E9=A2=91=E8=81=94=E8=B0=83=EF=BC=8C?= =?UTF-8?q?=E4=BF=AE=E6=94=B9socket=E5=B8=B8=E9=93=BE=E6=8E=A5=EF=BC=8C?= =?UTF-8?q?=E8=A7=86=E9=A2=91=E6=88=BF=E9=97=B4bug=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.vue | 70 +++++++++------- src/assets/icons/svg/sound-on.svg | 12 +++ src/components/VoiceCallDialog.vue | 79 ++++++++++++++++++- src/pages/login/index.vue | 6 +- .../mediation-page/components/VideoRoom.vue | 22 +++++- src/store/index.js | 4 + src/utils/stompSocket.js | 2 + 7 files changed, 163 insertions(+), 32 deletions(-) create mode 100644 src/assets/icons/svg/sound-on.svg diff --git a/src/App.vue b/src/App.vue index 608debf..3e13771 100644 --- a/src/App.vue +++ b/src/App.vue @@ -21,14 +21,22 @@ export default { }, data(){ return { - acceptDialog: null,// id + acceptDialog: null, } }, mounted() { let token = sessionStorage.getItem('token') if (token){this.initVoiceCall();} + let brokerEndpoint = sessionStorage.getItem('brokerEndpoint') + if (brokerEndpoint){this.$stompSocket.initStomp(brokerEndpoint,a => this.socketSucc(a), b => this.socketErr(b));} }, methods: { + socketSucc(frame) { + console.log(frame, '---初始化成功app') + }, + socketErr(frame) { + console.log(frame, '---初始化失败app') + }, scriptWithDataSetExists(dataId) { const scriptElement = document.querySelector(`script[data-telephone="${dataId}"]`); return scriptElement !== null; @@ -57,33 +65,38 @@ export default { console.error('---初始化失败', message) }) - this.acceptDialog = { - "sessionId": "32cca051-dcae-4269-ae12-e8eca5e02146", - "calleePhoneNumber": "008605305343323", - "callerPhoneNumber": "008613882832314", - "protectedCallee": "008605305343323", - "protectedCaller": "008613882832314", - "ivrPath": [ - { - "key": "1", - "label": "分支内容1" - } - ], - "callerLocation": "四川达州移动", - "timeout": 30, - "type": "phone", - "serverType": "staffSeat", - "aiEnabled": false, - "id": "32cca051-dcae-4269-ae12-e8eca5e02146", - "phone": "008613882832314", - "direction": "0", - "startCallTime": 1736923493486 - }; + + // this.acceptDialog = { + // "sessionId": "32cca051-dcae-4269-ae12-e8eca5e02146", + // "calleePhoneNumber": "008605305343323", + // "callerPhoneNumber": "008613882832314", + // "protectedCallee": "008605305343323", + // "protectedCaller": "008613882832314", + // "ivrPath": [ + // { + // "key": "1", + // "label": "分支内容1" + // } + // ], + // "callerLocation": "四川达州移动", + // "timeout": 30, + // "type": "phone", + // "serverType": "staffSeat", + // "aiEnabled": false, + // "id": "32cca051-dcae-4269-ae12-e8eca5e02146", + // "phone": "008613882832314", + // "direction": "0", + // "startCallTime": 1736923493486 + // }; // 呼入事件 - window.tccc.on('callIn', (callback) => { - this.acceptDialog = callback; - // this.acceptID = callback.id; - console.log(callback, '---呼入') + window.tccc.on('callIn', (data) => { + this.acceptDialog = data; + // this.acceptID = data.id; + console.log(data, '---语音呼入') + }) + // 会话结束事件 + window.tccc.on('sessionEnded', (data) => { + console.log(data, '---语音会话结束') }) }) }, @@ -113,6 +126,9 @@ export default { } } } + }, + beforeDestroy() { + this.$stompSocket.deactivate(); } }; diff --git a/src/assets/icons/svg/sound-on.svg b/src/assets/icons/svg/sound-on.svg new file mode 100644 index 0000000..7f78895 --- /dev/null +++ b/src/assets/icons/svg/sound-on.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/components/VoiceCallDialog.vue b/src/components/VoiceCallDialog.vue index d5c8636..7f21718 100644 --- a/src/components/VoiceCallDialog.vue +++ b/src/components/VoiceCallDialog.vue @@ -1,5 +1,22 @@ \ No newline at end of file diff --git a/src/pages/login/index.vue b/src/pages/login/index.vue index ed906b5..de59d34 100644 --- a/src/pages/login/index.vue +++ b/src/pages/login/index.vue @@ -176,6 +176,8 @@ export default { sessionStorage.setItem('userInfo', JSON.stringify(res.user)) this.$store.commit('setUserInfo', res.user) + sessionStorage.setItem('brokerEndpoint', res.brokerEndpoint) + this.$store.commit('setBrokerEndpoint', res.brokerEndpoint) let socketUrl = res.brokerEndpoint ? res.brokerEndpoint : `wss://mediate.dev.trydotec.com/mediate/ws/websocket`; this.$stompSocket.initStomp(socketUrl,a => this.socketSucc(a), b => this.socketErr(b)); if (res.user.resources.length > 0) { @@ -297,10 +299,10 @@ export default { }, socketSucc(frame) { - console.log(frame, '---初始化成功!!!') + console.log(frame, '---初始化成功login') }, socketErr(frame) { - console.log(frame, '---初始化失败!!!') + console.log(frame, '---初始化失败login') } } } diff --git a/src/pages/mediation-page/components/VideoRoom.vue b/src/pages/mediation-page/components/VideoRoom.vue index 6266a82..216bfb3 100644 --- a/src/pages/mediation-page/components/VideoRoom.vue +++ b/src/pages/mediation-page/components/VideoRoom.vue @@ -28,7 +28,7 @@
- +
@@ -389,6 +389,16 @@ export default { microphone: false } }) + }else { + this.remoteUsersViews = this.remoteUsersViews.map(item => { + if (item.userId == userId){ + item.microphone = false; + return { + ...item, + microphone: false + } + } + }) } let json = {behavior: 'offAudio', userId: userId} let data = { @@ -426,6 +436,16 @@ export default { microphone: true } }) + }else { + this.remoteUsersViews = this.remoteUsersViews.map(item => { + if (item.userId == userId){ + item.microphone = true; + return { + ...item, + microphone: true + } + } + }) } let json = {behavior: 'onAudio', userId: userId} diff --git a/src/store/index.js b/src/store/index.js index 4dd452f..102e659 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -24,6 +24,7 @@ const store = new Vuex.Store({ userinfo: {}, idFrontPath: '', routes: [], // 从后端获取的路由菜单 + brokerEndpoint: '', }, plugins: [vuexPersisted], // 全局同步方法, 调用方法,this.$store.commit("xxx",'赋值数据') @@ -40,6 +41,9 @@ const store = new Vuex.Store({ setUserInfo(state, data) { state.userinfo = data; }, + setBrokerEndpoint(state, data) { + state.brokerEndpoint = data; + }, }, // 异步方法 调用方法,this.$store.dispatch("xxx") diff --git a/src/utils/stompSocket.js b/src/utils/stompSocket.js index 59ab830..aea742c 100644 --- a/src/utils/stompSocket.js +++ b/src/utils/stompSocket.js @@ -33,7 +33,9 @@ const socketClass = { // body: 'Hello world', // headers: { priority: '9' }, // } + // console.log(data, '---发起消息111') if (!client)return; + // console.log(data, '---发起消息222') client.publish(data); }, // 订阅