全网首家！腾讯云IM Web云端搜索“尝鲜”体验（全流程） ｜ 技术创作特训营第三期

目录

• 摘要
• 引言
• 腾讯云即时通信概览
• 提前准备工作
• IM Web端搭建支持消息搜索应用全流程
• 实现腾讯云即时通信消息搜索应用的细节
• 问题排查与解决
• 结语

摘要：腾讯云即时通讯IM从更好地满足客户需求、更好地为客户服务的角度出发，经过一年的调研、立项、开发、内测等流程，正式上线Web 端消息搜索功能--云端搜索，也让腾讯云成为国内外首家提供此项能力的即时通信IM厂商！

引言

随着互联网领域的蓬勃发展，不管是各领域企业实际业务的需要，还是各种与大众日常生活息息相关的应用的诞生使用，这都涉及到消息相关的使用，而且在消息处理中的消息搜索、查找是一个非常重要的一点。在涉及到消息相关的厂商中，为了顺应行业数字化转型的新趋势，也一直在做技术革新。关于消息搜索相关的领域，比如在客服、社交、在线教育、在线医疗、OA等场景下是企业刚需的功能，消息搜索可以帮助用户能够快速查找、定位历史的消息，也可以很好的提升产品使用体验和用户粘性。一直以来消息搜素受限于Web端的本地存储、加密、自身性能等因素，国内外相关的IM厂商都没有提供Web平台信息搜索的能力，但是就在最近，腾讯云即时通讯IM从更好地满足客户需求、更好地为客户服务的角度出发，经过一年的调研、立项、开发、内测等流程，正式上线Web 端消息搜索功能--云端搜索，也让腾讯云成为国内外首家提供此项能力的即时通信IM厂商！那么本文就来分享一下关于腾讯云IM Web云端搜索“尝鲜”体验，以全流程的形式来分享，也欢迎感兴趣的读者使用体验云端搜索这个新功能。

腾讯云即时通信概览

先来了解一下腾讯云即时通讯的概览，腾讯云即时通信（Instant Messaging，IM）是基于QQ底层IM能力开发，仅需植入SDK 即可轻松集成聊天、会话、群组、资料管理能力，帮助企业和个人开发者实现文字、图片、短语音、短视频等富媒体消息收发，全面满足通信的需要。

再来了解一下本文的主角搜索云端消息，搜索云端消息（CloudMessageSearch）支持全局搜索、指定会话搜索、指定用户搜索、“或” / “与” 关系搜索等，提升用户使用体验，提升 IM SDK 使用体验，可以帮助用户从纷繁复杂的信息中直接找到预期内容，快捷方便；也可以作为运营工具，增加相关内容的引导，简洁高效。

提前准备工作

这里还是从前端的使用为示例来介绍腾讯云IM Web云端搜索的体验，在开始使用之前，先来看一下准备工作。

1、开发环境

• Vue 2 (Vue3请去腾讯云即时通信官网查看最新要求)
• TypeScript (TUIKit 仅支持TS环境运行，你可以通过渐进式配置 typescript 来使项目中已有的 js 代码 与 TUIKit 中TS代码共存)
• sass（sass-loader 版本 <= 10.1.1）
• node（14.0.0 <= node 版本 <= 20.9.0, 推荐使用 Node.js 官方 LTS 版本 16.17.0）
• npm（版本请与 node 版本匹配）

2、体验测试使用到的开发环境

• macOS 或者Windwos电脑一台（这里以Windows电脑为示例）
• VS Code编辑器

3、本文体验测试使用到的测试环境

• Chrome浏览器 // 强烈建议使用Chrome 浏览器官方最新版本

4、其他方面

• 在使用腾讯云音即时通信的SDK的时候，如果没有腾讯云账号，需要先去注册一个腾讯云账号，先去实名认证，然后进入腾讯云后台管理平台创建一个即时通信应用，获取应用的AppID 和密钥等关键信息，以及开通对应的产品服务等操作。腾讯云即时通信IM控制台入口链接：https://console.cloud.tencent.com/im
• 可以访问互联网的计算机，确保你的网络环境没有部署防火墙，否则无法正常使用腾讯云服务。

IM Web端搭建支持消息搜索应用全流程

关于腾讯云IM Web端搭建支持消息搜索应用的全流程，通过腾讯云即时通讯IM官方说的流程图就可以看明白，主要是具体的应用流程。

1、流程图

腾讯云即时通信 IM 流程图如下所示：

0

关于上面的流程图，可以大概看出来分为三个方向：业务侧、业务侧用户、腾讯云IM。首先业务侧，即业务企业，先去购买并开通云端搜索功能，然后在腾讯云IM后台导入全量历史信息数据。然后业务侧用户，即业务企业的用户群体，通过发送消息到对应的业务应用中，搜索想要的信息。最后腾讯云IM，通过消息搜索集群服务MSCS来处理消息，匹配到业务侧用户想要搜索的结果，然后通过IM Web返回给业务侧用户。

也就是说，为了支持 Web 端的消息搜索，腾讯云即时通信 IM 需要把应用的全量历史消息和终端用户在应用内发送的实时消息导入到消息搜索集群服务；同时，使用腾讯云自研算法精确快速匹配，并通过高可靠的 WebSocket 通道传输给 Web 客户端。

需要注意的是：上述流程要求腾讯云即时通信 IM 部署大量的机器、带宽和存储资源，所以此功能并不包含在 IM 基础套餐包内，需要额外付费购买云端搜索服务。据我所知，云端搜索功能支持套餐包月、按每月消息量、按每月请求量等多种计费模式，使用者可结合自身业务需求，灵活选择最优的计费模式。云端搜索功能开通入口：https://console.cloud.tencent.com/im/plugin/TUICloudSearch

0

根据腾讯云即时通信 IM官方的信息，Web 端消息搜索功能支持全局搜索、指定会话搜索、指定用户搜索、“或” / “与” 关系搜索，同时支持搜索文本、文件、自定义消息，支持中英文搜索。而且为了使用者节省开发时间和成本，腾讯云即时通信 IM 提供了精心设计的，UI 精美且开源免费的 UIKit，易于理解和操作，可以让终端用户基于 UIKit 轻松完成搜索过程，快速、准确地找到自己预期的内容。而且使用者也可以在IM控制台购买或试用云端搜索插件之后，在 UIKit 上快速体验消息搜索功能，并以此为基础做二次开发的操作，非常灵活，可以应对各种实际应用中的问题。

2、快速集成使用 Vue2版的TUIKit

（1）新建项目

由于TUIKit可以支持使用webpack或vite创建项目工程，搭配使用 Vue2 + TypeScript + sass。本文以使用脚手架vue-cli 新建项目作为示例，这里以已经安装vue-cli（如果未安装vue-cli请直接安装即可，这里不再过多描述）来讲，直接在VS Code编辑器的终端输入以下命令行创建项目：

vue create im-demo

具体如下所示：

0

新建完项目之后，切换到项目所在目录，然后升级vue相关配置到vue2.7，具体命令行如下所示：

cd im-demo #进入项目所在目录

npm i vue@2.7.9 vue-template-compiler@2.7.9 #升级vue配置

具体如下图所示：

0

（2）下载拉取TUIKit 组件

这里通过vue开发中常用的npm方式来下载TUIKit 组件，但是为了方便使用，可以直接把TUIKit 组件复制到新建的项目src目录中，如下所示：

# macOS
npm i @tencentcloud/chat-uikit-vue2
mkdir -p ./src/TUIKit && rsync -av --exclude={'node_modules','package.json','excluded-list.txt'} ./node_modules/@tencentcloud/chat-uikit-vue2/ ./src/TUIKit

# windows
npm i @tencentcloud/chat-uikit-vue2
xcopy .\node_modules\@tencentcloud\chat-uikit-vue2 .\src\TUIKit /i /e /exclude:.\node_modules\@tencentcloud\chat-uikit-vue2\excluded-list.txt

具体如下所示：

0

根据命令行下载拉取TUIKit 组件成功之后的效果，如下所示：

0

（3）项目中引入TUIKit 组件

找到项目的main文件，然后引入TUIKit 组件，并把它注册到vue实例中，具体源码如下所示：

import Vue from 'vue'
import App from './App.vue'
import { TUIComponents, TUIChatKit, genTestUserSig } from "./TUIKit";
import { TUILogin } from "@tencentcloud/tui-core";

const SDKAppID = 0; // 你的SDKAppID
const secretKey = ""; //你的secretKey
const userID = ""; // User ID

// TUIChatKit add TUIComponents
TUIChatKit.components(TUIComponents, Vue);
// TUIChatKit 初始化
TUIChatKit.init();
// TUICore l登录
TUILogin.login({
  SDKAppID,
  userID,
  // UserSig 是用户登录即时通信 IM 的密码，其本质是对 UserID 等信息加密后得到的密文。
  // 该方法仅适合本地跑通 Demo 和功能调试，详情请参见 https://cloud.tencent.com/document/product/269/32688
  userSig: genTestUserSig({
    SDKAppID,
    secretKey,
    userID,
  }).userSig,
  // 如果需要发送图片、语音、视频、文件等富媒体消息，请设置为 true
  useUploadPlugin: true,
  // 本地审核可识别、处理不安全、不适宜的内容，为您的产品体验和业务安全保驾护航
  // 此功能为增值服务，请参考：https://cloud.tencent.com/document/product/269/79139

  useProfanityFilterPlugin: false, // 如果已购买内容审核服务，开启此功能请设置为 true
  framework: "vue2",
});
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

export { SDKAppID, secretKey };

具体设置步骤如下所示：

0

（4）获取SDKAppID 、密钥与 userID

上面在设置 main文件的代码中的相关参数 SDKAppID、secretKey 以及 userID ，其中 SDKAppID 和密钥等信息可通过腾讯云即时通信IM控制台：https://console.cloud.tencent.com/im 获取，单击目标应用卡片，进入应用的基础配置页面。如下所示：

0

SDKAppID 和密钥等信息的具体位置如下所示：

0

userID 信息，可通过进入应用的账号管理页面，即可创建账号并获取 userID，具体如下所示：

0

（5）具体使用TUIKit 组件

在需要展示的地方，调用 TUIKit 的组件即可使用，比如在 App.vue 页面中，使用 TUIConversation、TUIChat、TUISearch 快速搭建聊天界面。具体代码如下所示：

<template>
  <div class="home-TUIKit-main">
    <div :class="isH5 ? 'conversation-h5' : 'conversation'" v-show="!isH5 || !currentConversationID">
      <TUISearch search-type="global" />
      <TUIConversation class="conversation" />
      <TUIContact display-type="selectFriend" />
    </div>
    <div class="chat" v-show="!isH5 || currentConversationID">
      <TUIChat>
        <h1>腾讯云即时通信</h1>
      </TUIChat>
      <TUIGroup :class="!isH5 && 'chat-aside'" />
      <TUISearch :class="!isH5 && 'chat-aside'" search-type="conversation" />
    </div>
    <TUICallKit
      :class="[isH5 ? 'callkit-container-h5' : showCallMini ? 'callkit-container-mini' : 'callkit-container-pc']"
      :allowedMinimized="true" :allowedFullScreen="false" :onMinimized="onMinimized" />
  </div>
</template>
  
<script lang="ts">

import Vue from "vue";
import {
  TUIStore,
  StoreName,
} from "@tencentcloud/chat-uikit-engine";
import { TUISearch, TUIConversation, TUIChat, TUIContact, TUIGroup } from "./TUIKit";
import { isH5 } from './TUIKit/utils/env'
// vue 2.7 及以上
import { TUICallKit } from "@tencentcloud/call-uikit-vue2";
// vue 2.6 及 以下, 请注释上行，开放下行注释
// import { TUICallKit } from "@tencentcloud/call-uikit-vue2.6";

export default Vue.extend({
  name: "App",
  components: {
    TUISearch,
    TUIGroup,
    TUIConversation,
    TUIChat,
    TUICallKit,
  },
  data() {
    return {
      currentModel: "conversation",
      currentConversationID: "",
      showCallMini: false,
    };
  },
  mounted: function () {
    TUIStore.watch(StoreName.CONV, {
      currentConversationID: (id: string) => {
        this.currentConversationID = id;
      },
    });
  },
  methods: {
    onMinimized: function onMinimized(oldStatus: boolean, newStatus: boolean) {
      this.showCallMini = newStatus;
    },
  },
});
</script>
  
<style scoped lang="scss">
@import "./TUIKit/assets/styles/common.scss";
.home-TUIKit-main {
  display: flex;
  height: 100vh;
  overflow: hidden;
}
.conversation {
  min-width: 285px;
  flex: 0 0 24%;
  border-right: 1px solid #f4f5f9;
}
.conversation-h5 {
  flex: 1;
  border-right: 1px solid #f4f5f9;
}
.chat {
  display: flex;
  overflow: hidden;
  flex: 1;
  height: 100%;
  position: relative;
}
.callkit-container-pc {
  position: fixed;
  left: calc(50% - 25rem);
  top: calc(50% - 18rem);
  width: 50rem;
  height: 36rem;
}
.callkit-container-h5 {
  position: fixed;
}
.callkit-container-mini {
  position: fixed;
  right: 10px;
  top: 70px;
}
</style>

具体局部效果如下所示：

0

（6）运行项目

这里运行项目的步骤很简单，直接在终端输入命令行：

npm run serve

具体如下所示：

0

3、体验消息云端搜索功能

通过上面快速集成使用 Vue2版的TUIKit操作，前端集成和使用部分已经讲完，接下来分享集成之后运行起来的效果，具体如下所示：

0

上面就是项目运行成功之后，点击对话框左上角的“发起群聊”按钮，然后在搜索栏输入创建的 userID，选中后单击完成，在输入框中输入消息并单击发送，Web 端的具体步骤如下所示：

0

4、试用消息云端搜索插件

关于UIKit 消息搜索效果的体验，这里分为两个方面来分享，从全局搜索和文件搜索来介绍。

（1）进行全局搜索

通过Web端消息搜索功能，用户可全局搜索所有包含指定关键词的会话，并且用户可在搜索栏中自由选择搜索的时间范围，用户点击搜索到的会话，可以直接定位至对应聊天位置，并高亮显示该消息，具体如下所示：

0

0

（2）进行文件搜索

通过Web端消息搜索功能，用户可直接搜索指定会话内的全部文件消息，而文件同样支持用户进行指定时间段的搜索，用户点击搜索到的文件，同样可以直接定位至对应聊天位置，并高亮显示该文件消息，具体如下所示：

0

0

0

实现腾讯云即时通信消息搜索应用的细节

通过上面关于腾讯云即时通信消息搜索的集成和使用，简单总结一下，尤其是在集成过程中需要注意的地方，具体如下所示：

• 版本选择：通过引入腾讯云即时通信消息搜索的过程中，一定要根据腾讯云即时通信的官方文档来选择，一定要分清楚是vue2还是vue3的集成步骤。
• 消息搜索服务：在引入腾讯云即时通信的时候，一定要先去注册并购买开通消息搜索服务，因为腾讯云即时通信官方明确说过需要额外付费购买云端搜索服务。
• 官方文档：在使用和体验腾讯云即时通信消息搜索的时候，一定要通读一遍腾讯云即时通讯官方文档，方便熟悉集成和使用流程，避免“闭门造车”的情况。
• 创建应用：在购买腾讯云即时通信消息搜索功能之后，需要先去腾讯云即时通信管理后台创建应用，然后获取到相关参数 SDKAppID、secretKey 以及 userID。

问题排查与解决

在本次体验使用腾讯云IM的Web 端消息搜索功能的时候，也遇到了使用问题。

问题一：项目初始化时候的问题

第一次运行项目的时候，项目没有跑起来，具体报错信息如下所示：

0

通过具体的报错提示，对应的修改了上述的报错问题，这里之所以展示出来，是因为个人觉得这是比较有代表性的出现，尤其是不太熟悉使用的小伙伴，起到示例作用。

问题二：生成UserSig的步骤

如果对腾讯云即时通信的使用不太熟悉的小伙伴，就会遇到UserSig生成的困扰。其实如果熟悉UserSig生产之后，你就会觉得很简单，我之前在使用腾讯云音视频相关产品的时候，刚开始也不知道UserSig怎么生成，后来看了官方的介绍之后才知道原来如此简单。分享一下具体的生成步骤：https://cloud.tencent.com/document/product/269/32688#GeneratingdynamicUserSig

问题三：项目运行的时候

在项目运行的第二次，我遇到了这个报错提示：ERESOLVE unable to resolve dependency tree ，后来查看报错提示才知道，原来是本地依赖在安装的时候冲突了，然后通过下面的命令行完美解决问题：

npm install --legacy-peer-deps

结束语

通过本文关于腾讯云IM Web云端搜索的“尝鲜”体验，以及全流程的集成使用操作，想必读者都对腾讯云即时通信的云端搜索这一上新功能有所了解。个人觉得腾讯云即时通信的云端搜索服务，可以完美的解决企业和个人开发者在使用即时通信时候的各种需求，尤其是在即时通信使用过程中对消息检索的功能，而且看了云端搜索的收费非常的低，这是其他新产品所不具备的优势。总的体验下来，云端搜索功能非常好用，功能也很强大，值得入手体验一番！

我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！