Vue3+TypeScript 如何以 Plugins 形式引入环信 WebSDK？

Posted 2023-03-14 环信即时通讯云

前言

目前在 Vue3 中一般在实例化环信 SDK 后，通常哪个文件需要就在当前文件中引入实例话后的 SDK 即可，类似这样的代码。

//实例化后导出
import EC,  EasemobChat  from 'easemob-websdk';
let EaseClient = new EC.connection(
  appKey: "YOUR_APP_KEY",
);

export  EaseClient, EC, EasemobChat ;
//使用时引入
<script setup lang="ts">
import  reactive  from 'vue';
import  EaseClient  from '@/EaseIM';

const loginEaseIMFrom = reactive(
  username: '',
  password: '',
);
//登录IM
const loginEaseIM = async () => 
  try 
    let  accessToken  = await EaseClient.open(
      user: loginEaseIMFrom.username,
      pwd: loginEaseIMFrom.password,
    );
    console.log('accessToken', accessToken);
   catch (error: any) 
    console.log('>>>>登录失败')
  
;
</script>

尽管这种形式完全可以满足开发需求，而且在 setup 语法糖中使用也很方便，但是如果真的要写一个 plugins 插件注册到全局中，那么我们该如何去编写呢？

step1

按照 Vue 官方文档插件编写规范，以此类格式将上面导出的EaseClient进行改造。

//文档插件编写格式
export default 
  install: (app, options) => 
    // 在这里编写插件代码
  ,
;

//改造后的格式
import type  App  from 'vue';
import EC,  EasemobChat  from 'easemob-websdk';
let EaseClient = new EC.connection(
  appKey: 'YOUR_APPKEY',
);
interface Options extends EaseIM.EasemobChat.ConnectionParameters 
  appKey: string;

export default 
  install: (app: App, options?: Options) => 
    //如果options下的appKey 不为你当前初始化的appKey,则重新实例化
    if (options.appKey !== 'YOUR_APPKEY') 
      EaseClient = new EC.connection(
        appKey: 'YOUR_APPKEY',
      );
    
    //在app.config.globalProperties上挂载EaseClient
    app.config.globalProperties.$EaseClient = EaseClient;
  ,
;

step2

改造后我们尝试像引入使用 element-plus 那样引入一下并使用 im 插件

import  createApp  from 'vue';
import EaseClient from '@/EaseIM/plugin';

app.use(EaseClient);
// mount
app.mount('#app');

step3

那么下一步我们应该如何在 vue 组件中进行使用呢？

非 setup 语法糖用法

<script lang="ts">
export default 
    //在mounted中使用是因为需要等组件加载完成后方可访问$EaseIM
  async mounted() 
   await this.$EaseClient.open(user:'test',pwd:'1');
  ,
  setup() 
    return ;
  ,
;
</script>

setup 语法糖使用

<script setup lang="ts">
//导入获取当前实例的方法
import  getCurrentInstance  from 'vue';
const instance = getCurrentInstance();
instance?.proxy?.$EaseClient.open( user: 'test', pwd: '1' );
</script>

但是我们会发现，在使用的时候 ts 类型检查告知，$EaseClient 并为找到此模块，更不用谈调用的时候能够有类型提示了。那针对这个问题我们该如何解决呢？让我们开始看下一步。

step4

其实这一步操作在 Vue 的官方文档 install 插件部分有相关描述，TypeScript 用户请参考：扩展全局属性。在这里我们只谈当前问题的解决方式，废话不多说上代码。

/*
 * 如果全局中没有类似，app.d.ts或其他命名的类型声明文件请创建。
 *紧接可以添加以下下类型声明
 */
import Vue from 'vue';
type EaseClient = EasemobChat.Connection;
export declare module '@vue/runtime-core' 
  interface ComponentCustomProperties 
    $EaseClient: EaseClient;
  

然后我们就可以开始组件中进行调用测试发现可以正常的使用，且带有类型提示了。

点此下载 环信Vue3 IM Demo，动手试试～