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后执行,是保守做法
  6. 在communication.vue中通过inject引入getSipRef()方法

    复制代码
       const getSipRef = inject('sipRef')
       //生命sipRef,在挂载时赋值
       const sipRef = ref<ElRef>();
  7. 在communication.vue中,onMounted期间,进行sipRef赋值,在该routeview中就可以使用sip.vue中所有的内容了

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

结束

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

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

相关推荐
ldj202010 天前
vue3整合element-plus
vue3
夜空孤狼啸15 天前
前端常用拖拽组件库(vue3、react、vue2)
前端·javascript·react.js·typescript·前端框架·vue3
sunshine_程序媛15 天前
vue3中的watch和watchEffect区别以及demo示例
前端·javascript·vue.js·vue3
meng半颗糖17 天前
vue3 双容器自动扩展布局 根据 内容的多少 动态定义宽度
前端·javascript·css·vue.js·elementui·vue3
3D虚拟工厂17 天前
3D虚拟工厂
3d·vue3·blender·数字孪生·three.js
霸王蟹20 天前
前端项目Excel数据导出同时出现中英文表头错乱情况解决方案。
笔记·学习·typescript·excel·vue3·react·vite
佚名猫24 天前
vue3+vite+pnpm项目 使用monaco-editor常见问题
前端·vue3·vite·monacoeditor
技术闲聊DD1 个月前
Vue3学习(4)- computed的使用
vue3·computed
蓝胖子的多啦A梦1 个月前
Vue3 (数组push数据报错) 解决Cannot read property ‘push‘ of null报错问题
前端·vue3·push·数组数据
有梦想的攻城狮1 个月前
从0开始学vue:vue3和vue2的关系
前端·javascript·vue.js·vue3·vue2