Vue3中，实现IP电话功能，要求在所有页面均可接收到来电，并进行通话——子组件和父组件共用一个组件
Vue3中，实现IP电话功能，要求在所有页面均可接收到来电，并进行通话——子组件和父组件共用一个组件
1. 需求是这样的
在项目中，有一个页面（communication.vue）用来提供IP电话通话功能，该页面显示通讯录，用户可以在通讯录中选择用户进行拨打电话，要求对方只要在登录成功的状态下，不论在首页还是哪个页面均可以接收到来电，并进行通话。
初始做法
- 建了一个sip.vue，用来设计音频和视频dom，以及用到的计时器；
- 建了一个sip.ts,用来做与sip.js承接的方法和来电提示框（用的ant-design的notification）；
- 在sip.vue中，引入sip.ts，进行操作；
- 直接在通讯录页面communication.vue中使用sip.vue；
初始结果
由于一开始对需求没有研究透，就开始着手做，所以最后的结果是，只有用户双方均在communication.vue界面时，才能接收到来电。
结果是，与需求不符，调整！！！
重新分析需求，规划设计
逐步分析
- 用户登录后，进行IP电话的链接；这就需要登录成功后就要获取到sip.vue，并调用里面的connect()方法。
- 无论在哪个页面，均能接收到来电提醒；这就需要在所有页面均保持与sip的websocket连接。
- 接收到来电后，进行接通，显示语音视频框；这就需要在所有页面均可以使用sip.vue，展示其中的dom。
规划
- 根据分析第一步可知，要在登录成功，获取到相关参数后才可以进行连接，所以需要确定所需参数获取结束的时机
- 根据分析第二步可知，需要在最外层组件layout.vue中进行操作，如此不管在哪个routeview下，如何刷新，都可以进行新的连接，保证websocket时时保持连接状态。
- 根据分析第三步可知，需要把sip.vue引到layout.vue中来，如此在最外层，可以保证所有routeview下均可以使用sip.vue的相关内容。
重新实现
基于已经实现的逻辑，不需要大改，只需要进行适当调整即可。
- 将sip.vue引入到layout.vue中
- 给SIP组件标记一个名字，ref=‘sipRef’，以便layout的子组件进行调用
- 在layout.vue中，写一个方法，用来获取SIP组件
const sipRef = ref<ElRef>();
const getSipRef = ()=>{
return sipRef.value
}
- 通过provide和inject方法进行组件间通信，在layout.vue中将getSipRef()方法吐出去
import { defineComponent, computed, unref, ref, onMounted, provide } from 'vue'; //在script头部引入provide
provide('sipRef',getSipRef)
- 在layout.vue中，onMounted期间，进行sip连接
onMounted(()=>{
setTimeout(()=>{
(sipRef.value as any)?.connect()
},300)
});
// 300ms后执行，是保守做法
- 在communication.vue中通过inject引入getSipRef()方法
const getSipRef = inject('sipRef')
//生命sipRef，在挂载时赋值
const sipRef = ref<ElRef>();
- 在communication.vue中，onMounted期间，进行sipRef赋值，在该routeview中就可以使用sip.vue中所有的内容了
(async function connect(){
await nextTick();
sipRef.value = getSipRef()
})()
结束
通过上面9步调整，在communication.vue中，可以进行打电话，在所有页面可以接受来电，并进行通话。
如此解决方法可能不是很完善，欢迎小伙伴提供新思路