Electron

最近更新时间:2024-07-03 17:39:01

我的收藏
本文主要介绍如何快速运行腾讯云即时通信 IM Demo(Electron)并了解集成 Electron SDK 的方法。

环境要求

平台
版本
Electron
13.1.5到17.0.0版本
Node.js
v14.2.0

支持平台

目前支持 macOS 和 Windows 两个平台。

体验 DEMO

在开始接入前,您可以体验我们的 DEMO ,快速了解腾讯云 IM Electron SDK。

前提条件

您已 注册腾讯云 账号,并完成 实名认证

操作步骤

步骤1:创建应用

说明:
如果您已有应用,请记录其 SDKAppID 信息, 直接跳到步骤2:获取密钥信息
单个腾讯云账号最多可创建300个应用。若已有300个应用,您可以先 停用并删除 不再使用的应用后,再创建新的应用。应用删除后,该 SDKAppID 对应的所有数据和服务不可恢复,请谨慎操作。
2. 应用管理页面,单击创建新应用,在弹出的对话框中输入应用名称,选择合适的数据中心,单击确定






3. 创建完成后,可在应用管理页面查看、搜索、管理应用。请记录 SDKAppID 信息



步骤2:获取密钥信息

1. 应用管理页面的操作中单击查看密钥


2. 在弹出的对话框中,单击显示密钥,复制并保存密钥信息。



注意
密钥信息为敏感信息,为防止他人盗用,请妥善保管,谨防泄露。
3. 在左侧导航栏“开发辅助”分类下,单击开发工具 > UserSig 生成&校验,创建一个 UserID 及其对应的 UserSig,复制签名信息,供后续在 Demo 中登录时使用。


步骤3:选择适合的方法集成 Electron SDK

IM 提供了两种方式来集成,您可以选择最合适的方案来集成:
集成方式
适用场景
使用 DEMO
IM Demo 包含完整的聊天功能,代码已开源,如果您需要实现聊天类似场景,可以使用 Demo 进行二次开发。可立即体验 Demo
自实现
如果 Demo 不能满足您应用的功能界面需求,可以使用该方法。
为帮助您更好的理解 IM SDK 的各 API,我们还提供了 API 文档

步骤4:使用 Demo

说明:
为尊重表情设计版权,IM Demo/TUIKit 工程中不包含大表情元素切图,正式上线商用前请您替换为自己设计或拥有版权的其他表情包。下图所示默认的小黄脸表情包版权归腾讯云所有,可有偿授权使用,如需获得授权可 提交工单 联系我们。



1. 克隆即时通信 IM Electron Demo 源码到本地。
git clone https://github.com/TencentCloud/tc-chat-demo-electron.git
2. 安装项目依赖。
// 项目根目录
npm install

// 渲染进程目录
cd src/client
npm install
3. 项目运行。
// 项目根目录
npm start
4. 项目打包。
// mac打包
npm run build:mac
// windows打包
npm run build:windows
说明
Demo 中主进程的目录为src/app/main.js,渲染进程目录为src/client。如运行过程出现问题,可优先通过常见问题查找解决。

步骤5:自实现

安装 Electron SDK 使用如下命令,安装 Electron SDK 最新版本 在命令行执行:
npm install im_electron_sdk
完成 SDK 初始化
1. TimMain中传入您的sdkAppID
// 主进程
const TimMain = require('im_electron_sdk/dist/main')

const sdkappid = 0;// 可以去腾讯云即时通信IM控制台申请
const tim = new TimMain({
sdkappid:sdkappid
})
2. 调用TIMInit,完成 SDK 初始化。
//渲染进程
const TimRender = require('im_electron_sdk/dist/render')
const timRender = new TimRender();
// 初始化
timRender.TIMInit()
3. 登录测试用户。 此时,您可以使用最开始的时候,在控制台生成的测试账户,完成登录验证。 调用timRender.TIMLogin方法,登录一个测试用户。 当返回值 code为0时,登录成功。
const TimRender = require('im_electron_sdk/dist/render')
const timRender = new TimRender();
let {code} = await timRender.TIMLogin({
userID:"userID",
userSig:"userSig" // 参考userSig生成
})
说明
该账户仅限开发测试使用,应用上线前,正确的UserSig 签发方式是将UserSig的计算代码集成到您的服务端,并提供面向 App 的接口。在需要 UserSig时由您的 App 向业务服务器发起请求获取动态 UserSig。更多详情请参见 服务端生成 UserSig
发送信息 此处以发送文本消息为例,code返回 0 则为消息发送成功。 代码示例:
const TimRender = require('im_electron_sdk/dist/render')
const timRender = new TimRender();
let param:MsgSendMessageParamsV2 = { // param of TIMMsgSendMessage
conv_id: "conv_id",
conv_type: 1,
params: {
message_elem_array: [{
elem_type: 1,
text_elem_content:'Hello Tencent!',

}],
message_sender: "senderID",
},
callback: (data) => {}
}
let {code} = await timRender.TIMMsgSendMessageV2(param);
说明
如果发送失败,可能是由于您的 SDKAppID 不支持陌生人发送消息,您可至控制台开启,用于测试。请点击此链接,关闭好友关系链检查。
获取会话列表 在上一个步骤中,完成发送测试消息,现在可登录另一个测试账户,拉取会话列表。 常见应用场景为: 在启动应用程序后立即获取会话列表,然后监听长链接以实时更新会话列表的变化。
let param:getConvList = {
userData:userData,
}
let data:commonResult<convInfo[]> = await timRenderInstance.TIMConvGetConvList(param)
此时,您可以看到您在上一步中,使用另一个测试账号发来的消息的会话。
接收消息 常见应用场景为:
1. 界面进入新的会话后,首先一次性请求一定数量的历史消息,用于展示历史消息列表。
2. 监听长链接,实时接收新的消息,将其添加进历史消息列表中。
一次性请求历史消息列表
let param:MsgGetMsgListParams = {
conv_id: conv_id,
conv_type: conv_type,
params: {
msg_getmsglist_param_last_msg: msg,
msg_getmsglist_param_count: 20,
msg_getmsglist_param_is_remble: true,
},
user_data: user_data
}
let msgList:commonResult<Json_value_msg[]> = await timRenderInstance.TIMMsgGetMsgList(param);
监听实时获取新消息 绑定 callback 示例代码如下:
let param : TIMRecvNewMsgCallbackParams = {
callback: (...args)=>{},
user_data: user_data
}
timRenderInstance.TIMAddRecvNewMsgCallback(param);
此时,您已基本完成 IM 模块开发,可以发送接收消息,也可以进入不同的会话。 您可以继续完成 群组,用户资料,关系链,离线推送,本地搜索 等相关功能开发。 详情可查看 API 文档

可选操作:开通内容审核功能

在消息发送、资料修改场景中,很有可能会扩散不合适的内容,特别是与敏感事件/人物相关、黄色不良内容等令人反感的内容,不仅严重损害了用户们的身心健康,更很有可能违法并导致业务被监管部门查封。
即时通信 IM 支持内容审核(反垃圾信息)功能,可针对不安全、不适宜的内容进行自动识别、处理,为您的产品体验和业务安全保驾护航。可以通过 云端审核 方式来实现。

常见问题

Electron 日志目录在哪?

日志默认在 path.resolve(os.homedir(), ".tencent-im/sdk-log")下(可以在 nodejs 的 cli 环境下执行)。
如果在调用 TIMInit API 时传入了 config_path,那日志就在传入的 config_path 目录下。

支持哪些平台?

目前支持 macOS 和 Windows 两个平台。

错误码如何查询?

IM SDK 的 API 层面错误码,请查看 错误码

安装开发环境问题,出现 npm ERR! gyp ERR! stack TypeError: Cannot assign to read only property 'cflags' of object '#<Object>' 错误如何解决?

请降低 node 版本,建议使用16.18.1。

安装开发环境问题,出现 gypgyp ERR!ERR 错误如何解决?

请参见 gypgyp ERR!ERR!

执行 npm install 出现错误 npm ERR! Fix the upstream dependency conflict, or retry,如何解决?

npmV7之前的版本遇到依赖冲突会忽视依赖冲突,继续进行安装 npmV7版本开始不会自动进行忽略,需要用户手动输入命令 请执行以下命令:
npm install --force

执行 npm run start 出现错误 Error: error:0308010C:digital envelope routines::unsupported,如何解决?

请降低node版本,建议使用16.18.1。

Mac 端 Demo 执行 npm run start 会出现白屏,如何解决?

Mac 端执行npm run start 会出现白屏,原因是渲染进程的代码还没有 build 完成,主进程打开的3000端口为空页面,当渲染进程代码 build 完成重新刷新窗口后即可解决问题。或者执行cd src/client && npm run dev:react, npm run dev:electron, 分开启动渲染进程和主进程。

vue-cli-plugin-electron-builder 构建的项目如何使用 native modules?

使用vue-cli-plugin-electron-builder 构建的项目使用native modules 请参见 No native build was found for platform = xxx

webpack 构建的项目如何使用 native modules?

自己使用webpack 构建的项目使用native modules 请参见 Windows 下常见问题

出现 Dynamic Linking Error?

Dynamic Linking Error. electron-builder 配置
extraFiles:[
{
"from": "./node_modules/im_electron_sdk/lib/",
"to": "./Resources",
"filter": [
"**/*"
]
}
]

使用 electron-vite 出现__dirname is not defined ?

由于 electron-vite 不支持在渲染进程(renderer) 进行进程间的通信,需要将 IM SDK 写到 preload 中使用 (主进程的代码正常写到主进程即可)。具体可参考 electron-vite 文档
使用方法相同,可参考文档的实例代码。下面以初始化为例,使用方法如下:
// 主进程内容正常写到主进程
// main/index.ts (示例路径)
const TimMain = require('im_electron_sdk/dist/main')
const sdkappid = 0;
const tim = new TimMain({
sdkappid:sdkappid
})
// 在 preload 中使用im sdk
// preload/index.ts (示例路径)
import TimRender from 'im_electron_sdk/dist/renderer'
const timRender = new TimRender();

联系我们

点此进入 IM 社群,享有专业工程师的支持,帮助您解决您的难题。