完善call呼叫功能2

any-hooks/common/useSocket.ts

@@ -29,9 +29,9 @@ export function useSocket<S = any>() {
   }
 
   // 心跳链接  
-  const startHeartConnect = () => {
+  const startHeartConnect = (data?: any) => {
     const time = socketSettings.heartInterval;
-    setInterval( () => ws.send(socketSettings.heartData), time && time >= 3000 ? time : 5000 )    
+    setInterval( () => ws.send(data || socketSettings.heartData), time && time >= 3000 ? time : 5000 )    
   }
  
   // 重连功能
@@ -51,6 +51,7 @@ export function useSocket<S = any>() {
     currentMsg,
     status,
     connect,
+    startHeartConnect,
     send: ws.send,
     close: ws.close
   }

any-hooks/communication/useCallCenter.ts

@@ -19,7 +19,7 @@ export function useCallCenter() {
   
   /** 主动呼叫功能 */
   const [target, setTarget]             = useState<Caller>(null);
-  const [myCallState, setCallState]     = useState<CallingState>(null);  
+  const [myCallState, setCallState]     = useState<CallingState>('free');  
   const {currentChannel, createChannel, joinCallingChannel} = useInjector(useChannelStore);
   const callContact = (user: UserData) => {
     setTarget({...user, action: 'none'});      //保存呼叫目标的信息
@@ -51,10 +51,11 @@ export function useCallCenter() {
 
   /** 呼叫监听功能  */
   const [caller, setCaller] = useState<Caller>(null);  
-  // 监听来自其他用户的呼叫
+  // 监听来自其他用户的呼叫请求
   watch(currentMsg, msg => {
     if(msg.msgMainFlag !== 'CallOffer') return;
     if(myCallState.value !== 'free') answerCaller('Busying');
+    console.log(msg.msgSubFlag);
     setCaller({      
       id: currentMsg.value.fromID,
       nickname: currentMsg.value.fromName,  
@@ -71,21 +72,22 @@ export function useCallCenter() {
       break;
       case 'Busying':
       case 'Hangup':
+        console.log('对方拒绝呼叫请求')
         setCallState('free');
-        target.value.action = msg.msgSubFlag;
+        setTarget({...target.value, action: msg.msgSubFlag});       
       break; 
     }
   })  
 
   /** 呼叫挂断功能 */
-  const hangup = () => {
-    setCallState('free');
+  const hangup = () => {    
     sendMsg({      
       channelID: currentChannel.value.channel_id,
-      msgMainFlag: myCallState.value === 'call_successed' ? 'CallOffer' : 'CallAnswer',
+      msgMainFlag: myCallState.value === 'calling' ? 'CallOffer' : 'CallAnswer',
       msgSubFlag: 'Hangup',
       toID: myCallState.value === 'calling' ? target.value.id : caller.value.id
     })
+    setCallState('free');
   }
 
   return {

any-hooks/communication/useNetSocketCenter.ts

@@ -15,7 +15,7 @@ enum NetStates {
 export function useNetSocketCenter() {
   
   const { authData }                  = useInjector(useAuthData);  
-  const { connect, send, currentMsg } = useSocket<AnyRemoteSocketMessage>();
+  const { connect, send, currentMsg, startHeartConnect } = useSocket<AnyRemoteSocketMessage>();
   const [ netState, setNetState ]     = useState<NetStates>(0);
 
   watch(authData, data => {
@@ -23,6 +23,12 @@ export function useNetSocketCenter() {
     connect(
       `wss://www.if-ar.com:3009?fromID=${data.id}&fromName=${data.nickname}&signID=SA&companyID=${data.company_id}`
     )
+    startHeartConnect({
+      fromID: authData.value.id,
+      fromName: authData.value.nickname,
+      toID: '0',
+      msgMainFlag: 'Heart'
+    })
   })
 
   const sendMsg = (data: AnyRemoteSocketMessage) => {

src/hooks/call/useCallerListener.ts

-import { showModal } from "@tarojs/taro";
+import { navigateBack, navigateTo, redirectTo, showModal, showToast } from "@tarojs/taro";
 import { useCallCenter } from "any-hooks/communication/useCallCenter";
 import { watch } from "vue";
 import { useInjector } from "vue-vulcan";
@@ -6,15 +6,44 @@ import { useInjector } from "vue-vulcan";
 
 /** 在小程序平台监听远程联系人的呼叫动作 */
 export function useCallerListener() {
-  const { caller, answerCaller } = useInjector(useCallCenter);
+  const { caller, myCallState, answerCaller } = useInjector(useCallCenter);
 
-  watch(caller, value => {
-    if(caller) {
-      showModal({
-        title: `来自${value.nickname}的呼叫，是否接受?`,
-        success: () => answerCaller('Connect'),
-        fail: () => answerCaller('Hangup')
-      })
+  watch(caller, current => {        
+    switch(current.action) {
+      case 'Request':
+        showModal({
+          content: `来自${current.nickname}的呼叫，是否接受?`,
+          cancelText: '拒绝',
+          cancelColor: 'red',
+          confirmText: '接受',
+          success: res => {              
+            if(caller.value.action !== 'Request') return; //此次必须通过caller访问action值
+            res.confirm ? answerCaller('Connect') : answerCaller('Hangup');          
+          },        
+          fail: () => answerCaller('Hangup')
+        })
+      break;
+      case 'Hangup':          
+        showToast({title: '对方已取消呼叫,您可以关闭呼叫对话框', icon: 'none'});
+      break;
+    }  
+  })
+
+  // 根据用户的呼叫状态变化，执行相应的页面跳转逻辑
+  watch(myCallState, state => {
+    switch(state) {
+      case 'call_accepted':
+        navigateTo({url: '/pages/meeting/index'});
+      break;
+      case 'call_successed':    
+        redirectTo({url: '/pages/meeting/index'});
+      break;
+      case 'calling':
+        navigateTo({url: '/pages/calling/index'});
+      break;
+      case 'free':
+        navigateBack({delta: 2})
+      break;
     }
   })
 }
\ No newline at end of file

src/hooks/socket/useSocketSettings.ts

-import { useAuthData } from "any-hooks/auth/useAuthData";
+// import { useAuthData } from "any-hooks/auth/useAuthData";
 import { SOCKET_SETTINGS } from "any-hooks/communication/token";
 import { SocketSettings } from "any-hooks/types/socket";
-import { useInjector } from "vue-vulcan";
+// import { useInjector } from "vue-vulcan";
 
 export function useSocketSetting(): SocketSettings {
-  const { authData } = useInjector(useAuthData);
+  // const { authData } = useInjector(useAuthData);
 
   return {
-    heartData: {
-      msgMainFlag:"Heart", 
-      fromID: authData.value.id, 
-      fromName: authData.value.nickname,
-      toID: '0'
-    },
+    // heartData: {
+    //   msgMainFlag:"Heart", 
+    //   fromID: authData.value.id, 
+    //   fromName: authData.value.nickname,
+    //   toID: '0'
+    // },
     retryLimit: 10
   }
 }

src/pages/calling/index.config.ts

-export default {
-  navigationBarTitleText: '呼叫联系人',  
+export default {  
+  navigationStyle: 'custom'
 }

src/pages/calling/index.vue

 <script setup> 
   import { useInjector } from 'vue-vulcan';
-  import { computed, getCurrentInstance, onMounted } from 'vue';  
+  import { computed, getCurrentInstance, onMounted, watch } from 'vue';  
   import { useCallCenter } from 'any-hooks/communication/useCallCenter';
+  import { navigateBack, showToast } from '@tarojs/taro';
 
-  const { target } = useInjector(useCallCenter);
+  const { target, hangup } = useInjector(useCallCenter);
+
+  watch(target, val => {    
+    if(val.action === 'Hangup') {
+      showToast({
+        title: '对方拒绝了您的呼叫请求', 
+        icon: 'none'
+      });      
+    }
+  })  
    
 </script>
 
@@ -13,7 +23,7 @@
     <image class="avatar" :src="target?.avatar"></image>
     <text class="tips">正在呼叫{{target?.nickname}}...</text>
   </view>
-  <image class="hangup" src="../../assets/hangup.png"></image>
+  <image @tap="hangup()" class="hangup" src="../../assets/hangup.png"></image>
 </view>
 </template>
 

src/pages/index/index.vue

+<script setup lang="ts">
+  import { useInjector } from 'vue-vulcan';
+  import { useContacts } from '../../../any-hooks/contacts/useContacts';
+  import { useCallCenter } from 'any-hooks/communication/useCallCenter';
+
+  const { callContact } = useInjector(useCallCenter);
+  const { contacts }    = useContacts();
+</script>
+
 <template>
   <view class="index">
     <view class="contact-list">
@@ -7,28 +16,13 @@
           <view>{{item.nickname}}</view>
           <text>{{item.permission}}</text>
         </view>
-        <image @tap="call(item)" class="call" src="../../assets/call.png" />
+        <image @tap="callContact(item)" class="call" src="../../assets/call.png" />
       </view>
     </view>
   </view>
 </template>
 
-<script setup lang="ts">
-import { navigateTo } from '@tarojs/taro';
-import { useInjector } from 'vue-vulcan';
-import { useContacts } from '../../../any-hooks/contacts/useContacts';
-import { useCallCenter } from 'any-hooks/communication/useCallCenter';
-import { UserData } from 'any-hooks/types/user';
-
-const { callContact } = useInjector(useCallCenter);
 
-const call= (data: UserData) => {
-  callContact(data);
-  navigateTo({url: '/pages/calling/index'});
-}
-const { contacts } = useContacts()
-
-</script>
 
 <style lang="less">
   .contact-list{

src/pages/meeting/index.config.ts

+export default {
+  navigationBarTitleText: '通讯页'
+}