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

前言

目前在 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，动手试试～

环信web sdk下载:https://www.easemob.com/download/im

注册环信：https://console.easemob.com/user/register