Web(Vue)

適用シーン

Web&H5 プラットフォーム。不動産業者のコンサルティング、電子商取引のオンラインカスタマーサービス、保険の遠隔損害判定など、プライベートメッセージチャット(1V1)またはグループチャット(Group)の独立した統合。


開発環境要件

Vue (Vue2 と Vue3 は完全にサポートされている。以下で導入する時に一致している Vue バージョンの導入ガイドを選択して導入してください)
TypeScript (js プロジェクトの場合は、 js プロジェクトが TUIKit コンポーネントを導入する方法は? にジャンプして ts のプログレッシブなサポートを設定してください)
sass(sass-loader 版本 ≤ 10.1.1)
node(node.js ≥ 16.0.0)
npm(バージョンはノードのバージョンと一致してください)

TUIKit ソースコード統合( Web & H5 )

ステップ 1:プロジェクト作成

TUIKit は、webpack または vite を使用したプロジェクト作成、Vue3 / Vue2 + TypeScript + sass の設定をサポートしています。以下は、幾つかのプロジェクトの構築例です。
vue-cli
vite
注意:
お使いの @vue/cli バージョンが 5.0.0 以上であることを確認してください。以下のサンプルコードを使用して、 @vue/cli バージョンを v5.0.8 にアップグレードできます。
vue-cli 方式でプロジェクトを作成し、Vue2 / Vue3 + TypeScript + sass を設定します。 vue-cli をまだインストールしていない場合、または vue-cli のバージョンが 5.0.0 以下の場合は、terminal または cmd で以下の方法でインストールすることができます。
npm install -g @vue/cli@5.0.8 sass sass-loader@10.1.1
vue-cli でプロジェクトを作成し、下図で選択した設定項目を選択します。
vue create chat-example
必ず下記に従って構成を選択してください。

作成したら、プロジェクトの所在するディレクトリに移動します。
cd chat-example
vue2 プロジェクトの場合はお使いの Vue のバージョンに合わせて以下の環境を設定し、vue3 プロジェクトの場合は無視してください。
vue2.7
vue2.6以下
npm i vue@2.7.9 vue-template-compiler@2.7.9
npm i @vue/composition-api unplugin-vue2-script-setup vue@2.6.14 vue-template-compiler@2.6.14
注意:
Vite の場合はNode.js バージョン 18+、20+ が必要です。パッケージマネージャーから警告が出た場合は、Node のバージョンをアップグレードするよう注意してください。詳細については、vite 公式サイトを参照してください。
vite の 方式でプロジェクトを作成し、下図のオプションに従って Vue2 + TypeScript を設定します。
npm create vite@latest

その後、プロジェクトディレクトリに移動し、プロジェクトの依存関係をインストールします。
cd chat-example
npm install
TUIKit に必要な sass 環境依存をインストールします。
npm i -D sass sass-loader

ステップ 2:TUIKit コンポーネントのダウンロード

npm 方式で TUIKit コンポーネントをダウンロードします。その後の拡張を容易にするために、TUIKit コンポーネントを自分のプロジェクトの src ディレクトリにコピーすることをお勧めします。
macOS 端末
Windows 端末
npm i @tencentcloud/chat-uikit-vue
mkdir -p ./src/TUIKit && rsync -av --exclude={'node_modules','package.json','excluded-list.txt'} ./node_modules/@tencentcloud/chat-uikit-vue/ ./src/TUIKit
npm i @tencentcloud/chat-uikit-vue
xcopy .\node_modules\@tencentcloud\chat-uikit-vue .\src\TUIKit /i /e /exclude:.\node_modules\@tencentcloud\chat-uikit-vue\excluded-list.txt
成功後のディレクトリ構造を図に示します。


ステップ 3:TUIKit コンポーネントの導入

main.ts / main.js で、TUIKitを導入し、Vue プロジェクトのインスタンスに登録します
Vue3 バージョン
Vue2 バージョン
import { createApp } from 'vue';
import App from './App.vue';
import { TUIComponents, TUIChatKit, genTestUserSig } from "./TUIKit";
import { TUILogin } from "@tencentcloud/tui-core"; const app = createApp(App);

const SDKAppID = 0; // Your SDKAppID
const secretKey = ""; //Your secretKey
const userID = ""; // User ID

// TUIChatKit add TUIComponents
TUIChatKit.components(TUIComponents, app);
// TUIChatKit init
TUIChatKit.init();
// TUICore login
TUILogin.login({
SDKAppID,
userID,
// UserSig is a password used to log in to IM. It is the ciphertext obtained after data such as UserID is encrypted.
// this method is only suitable for locally running a demo project and feature debugging. https://cloud.tencent.com/document/product/269/32688
userSig: genTestUserSig({
SDKAppID,
secretKey,
userID,
}).userSig,
useUploadPlugin: true,
useProfanityFilterPlugin: false,
framework: "vue3",
});

app.mount("#app");
export { SDKAppID, secretKey };
import Vue from "vue";
import App from "./App.vue";
import { TUIComponents, TUIChatKit, genTestUserSig } from "./TUIKit";
import { TUILogin } from "@tencentcloud/tui-core";

const SDKAppID = 0; // Your SDKAppID
const secretKey = ""; //Your secretKey
const userID = ""; // User ID

// TUIChatKit add TUIComponents
TUIChatKit.components(TUIComponents, Vue);
// TUIChatKit init
TUIChatKit.init();
// TUICore login
TUILogin.login({
SDKAppID,
userID,
// UserSig is a password used to log in to IM. It is the ciphertext obtained after data such as UserID is encrypted.
// this method is only suitable for locally running a demo project and feature debugging. https://cloud.tencent.com/document/product/269/32688
userSig: genTestUserSig({
SDKAppID,
secretKey,
userID,
}).userSig,
useUploadPlugin: true,
useProfanityFilterPlugin: false,
framework: "vue2",
});
Vue.config.productionTip = false;
new Vue({
render: (h) => h(App),
}).$mount("#app");
export { SDKAppID, secretKey };

ステップ 4:SDKAppID、secretKey、userID の取得

main.ts / main.js ファイルのサンプルコードの関連パラメータ SDKAppID、secretKey、userIDを設定します。
SDKAppID と secretKey などの情報は、 Chat コンソール から取得できます。


userID 情報。 Chat コンソール > アカウント管理をクリックし、ターゲットアプリケーションの所在するアカウントに切り替えると、アカウントを作成して userID を取得することができます。


ステップ 5:userID / groupID を入力し、セッションを開いてチャットを行ってください

説明:
conversationID:セッション ID。セッション ID の構成方法:
C2C${userID}(シングルチャット)
GROUP${groupID}(グループチャット)
グループチャットについて:
API [createGroup](https://web.sdk.qcloud.com/im/doc/chat-engine/ITUIGroupService.html#createGroup !7a98f97b561db02dacd13003fe30cc3d) を呼び出すことで groupID を取得できます
ライブブロードキャストグループの場合は、API joinGroup を呼び出してグループに参加することで、チャットできるようになります。
チャットに入ります
API switchConversationを呼び出して conversationID を渡すことで、チャットページに入ります。
Vue3 バージョン
Vue2.7 バージョン
Vue2.6 以下のバージョン
表示したいページで、TUIKit コンポーネントを呼び出すると使用できます。 例えば、App.vue ページで、TUIChat、TUICallKit を使用してチャットインターフェイスを素早く構築します(以下のサンプルコードは、Web と H5 端末の両方をサポートする)。
<template>
<div :class="['TUIKit', isH5 && 'TUIKit-h5']">
<div class="TUIKit-main-container">
<div
v-show="!isH5 || !currentConversationID"
:class="['navbar', isH5 && 'navbar-h5']"
>
<div class="navbar-button" @click="openChat">Open OneToOne Chat</div>
<div class="navbar-button" @click="openGroupChat">Open Group Chat</div>
</div>
<TUIChat v-show="!isH5 || currentConversationID">
<h1>Let's chat!</h1>
</TUIChat>
<TUICallKit
class="callkit-container"
:allowedMinimized="true"
:allowedFullScreen="false"
/>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { TUIStore, StoreName, TUIConversationService } from "@tencentcloud/chat-uikit-engine";
import { TUICallKit } from "@tencentcloud/call-uikit-vue";
import { TUIChat } from "./TUIKit";
import { isH5 } from "./TUIKit/utils/env";
const currentConversationID = ref<string>("");
const userID = "";// Please enter the userID you want to chat
const groupID = "";// Please enter the groupID you want to chat
TUIStore.watch(StoreName.CONV, {
currentConversationID: (id: string) => {
currentConversationID.value = id;
},
});
function openChat() {
TUIConversationService.switchConversation(`C2C${userID}`);
}
function openGroupChat() {
TUIConversationService.switchConversation(`GROUP${groupID}`);
}
</script>
<style scoped lang="scss">
@import "./TUIKit/assets/styles/common.scss";
@import "./TUIKit/assets/styles/sample.scss";
.navbar {
box-sizing: border-box;
min-width: 285px;
flex: 0 0 24%;
border-right: 1px solid #f4f5f9;
padding: 20px;
.navbar-button {
padding: 10px 40px;
background-color: #006eff;
color: #ffffff;
font-size: 16px;
margin-top: 65px;
border-radius: 30px;
text-align: center;
cursor: pointer;
}
}
.navbar-h5 {
flex: 1;
border-right: 1px solid #f4f5f9;
.navbar-button {
cursor: none;
}
}
.chat {
flex: 1;
}
</style>
表示したいページで、TUIKit コンポーネントを呼び出すると使用できます。 例えば、App.vue ページで、TUIChat、TUICallKit を使用してチャットインターフェイスを素早く構築します(以下のサンプルコードは、Web と H5 端末の両方をサポートする)。
<template>
<div :class="['TUIKit', isH5 && 'TUIKit-h5']">
<div class="TUIKit-main-container">
<div
v-show="!isH5 || !currentConversationID"
:class="['navbar', isH5 && 'navbar-h5']"
>
<div class="navbar-button" @click="openChat">Open OneToOne Chat</div>
<div class="navbar-button" @click="openGroupChat">Open Group Chat</div>
</div>
<TUIChat v-show="!isH5 || currentConversationID">
<h1>Let's chat!</h1>
</TUIChat>
<TUICallKit
class="callkit-container"
:allowedMinimized="true"
:allowedFullScreen="false"
/>
</div>
</div>
</template>
<script lang="ts">
import Vue from "vue";
import { TUIStore, StoreName, TUIConversationService } from "@tencentcloud/chat-uikit-engine";
import { TUICallKit } from "@tencentcloud/call-uikit-vue2";
import { TUIChat } from "./TUIKit";
import { isH5 } from "./TUIKit/utils/env";
export default Vue.extend({
name: "App",
components: {
TUIChat,
TUICallKit,
},
data() {
return {
isH5: isH5,
currentConversationID: "",
currentNavbar: "conversation",
userID: "", // Please enter the userID you want to chat
groupID: "", // Please enter the groupID you want to chat
};
},
methods: {
openChat() {
TUIConversationService.switchConversation(`C2C${this.userID}`);
},
openGroupChat() {
TUIConversationService.switchConversation(`GROUP${this.groupID}`);
},
},
mounted: function () {
TUIStore.watch(StoreName.CONV, {
currentConversationID: (id: string) => {
this.currentConversationID = id;
},
});
},
});
</script>
<style scoped lang="scss">
@import "./TUIKit/assets/styles/common.scss";
@import "./TUIKit/assets/styles/sample.scss";
.navbar {
box-sizing: border-box;
min-width: 285px;
flex: 0 0 24%;
border-right: 1px solid #f4f5f9;
padding: 20px;
.navbar-button {
padding: 10px 40px;
background-color: #006eff;
color: #ffffff;
font-size: 16px;
margin-top: 65px;
border-radius: 30px;
text-align: center;
cursor: pointer;
}
}
.navbar-h5 {
flex: 1;
border-right: 1px solid #f4f5f9;
.navbar-button {
cursor: none;
}
}
.chat {
flex: 1;
}
</style>
1. composition-api と script setup をサポートする依存関係、および vue2.6 の依存関係をインストールします。
npm i @vue/composition-api unplugin-vue2-script-setup vue@2.6.14 vue-template-compiler@2.6.14
2. main.ts で VueCompositionAPI を導入します。
import VueCompositionAPI from "@vue/composition-api";
Vue.use(VueCompositionAPI);
3. vue.config.js で追加します。そのファイルがない場合は新規作成してください。
const ScriptSetup = require("unplugin-vue2-script-setup/webpack").default;
module.exports = {
parallel: false, // disable thread-loader, which is not compactible with this plugin
configureWebpack: {
plugins: [
ScriptSetup({
/* options */
}),
],
},
chainWebpack(config) {
// disable type check and let `vue-tsc` handles it
config.plugins.delete("fork-ts-checker");
},
};
4. src/TUIKit/adapter-vue.ts ファイルの最後に、エクスポートソースを置き換えます。
// 初期書き方
export * from "vue";
//
export * from 「@vue/composition-api」に置き換えます。
5. 表示したいページで、TUIKit のコンポーネントを呼び出すと使用できます。 例えば、App.vue ページで、TUIChat、TUICallKit を使用してチャットインターフェイスを素早く構築します(以下のサンプルコードは、Web と H5 端末の両方をサポートする)。
<template>
<div :class="['TUIKit', isH5 && 'TUIKit-h5']">
<div class="TUIKit-main-container">
<div
v-show="!isH5 || !currentConversationID"
:class="['navbar', isH5 && 'navbar-h5']"
>
<div class="navbar-button" @click="openChat">Open OneToOne Chat</div>
<div class="navbar-button" @click="openGroupChat">Open Group Chat</div>
</div>
<TUIChat v-show="!isH5 || currentConversationID">
<h1>Let's chat!</h1>
</TUIChat>
<TUICallKit
class="callkit-container"
:allowedMinimized="true"
:allowedFullScreen="false"
/>
</div>
</div>
</template>
<script lang="ts">
import Vue from "vue";
import { TUIStore, StoreName, TUIConversationService } from "@tencentcloud/chat-uikit-engine";
import { TUICallKit } from "@tencentcloud/call-uikit-vue2.6";
import { TUIChat } from "./TUIKit";
import { isH5 } from "./TUIKit/utils/env";
export default Vue.extend({
name: "App",
components: {
TUIChat,
TUICallKit,
},
data() {
return {
isH5: isH5,
currentConversationID: "",
currentNavbar: "conversation",
userID: "", // Please enter the userID you want to chat
groupID: "", // Please enter the groupID you want to chat
};
},
methods: {
openChat() {
TUIConversationService.switchConversation(`C2C${this.userID}`);
},
openGroupChat() {
TUIConversationService.switchConversation(`GROUP${this.groupID}`);
},
},
mounted: function () {
TUIStore.watch(StoreName.CONV, {
currentConversationID: (id: string) => {
this.currentConversationID = id;
},
});
},
});
</script>
<style scoped lang="scss">
@import "./TUIKit/assets/styles/common.scss";
@import "./TUIKit/assets/styles/sample.scss";
.navbar {
box-sizing: border-box;
min-width: 285px;
flex: 0 0 24%;
border-right: 1px solid #f4f5f9;
padding: 20px;
.navbar-button {
padding: 10px 40px;
background-color: #006eff;
color: #ffffff;
font-size: 16px;
margin-top: 65px;
border-radius: 30px;
text-align: center;
cursor: pointer;
}
}
.navbar-h5 {
flex: 1;
border-right: 1px solid #f4f5f9;
.navbar-button {
cursor: none;
}
}
.chat {
flex: 1;
}
</style>

ステップ 6:プロジェクトの立ち上げ

以下のコマンドを実行してプロジェクトを立ち上げます。
vue-cli
vite
npm run serve
npm run dev

よくある質問

製品サービスに関する問題

1. オーディオ・ビデオ通話機能パッケージはアクティブ化されていませんか?オーディオ・ビデオ通話の開始に失敗しましたか?

オーディオ・ビデオ通話 > よくある質問 をクリックして解決策を表示してください。

2. UserSig とは何ですか?UserSig を生成する方法は?

UserSig は、ユーザーが Chat にログインする際に使用するパスワードであり、実質的には UserID などの情報を暗号化して得られる暗号文です。
UserSig の発行方法は、UserSig の計算コードをサービス側に統合し、プロジェクト向けのインタフェースを提供し、UserSig が必要な場合にプロジェクト経由でビジネスサーバーに動的な UserSig を取得するリクエストを発送します。詳細については、 サービス側の UserSig の生成を参照してください。
注意:
この文章に記載されているサンプルコードは、クライアントコードに SECRETKEY を設定することで UserSig を取得する方法を使っていますが、この方法における SECRETKEY は逆コンパイル・逆クラッキングされやすいです。一旦キーが漏洩すると、攻撃者はお客様の Tencent Cloud のトラフィックを盗むことができますので、この方法はローカルでのクイックスタート機能のデバッグにのみ適しています。UserSig の正しい発行方法については、上記を参照してください。

導入エラーに関する問題

1. 実行時のエラー:"TypeError: Cannot read properties of undefined (reading "getFriendList")"

上記の手順で導入した後に、以下のエラーが発生した場合は、TUIKit の依存関係の一意性を確保し、TUIKit 複数の依存関係による問題を回避するために、TUIKitディレクトリ配下の node_modules ディレクトリを必ず削除してください。
259937368-f7c85dfe-b4bd-4c73-88d9-3a9f0d7797f2.png (1186×550)


2. js プロジェクトに TUIKit コンポーネントを導入する方法は?

TUIKit は ts 環境でのみ動作可能です。プロジェクト内の既存の js コードと TUIKit 内のtsコードを共存させるために、typescript をプログレッシブ方式で設定することができます。
vue-cli
vue-cli
vue-cli スキャフォールディングで作成したプロジェクトのルートディレクトリで実行してください。
vue add typescript
その後、以下の設定アイテムを選択します(オリジナル js コードと TUIKit の ts コードの両方をサポートするために、必ず以下の 5 つのオプションに従って設定してください)。
260706614-5e2fc00b-ace5-4843-bef6-c0e234225b5d.png (1514×360)

上記の手順が完了したら、プロジェクトを再実行してください!
vite で作成したプロジェクトのルートディレクトリで実行してください。
npm install -D typescript

3. 実行時のエラー:/chat-example/src/TUIKit/components/TUIChat /message-input/message-input-editor.vue .ts(8,23)TS1005: expected.


上記のエラーメッセージは、インストールした @vue/cli のバージョンが低すぎるためです。必ず @vue/cli のバージョンが 5.0.0 以上であることを確認してください。。アップグレード方法は次のとおりです。
npm install -g @vue/cli@5.0.8

4. 実行時のエラー: Failed to resolve loader: sass-loader

260897345-1ba994d8-da51-4820-94e7-a7145b34750b.png (690×160)

上記のエラーメッセージは、sass 環境がインストールされていないためです。以下のコマンドを実行して、 sass 環境をインストールしてください。
npm i -D sass sass-loader@10.1.1

5. ESLint のその他のエラーは?

src ディレクトリにコピーされた chat-uikit-vue がローカルのプロジェクトコードのスタイルと一致しない場合、プロジェクトのルートディレクトリに.eslintignoreファイルを追加するなど、コンポーネントディレクトリをブロックすることができます。
# .eslintignore
src/TUIKit

6. vue/cli が dev モードで webpack のフルスクリーン overlay error エラーメッセージをオフにする方法は?

プロジェクトのルートディレクトリにある vue.config.js でオフにできます。
webpack4
webpack3
module.exports = defineConfig({
...
devServer: {
client: {
overlay: false,
},
},
});
module.exports = {
...
devServer: {
overlay: false,
},
};

7. Component name "XXXX" should always be multi-word が表示されたらどうすればよいですか?

IM TUIKit web で使用されている ESLint のバージョンは v6.7.2 であり、モジュール名のキャメルケース形式を厳密にチェックしていません。
この問題が発生した場合は、.eslintrc.js ファイルで次のように設定します。
module.exports = {
...
rules: {
...
'vue/multi-word-component-names': 'warn',
},
};

8. ERESOLVE unable to resolve dependency tree が表示されたらどうすればよいですか?

npm install の時に ERESOLVE unable to resolve dependency tree が表示された場合は、依存のインストールに競合があることを示しますので、以下の方法でインストールすることができます。
npm install --legacy-peer-deps

9. 「vue packages version mismatch」のエラーが表示されたらどうすればよいですか?

// vue2.7 の場合は、プロジェクトのルートディレクトリで実行してください
npm i vue@2.7.9 vue-template-compiler@2.7.9
// vue2.6 の場合は、プロジェクトのルートディレクトリで実行してください
npm i vue@2.6.14 vue-template-compiler@2.6.14

10. vite プロジェクトの npm run build 後に ts エラーが発生しますか?


原因:package.json script の 「build」: 「vue-tsc && vite build」にある vue-tsc コマンドが原因です。

解決策: vue-tsc を削除すればよいです。"build": "vite build"


コミュニケーションとフィードバック

Telegram 技術コミュニケーショングループまたは WhatsApp コミュニケーショングループに参加して、プロのエンジニアのサポートを受けながら問題を解決しましょう。

関連ドキュメンテーション

Vue2 & Vue3 UIKit 関連:

Vue2 & Vue3 UIKit ロジックレイヤ: engine 関連