序文
現在、Vue3 では、Huanxin 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>
この形式は開発ニーズを十分に満たしており、糖衣構文のセットアップで使用するのにも非常に便利ですが、実際にグローバルに登録するプラグインを作成したい場合は、どのように作成すればよいでしょうか?
ステップ1
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;
},
};
ステップ2
変換後、element-plus のように導入して im プラグインを使用してみます
import {
createApp } from 'vue';
import EaseClient from '@/EaseIM/plugin';
app.use(EaseClient);
// mount
app.mount('#app');
ステップ3
では、次のステップでは vue コンポーネントでどのように使用すればよいでしょうか?
セットアップ以外の糖衣構文の使用
<script lang="ts">
export default {
//在mounted中使用是因为需要等组件加载完成后方可访问$EaseIM
async mounted() {
await this.$EaseClient.open({
user:'test',pwd:'1'});
},
setup() {
return {
};
},
};
</script>
使用する糖衣構文を設定する
<script setup lang="ts">
//导入获取当前实例的方法
import {
getCurrentInstance } from 'vue';
const instance = getCurrentInstance();
instance?.proxy?.$EaseClient.open({
user: 'test', pwd: '1' });
</script>
しかし、これを使用すると、呼び出し時に型ヒントがあることは言うまでもなく、ts 型チェックによって $EaseClient がこのモジュールを見つけられないことがわかります。では、この問題をどうやって解決すればよいでしょうか? 次のステップに進みましょう。
ステップ4
実際、この手順は Vue の公式ドキュメントのプラグインのインストール セクションで説明されています。TypeScript ユーザーについては、「グローバル プロパティの拡張」を参照してください。ここでは、現在の問題の解決策についてのみ説明し、コードについてはあまり意味のない話ではありません。
/*
* 如果全局中没有类似，app.d.ts或其他命名的类型声明文件请创建。
*紧接可以添加以下下类型声明
*/
import Vue from 'vue';
type EaseClient = EasemobChat.Connection;
export declare module '@vue/runtime-core' {
interface ComponentCustomProperties {
$EaseClient: EaseClient;
}
}
次に、コンポーネント内でテストの呼び出しを開始し、型ヒントを使用して通常どおり使用できることを確認します。
ここをクリックしてHuanxin Vue3 IM デモをダウンロードして、自分で試してみてください~
Easemob Web SDKのダウンロード: https://www.easemob.com/download/im
Easemob の登録: https://console.easemob.com/user/register