tencent cloud

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

环境要求

支持平台

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

体验 DEMO

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

前提条件

您已 注册腾讯云 帐号，并完成 实名认证。

操作步骤

步骤1：创建应用

1. 登录 即时通信 IM 控制台。

   说明：

   如果您已有应用，请记录其 SDKAppID 并 获取密钥信息。
   同一个腾讯云帐号，最多可创建300个即时通信 IM 应用。若已有300个应用，您可以先 停用并删除 无需使用的应用后再创建新的应用。应用删除后，该 SDKAppID 对应的所有数据和服务不可恢复，请谨慎操作。

2. 单击创建新应用，在创建应用对话框中输入您的应用名称，单击确定。
   
3. 请保存 SDKAppID 信息。可在控制台总览页查看新建应用的状态、业务版本、SDKAppID、标签、创建时间以及到期时间。
   
4. 单击创建后的应用，左侧导航栏单击辅助工具 > UserSig 生成&校验，创建一个 UserID 及其对应的 UserSig，复制签名信息，后续登录使用。
   

步骤2：选择适合的方法集成 Electron SDK

IM 提供了两种方式来即成，您可以选择最合适的方案来即成：

为帮助您更好的理解 IM SDK 的各 API，我们还提供了 API 文档。

步骤3：使用 Demo

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。如运行过程出现问题，可优先通过常见问题查找解决。

步骤4：自实现

安装 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 文档。

常见问题

支持哪些平台？

目前支持 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": [
        "**/*"
      ]
    }
  ]