Vue3中，实现IP电话功能，要求在所有页面均可接收到来电，并进行通话——子组件和父组件共用一个组件

Vue3中，实现IP电话功能，要求在所有页面均可接收到来电，并进行通话——子组件和父组件共用一个组件

1. 需求是这样的

在项目中，有一个页面（communication.vue）用来提供IP电话通话功能，该页面显示通讯录，用户可以在通讯录中选择用户进行拨打电话，要求对方只要在登录成功的状态下，不论在首页还是哪个页面均可以接收到来电，并进行通话。

初始做法

1. 建了一个sip.vue，用来设计音频和视频dom，以及用到的计时器；
2. 建了一个sip.ts,用来做与sip.js承接的方法和来电提示框（用的ant-design的notification）；
3. 在sip.vue中，引入sip.ts，进行操作；
4. 直接在通讯录页面communication.vue中使用sip.vue；

初始结果

由于一开始对需求没有研究透，就开始着手做，所以最后的结果是，只有用户双方均在communication.vue界面时，才能接收到来电。
结果是，与需求不符，调整！！！

重新分析需求，规划设计

逐步分析

1. 用户登录后，进行IP电话的链接；这就需要登录成功后就要获取到sip.vue，并调用里面的connect()方法。
2. 无论在哪个页面，均能接收到来电提醒；这就需要在所有页面均保持与sip的websocket连接。
3. 接收到来电后，进行接通，显示语音视频框；这就需要在所有页面均可以使用sip.vue，展示其中的dom。

规划

1. 根据分析第一步可知，要在登录成功，获取到相关参数后才可以进行连接，所以需要确定所需参数获取结束的时机
2. 根据分析第二步可知，需要在最外层组件layout.vue中进行操作，如此不管在哪个routeview下，如何刷新，都可以进行新的连接，保证websocket时时保持连接状态。
3. 根据分析第三步可知，需要把sip.vue引到layout.vue中来，如此在最外层，可以保证所有routeview下均可以使用sip.vue的相关内容。

重新实现

基于已经实现的逻辑，不需要大改，只需要进行适当调整即可。

1. 将sip.vue引入到layout.vue中
2. 给SIP组件标记一个名字，ref=‘sipRef’，以便layout的子组件进行调用
3. 在layout.vue中，写一个方法，用来获取SIP组件

	  const sipRef = ref<ElRef>();
      const getSipRef = ()=>{
        return sipRef.value
      }

4. 通过provide和inject方法进行组件间通信，在layout.vue中将getSipRef()方法吐出去

	  import { defineComponent, computed, unref, ref, onMounted, provide } from 'vue'; //在script头部引入provide
	  provide('sipRef',getSipRef)

5. 在layout.vue中，onMounted期间，进行sip连接

	  onMounted(()=>{
	      setTimeout(()=>{
	        (sipRef.value as any)?.connect()
	       },300)
	    });
	    // 300ms后执行，是保守做法

7. 在communication.vue中通过inject引入getSipRef()方法

	  const getSipRef = inject('sipRef')
	  //生命sipRef，在挂载时赋值
	  const sipRef = ref<ElRef>();

9. 在communication.vue中，onMounted期间，进行sipRef赋值，在该routeview中就可以使用sip.vue中所有的内容了

(async function connect(){
    await nextTick();
    sipRef.value = getSipRef()
  })()

结束

通过上面9步调整，在communication.vue中，可以进行打电话，在所有页面可以接受来电，并进行通话。

如此解决方法可能不是很完善，欢迎小伙伴提供新思路