前端时间在我们网页端实现了一个很low的腾讯im有点不爽，用的是无集成方案，这是为什么呢，这还要从react说起，真是命苦，什么都没，不过咱们的vue小伙伴就不得了了，有ui集成方案，很简单，废话不多我们按个来看，携带源码
腾讯im有两种使用方案，一种是有ui集成方案，一种是无ui集成方案，我们就逐一去看
从零开始逐步去看
腾讯im是什么？用来做什么？
即时通信 IM（Instant Messaging）基于 QQ 底层 IM 能力开发，仅需植入 SDK 即可轻松集成聊天、会话、群组、资料管理和直播弹幕能力，也支持通过信令消息与白板等其他产品打通，全面覆盖您的业务场景，支持各大平台小程序接入使用，全面满足通信需要。
gitee地址
一、有ui集成方案
有ui集成文档直通车
（1-1）搭建一个基础的项目
然后配置package.json, 项目刚创建的时候是没有这个文件的，需要我们去创建一个配置文件
npm init / yarn init接下来配置ui
（1-1-1）下载（电脑那个系统用哪个）
# macOS
npm i @tencentcloud/chat-uikit-uniapp
# windows
npm i @tencentcloud/chat-uikit-uniapp（1-1-2）配置（电脑那个系统用哪个）
# macOS
mkdir -p ./pages/TUIKit && cp -r ./node_modules/@tencentcloud/chat-uikit-uniapp/ ./pages/TUIKit
# windows
xcopy .\node_modules\@tencentcloud\chat-uikit-uniapp .\pages\TUIKit /i /e到这就基本配置完毕了，这事我们就发现我们的page文件下多了一个文件，这就是im的ui组件库
（1-2）修改项目中的配置
配置项目以及修改配置项目中的错误地方，有一些东西是真不对，需要自己去编写一下
（1-2-1）修改文件
① App.vue
<script>
import { genTestUserSig, aegisID } from "./pages/TUIKit/debug/index.js";
import { TIM, TIMUploadPlugin, Aegis } from './pages/TUIKit/debug/tim.js';
const aegis = new Aegis({
id: aegisID, // 项目key
reportApiSpeed: true, // 接口测速
});
uni.$aegis = aegis;
const config = {
userID: "", //User ID 1. 用户的账号
SDKAppID: 0, // Your SDKAppID 2. 腾讯im的SDKAppId
secretKey: "", // Your secretKey 3. 你腾讯im的秘钥
};
uni.$chat_SDKAppID = config.SDKAppID;
const userSig = genTestUserSig(config).userSig;
// 创建 sdk 实例
uni.$TUIKit = TIM.create({
SDKAppID: uni.$chat_SDKAppID,
});
uni.$TIM = TIM;
// 注册文件上传插件
// #ifdef MP-WEIXIN || H5
uni.$TUIKit.registerPlugin({
"tim-upload-plugin": TIMUploadPlugin,
});
// #endif
// #ifdef APP-PLUS
uni.$TUIKit.registerPlugin({
"cos-wx-sdk": TIMUploadPlugin,
});
// #endif
export default {
onLaunch: function () {
this.bindTIMEvent();
this.login();
},
methods: {
login() {
// login TUIKit
uni.$TUIKit.login({ userID: config.userID, userSig }).then((res) => {
// sdk 初始化，当 sdk 处于ready 状态，才可以使用API，文档
uni.showLoading({
title: "初始化...",
});
});
},
bindTIMEvent() {
uni.$TUIKit.on(uni.$TIM.EVENT.SDK_READY, this.handleSDKReady);
uni.$TUIKit.on(uni.$TIM.EVENT.SDK_NOT_READY,this.handleSDKNotReady);
uni.$TUIKit.on(uni.$TIM.EVENT.KICKED_OUT, this.handleKickedOut);
},
// sdk ready 以后可调用 API
handleSDKReady(event) {
uni.setStorageSync('$chat_SDKReady', true);
uni.hideLoading();
},
handleSDKNotReady(event) {
uni.showToast({
title: "SDK 未完成初始化",
});
},
handleKickedOut(event) {
uni.clearStorageSync();
uni.showToast({
title: `${this.kickedOutReason(event.data.type)}被踢出，请重新登录。`,
icon: "none",
});
},
kickedOutReason(type) {
switch (type) {
case uni.$TIM.TYPES.KICKED_OUT_MULT_ACCOUNT:
return "由于多实例登录";
case uni.$TIM.TYPES.KICKED_OUT_MULT_DEVICE:
return "由于多设备登录";
case uni.$TIM.TYPES.KICKED_OUT_USERSIG_EXPIRED:
return "由于 userSig 过期";
case uni.$TIM.TYPES.KICKED_OUT_REST_API:
return "由于 REST API kick 接口踢出";
default:
return "";
}
},
},
};
</script>
<style>
/*每个页面公共css */
</style>一共就需要三个参数：
1. 用户的账号
2. 腾讯im的SDKAppId
3. 你腾讯im的秘钥
② pages.json 配置
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
// {
// "path": "pages/index/index",
// "style": {
// "navigationBarTitleText": "uni-app"
// }
// },
{
"path": "pages/TUIKit/TUIPages/TUIConversation/index",
"style": {
"navigationBarTitleText": "云通信 IM"
}
},
{
"path": "pages/TUIKit/TUIPages/TUIConversation/create",
"style": {
"navigationBarTitleText": "选择联系人",
"app-plus": {
"scrollIndicator": "none"
}
}
},
{
"path": "pages/TUIKit/TUIPages/TUIChat/index",
"style": {
"navigationBarTitleText": "云通信 IM",
"app-plus": {
"scrollIndicator": "none", // 当前页面不显示滚动条
"softinputNavBar": "none", // App平台在iOS上，webview中的软键盘弹出时，默认在软键盘上方有一个横条，显示着：上一项、下一项和完成等按钮
"bounce": "none" // 页面回弹
}
}
},
{
"path": "pages/TUIKit/TUIPages/TUIChat/components/message-elements/video-play",
"style": {
"navigationBarTitleText": "云通信 IM",
"app-plus": {}
}
},
{
"path": "pages/TUIKit/TUIPages/TUIGroup/index",
"style": {
"navigationBarTitleText": "群管理",
"app-plus": {
"scrollIndicator": "none"
}
}
},
{
"path": "pages/TUIKit/TUIPages/TUIGroup/memberOperate"
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"uniIdRouter": {}
}到这就基本上就结束了，接下来我们启动项目去看界面
因为我之前这个账号已经使用过了，然后就有消息了
我们再去发个消息
二、无ui集成方案
IM的api文档
这个不是重点我就不一一说明了，感兴趣的可以逐一看文档。
提前说明： 不能在浏览器下正常展示，我没有去看原因，只有在真机测试是好的
SDKAppID， userSig ，userID 三个值需要去腾讯im中去寻找
SDKAppID
userSig ，userID 这两个参数，需要通过秘钥来生成
（2-1）首先下来依赖
//初始化
npm init
// IM Web SDK
// 从v2.11.2起，SDK 支持了 WebSocket，推荐接入；v2.10.2及以下版本，使用 HTTP
npm install tim-js-sdk --save
// 发送图片、文件等消息需要腾讯云即时通信 IM 上传插件
npm install tim-upload-plugin --save
// 拦截或替换敏感词需要本地审核插件
npm install tim-profanity-filter-plugin --save（2-2）使用
<script>
// 从v2.11.2起，SDK 支持了 WebSocket，推荐接入；v2.10.2及以下版本，使用 HTTP
// v2.24.0起，SDK 支持使用本地审核插件
import TIM from 'tim-wx-sdk';
import TIMUploadPlugin from 'tim-upload-plugin';
// import TIMProfanityFilterPlugin from 'tim-profanity-filter-plugin';
export default {
onLaunch: function() {
console.log('App onLaunch')
let options = {
SDKAppID: {
SDKAppID: 0 //1. 你的SDKAppID
}, // 接入时需要将0替换为您的即时通信 IM 应用的 SDKAppID
userSig: , // 2. 你的userSig,
userID: // 3. 你的userID
};
// 创建 SDK 实例，`TIM.create()`方法对于同一个 `SDKAppID` 只会返回同一份实例
let tim = TIM.create(options.SDKAppID); // SDK 实例通常用 tim 表示
// 设置 SDK 日志输出级别，详细分级请参见 <a href="https://web.sdk.qcloud.com/im/doc/zh-cn/SDK.html#setLogLevel">setLogLevel 接口的说明</a>
// tim.setLogLevel(0); // 普通级别，日志量较多，接入时建议使用
tim.setLogLevel(0); // release 级别，SDK 输出关键信息，生产环境时建议使用
// 注册腾讯云即时通信 IM 上传插件
tim.registerPlugin({
'tim-upload-plugin': TIMUploadPlugin
});
// 注册腾讯云即时通信 IM 本地审核插件
// tim.registerPlugin({
// 'tim-profanity-filter-plugin': TIMProfanityFilterPlugin
// });
tim.login({
userID: options.userID,
userSig: options.userSig
}).then((imResponse) => {
console.log("登录成功", imResponse.data);
if (imResponse.data.repeatLogin === true) {
// 标识帐号已登录，本次登录操作为重复登录。v2.5.1 起支持
console.log("登录成功重复", imResponse.data.errorInfo);
}
}).catch(function(imError: any) {
console.warn('login error 登录失败:', imError); // 登录失败的相关信息
});
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>
<style lang="scss">
</style>在控制台不难发现我们已经登录成功了
登出功能
tim.logout().then(function (imResponse: { data: any; }) {
console.log(imResponse.data, "退出成功"); // 登出成功
}).catch(function (imError: any) {
console.warn('logout error:', imError);
});接收消息，每当来一个消息，就会触发这个函数
tim.on(TIM.EVENT.MESSAGE_RECEIVED, function(event: any) {
console.log(event, "来消息了")
})好了，到这就基本结束了，我就不一一列举了，上面有api接口文档，感兴趣的可以自己研究
完美结束，完结撒花