对于不了解 web前端开发、Flutter开发不太熟悉、IM SDK 使用不太熟悉的开发者来说，首次接入第三方需要在web端运行的项目时，可能会遇到各种各样的问题，遇到问题后，不确定是 web、Flutter、im sdk 哪块配置的问题，这里笔者不作为开发者来解决各类报错问题，而是作为 新手 来一步步怎么去正确引入并使用 im sdk 的能力（后续使用 Flutter 引入 web 第三第三方 sdk 应该也可以作为参考，笔者对 web 开发 目前几乎也不懂），废话不多说，现在开始~

第一步：

首先确认系统内已经安装并配置好 npm（网上有一堆文章，可以去看看），安装成功之后运行下面命令，会显示对应版本号

npm --version

image.png

第二步：

打开编译器 terminal 控制台，进入到 web 目录

cd web

第三步：

查看工程 web 目录下是否有 package.json 文件，如果没有则在 terminal控制台 输入下面命令创建，有则跳过

npm init

npm init 不知道怎么配置，点击这里

第四步：

下载安装第三方sdk，这里以 “腾讯云 web im” 举例,在 terminal控制台 继续输入下面命令下载两个文件

npm i @tencentcloud/chat

npm i tim-upload-plugin

第五步：

最后在 web 目录下 index.html 文件内引入 js文件

<script src="./node_modules/tim-upload-plugin/index.js"></script>
<script src="./node_modules/@tencentcloud/chat/index.js"></script>
<script src="./node_modules/@tencentcloud/chat/modules/group-module.js"></script>
<script src="./node_modules/@tencentcloud/chat/modules/relationship-module.js"></script>
<script src="./node_modules/@tencentcloud/chat/modules/signaling-module.js"></script>

第六步：

最后跟 跟其他平台一样，在 Flutter 的 pubspec.yaml 文件中引入 腾讯云 im flutter sdk，接下来根据 腾讯云即时通信官网 im flutter sdk api示例正常使用即可，通过在 web 浏览器上运行验证是否已接入成功

最终成功的效果

• 项目结构

• 调用 api 初始化 及 登录之后的效果

补充：

运行报错:
(web im sdk 没有成功安装，需要通过上面命令安装，也可能是缓存问题，先通过 npm 相关命令，清理下缓存 并删除 web 目录下这几个文件重新创建和下载) npm清理缓存点这里

//查看当前下载源
npm config get registry

##以下选其一，挨个试试，看看最终哪个行

//切换 npm 官方原始镜像
npm config set registry https://registry.npmjs.org/

//切换腾讯云镜像
npm config set registry https://mirrors.cloud.tencent.com/npm/

//切换淘宝镜像
npm config set registry https://registry.npm.taobao.org 

//切换 阿里云 镜像
npm config set registry https://npm.aliyun.com

//切换 网易云 镜像
npm config set registry https://mirrors.163.com/npm/

//切换 中国科学技术大学开源 镜像
npm config set registry http://mirrors.ustc.edu.cn/

//切换 清华大学开源 镜像
npm config set registry https://mirrors.tuna.tsinghua.edu.cn/