{"id":15147095,"url":"https://github.com/easemob/easemob-demo-react","last_synced_at":"2026-02-12T02:10:15.433Z","repository":{"id":25401034,"uuid":"103902890","full_name":"easemob/easemob-demo-react","owner":"easemob","description":null,"archived":false,"fork":false,"pushed_at":"2025-12-30T02:29:50.000Z","size":28502,"stargazers_count":129,"open_issues_count":51,"forks_count":100,"subscribers_count":17,"default_branch":"dev_3.0","last_synced_at":"2026-01-02T11:46:37.520Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/easemob.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2017-09-18T06:46:06.000Z","updated_at":"2025-08-29T06:54:07.000Z","dependencies_parsed_at":"2023-12-25T03:20:29.125Z","dependency_job_id":"0dc3eeee-8add-4856-8557-769c1c44cd07","html_url":"https://github.com/easemob/easemob-demo-react","commit_stats":{"total_commits":607,"total_committers":22,"mean_commits":27.59090909090909,"dds":0.5205930807248764,"last_synced_commit":"434bab461d4b401fbe73d4ad70fea8f6359d8f9e"},"previous_names":["easemob/webim"],"tags_count":283,"template":false,"template_full_name":null,"purl":"pkg:github/easemob/easemob-demo-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/easemob%2Feasemob-demo-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/easemob%2Feasemob-demo-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/easemob%2Feasemob-demo-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/easemob%2Feasemob-demo-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/easemob","download_url":"https://codeload.github.com/easemob/easemob-demo-react/tar.gz/refs/heads/dev_3.0","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/easemob%2Feasemob-demo-react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29354717,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-12T01:03:07.613Z","status":"online","status_checked_at":"2026-02-12T02:00:06.911Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-09-26T12:22:18.011Z","updated_at":"2026-02-12T02:10:15.417Z","avatar_url":"https://github.com/easemob.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Demo（WebIM）介绍\n\n\n更新时间：2023-04-10\n\n-----\n## 新增群组Mentions 功能, 使用Antd Mentions组件\n\n实现方案: \n\n文本消息新增扩展字段`em_at_list`, 表示被@的用户ID,\n\n- 'ALL' 表示@所有人\n- ['userId', 'userId2'] 表示@指定用户\n\n```javascript\nconst MENTION_ALL = 'ALL';\nlet mentionList = ['userId', 'userId1'];\nlet isMentionALl = true\n\nlet txt = {\n\tto: 'groupId',\n\tchatType: 'groupChat',\n\tmsg: '@user 你好',\n\ttype: 'txt',\n\text: {\n\t\tem_at_list: isMentionALl ? MENTION_ALL : atList\n\t}\n}\n```\n收到文本消息, 如扩展字段包含`em_at_list`则表示为@消息，\n如果`em_at_list`包含当前用户,则进行UI更新\n\n```javascript\n// onTextMessage回调中\nlet mentionList = message?.ext?.em_at_list\n// 如果存在mentionList, 并且不是当前用户多端同步的消息\nif(mentionList \u0026\u0026 message.from !== WebIM.conn.user){\n\t// 如果是@所有人或者mentionList包含当前用户ID\n\tif(mentionList === MENTION_ALL || mentionList.includes(WebIM.conn.user)){\n\t\t// 则进行UI更新\n\t}\n}\n```\n\n\n更新时间：2022-07-15\n\n-----\n\n环信即时通讯 WEB 端提供示例应用可供体验。为方便体验，建议使用你自己的 Demo 应用，具体步骤如下：\n\n1. 在 [环信即时通讯云 IM 管理后台](https://console.easemob.com/user/login) 通过邮箱注册，可以看到默认的 Demo 应用（默认应用是全功能开通的应用）；\n\n2. 在上图页面 Demo 应用右侧点击 **查看**，选择 **开放注册**；\n\n[![img](https://docs-im.easemob.com/_media/ccim/android/quickstart/3.png?w=600\u0026tok=83515c)](https://docs-im.easemob.com/_detail/ccim/android/quickstart/3.png?id=ccim%3Aandroid%3Aquickstart%3Ademo)\n\n3. 打开 Demo，点击 **服务器配置**；\n\n\n4. 将 Demo 的 App Key 填入，点击 **保存配置**；\n\n5. 然后点击 **注册用户** 进行体验。\n\n**注意**\n\n注册模式分两种，开放注册和授权注册。只有开放注册时，才可以客户端注册。\n\n- 开放注册是为了测试使用，正式环境中不推荐使用该方式注册环信账号；\n- 授权注册的流程应该是你的应用服务器通过环信提供的 REST API 注册，之后将 token 保存到你的应用服务器或返回给客户端。\n\n## 代码下载\n\n- 下载源代码：[github 源码地址](https://github.com/easemob/webim)\n\n欢迎大家提交 PR 改进和修复 WebIM 中的问题。\n\n## 运行 WebIM 工程\n\n从[IM SDK 及 Demo 下载](https://www.easemob.com/download/im) 下载 WEB SDK 压缩包，然后解压。解压后在 `demo` 文件夹下，即为 WebIM 的工程目录。\n\n1. 初始化安装\n\t- 在/demo下执行 `npm install` \n\n2. 运行demo\n\t- `cd demo \u0026\u0026 npm start`\n\t\n\t   http://localhost:3001\n\t- `cd demo \u0026\u0026 HTTPS=true npm start` (webrtc supports HTTPS only)\n\t\n\t   https://localhost:3001\n\n## 主要模块介绍\n\n\nDemo 中有几大模块\n\n- components —— 项目中定义的组件\n- config —— SDK 初始化配置\n- containers —— 容器组件，包含 contact, chat, login/regester\n- layout —— chat 部分的布局\n- selectors —— 缓存数据，优化性能\n- utils —— 数据库和工具方法\n\n\n\n\n\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feasemob%2Feasemob-demo-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feasemob%2Feasemob-demo-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feasemob%2Feasemob-demo-react/lists"}