TUIKit For Web React

TUIKit 是基于腾讯云 IM SDK 的一款 UI 组件库，它提供了一些通用的 UI 组件，包含会话、聊天、关系链、群组、音视频通话等功能。 基于 UI 组件您可以像搭积木一样快速搭建起自己的业务逻辑。

TUIKit 中的组件在实现 UI 功能的同时，会调用 IM SDK 相应的接口实现 IM 相关逻辑和数据的处理，因而开发者在使用 TUIKit 时只需关注自身业务或个性化扩展即可。 基于 React 开发的 TUIKit 界面风格更契合境外客户的使用习惯，而且支持国际化，如果您的业务有出海的需求，欢迎接入。

Init Application

即时通信 IM 通过“应用”来管理不同的业务或项目，您必须创建应用才能接入 IM 服务。

您可以为不同的业务或项目、测试环境或生产环境分别创建不同的应用，不同应用之间的数据不互通。每个腾讯云账号最多可以创建300个应用。您可以在 IM 控制台的应用管理中创建及管理应用。

创建应用

登录 即时通信 IM 控制台，在左侧导航栏选择应用管理，单击创建新应用。

在弹出界面中依次输入应用名称、选择合适的数据中心、设置标签信息（可选）。

应用列表查看密钥并记录下来

数据汇总

到这里，我们获取到两个配置， SDKAppID 和 Secret。需要保密和牢记。

SDKAppID: 1400670488
Secret: 9432bab85190b****************************************71dd99dcf7a

注意

应用ID SDKAppID 并不敏感，但是 Secret 非常敏感，请不要对外泄露。

项目集成与登录

前端无 UI 集成

安装 SDK

在您的项目中使用 npm 安装相应的 IM SDK 依赖。

npm install @tencentcloud/chat

// 发送图片、文件等消息需要腾讯云即时通信 IM 上传插件
npm install tim-upload-plugin --save

在你的 Web 项目中引入模块

imChat.js

import TencentCloudChat from '@tencentcloud/chat';
import TIMUploadPlugin from 'tim-upload-plugin';

let options = {
  SDKAppID: 1400670488
};

// 创建 SDK 实例，`TIM.create()`方法对于同一个 `SDKAppID` 只会返回同一份实例
// SDK 实例通常用 chat 表示
let chat = TencentCloudChat.create(options);

chat.setLogLevel(0); // 普通级别，日志量较多，接入时建议使用
// chat.setLogLevel(1); // release 级别，SDK 输出关键信息，生产环境时建议使用

// 注册腾讯云即时通信 IM 上传插件
chat.registerPlugin({ 'tim-upload-plugin': TIMUploadPlugin });
export { chat };

---

后端实现

即时通信 IM 提供全球接入、单聊、群聊、消息推送、资料关系链托管、账号鉴权等全方位解决方案，并提供完备的 App 接入、后台管理接口。

Chat 后台已实现大部分的功能，但是使用者的开发者后台还是要有基本的功能，在此处，后端需要验证用户的账号密码，根据自己的业务需求，实现自己的验证逻辑，返回验证成功且返回服务端计算的用户密钥。

密钥计算参考 生成 UserSign，如果您是 node.js 相关后台框架，可以参考 开源示例。

serve.js

const express = require('express');
const createError = require('http-errors');
const app = express();
const TLSSigAPIv2 = require('./serve-util/TLSSigAPIv2');

app.use(express.json());
app.use(express.urlencoded({ extended: false }));

const sdkAppID = 1400670488;
const secret = '';

// 假设我们数据库有以下账号成员信息
const members = {
  tom: {
    userName: 'tom',
    passWord: 'catchMice'
  }
};

app.use('/api/user-sign', (req, res, next) => {
  const userName = req.body.userName;
  if (members[userName]) {
    res.setHeader('Content-Type', 'application/json');
    // you can cache this object as you lick
    const api = new TLSSigAPIv2.Api(sdkAppID, secret);
    // expire: 180d
    const sig = api.genSig(userName, 86400 * 180);
    res.json({ sig });
  } else {
    next(createError(403, 'no user name'));
  }
});

// error handler
app.use(function (err, req, res, next) {
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};
  res.status(err.status || 500);
  res.json({ message: err.message });
});

export { app };

./serve-util/TLSSigAPIv2.js

// copy from https://github.com/tencentyun/tls-sig-api-v2-node/blob/master/TLSSigAPIv2.js
var crypto = require('crypto');
var zlib = require('zlib');

var base64url = {};

var newBuffer = function (fill, encoding) {
  return Buffer.from ? Buffer.from(fill, encoding) : new Buffer(fill, encoding);
};

base64url.unescape = function unescape(str) {
  return (str + Array(5 - (str.length % 4)))
    .replace(/_/g, '=')
    .replace(/\-/g, '/')
    .replace(/\*/g, '+');
};

// ...

exports.Api = Api;

完整代码

export default function App() {
  const data: string = "world"

  return <h1>Hello {data}</h1>
}

Open Sandbox

你需要修改 serve.js 文件夹内的 secret 并点击 Restart Script，再进行登录操作。

当看见 Login success 代表登录流程成功。