上云无忧 > 文档中心 > 环信IM即时通讯使用教程(Web) - React Demo(WebIM)介绍
IM即时通讯
环信IM即时通讯使用教程(Web) - React Demo(WebIM)介绍

文档简介:
环信即时通讯 Web 端提供示例应用可供体验。你可以按以下步骤体验: 登录 Demo (opens new window)。 输入你的手机号,获取验证码,然后输入。 点击 登录 登录 Demo。 代码下载: 下载源代码:github 源码地址(opens new window)。 欢迎大家提交 PR 改进和修复 Web IM 中的问题。
*此产品及展示信息均由环信官方提供。免费试用 咨询热线:400-826-7010,为您提供专业的售前咨询,让您快速了解云产品,助您轻松上云! 微信咨询
  免费试用、价格特惠

环信即时通讯 Web 端提供示例应用可供体验。你可以按以下步骤体验:

  1. 登录 Demo (opens new window)

  1. 输入你的手机号,获取验证码,然后输入。

  2. 点击 登录 登录 Demo。

代码下载

下载源代码:github 源码地址(opens new window)

欢迎大家提交 PR 改进和修复 Web IM 中的问题。

运行 Web IM 项目

从 IM SDK 及 Demo 下载 (opens new window)下载 Web SDK 压缩包,然后解压。解压后在 demo 文件夹即为 Web IM 的项目目录。

  1. 安装 Demo 所需的依赖:在终端中运行 cd demo 和 npm install 命令。

  2. 运行 Demo:

    • 如果通过 HTTP 访问 Demo,在终端中运行 cd demo 和 npm start 命令。命令运行后会生成 Demo 的访问地址,例如 http://localhost:3001。通过 HTTP 访问的 Demo 中不包含音视频功能。
    • 如果通过 HTTPS 访问 Demo,在终端中运行 cd demo 和 HTTPS=true npm start 命令。命令运行后会生成 Demo 的访问地址,例如 https://localhost:3001。通过 HTTPS 访问的 Demo 中包含音视频功能。

主要模块介绍

Demo 中的主要模块如下:

模块名称 描述
components 项目中定义的组件。
config SDK 初始化配置。
containers 容器组件,包含联系人、聊天、登录和注册。
layout 聊天部分的布局。
selectors 缓存数据,优化性能。
utils 数据库和工具方法。

部分 UI 展示

相似文档
  • 环信即时通讯 Web 端提供示例应用可供体验。你可以按以下步骤体验: 登录 Demo。 Vue 2 Demo(opens new window)。 Vue 3 Demo(opens new window)。 输入你的手机号,获取验证码,然后输入。 点击 登录 登录 Demo。 代码下载: Vue 2 下载源代码:github 源码地址(opens new window) Vue 3 下载源代码:github 源码地址(opens new window) 欢迎大家提交 PR 改进和修复 Web IM 中的问题。 欢迎大家提交 PR 改进和修复 Web IM 中的问题。
  • 本页面介绍如何快速集成环信即时通讯 IM Web SDK 实现单聊。 实现原理: 下图展示在客户端发送和接收一对一文本消息的工作流程。 前提条件: 有效的环信即时通讯 IM 开发者账号; 创建环信即时通讯 IM 项目并获取 App Key; npm (opens new window); SDK 支持 IE 9+、Firefox 10+、Chrome 54+ 和 Safari 6+。
  • 本页介绍 Web 集成相关内容。 前提条件: 开始前,请注册有效的环信即时通讯 IM 开发者账号且获得 App key,见 环信即时通讯云管理后台 (opens new window)。 集成环境: 具体见 开发环境要求。 引入 SDK: 对于 JavaScript SDK,导入代码如下: import EC from 'easemob-websdk';
  • Web Vue 2 Demo: 对于 Web Vue Demo,进行私有化配置需在 Vue 2 Demo 源代码 (opens new window)中进行修改。 修改环境配置: 在 src/utils/WebIMConfig.js 文件中,进行如下修改:
  • 版本 V4.1.4 Dev 2023-3-16(开发版): 新增特性: [IM SDK] 新增 群成员自定义属性功能并增加自定义属性更新事件实现群成员设置和获取在群组中的昵称和头像等属性。 [IM SDK] 在消息创建参数中新增 deliverOnlineOnly 字段实现发消息只投递给在线用户。若开启了该功能,用户离线时消息不投递。
官方微信
联系客服
400-826-7010
7x24小时客服热线
分享
  • QQ好友
  • QQ空间
  • 微信
  • 微博
返回顶部