这两天帮朋友的客户完善 IM 项目链上遗漏的 WEB 版本，所以就有了这篇文章，我把 git history 上的某节点做了删减，觉得以后可能用得到，也方便别人就给开源出来，本身没什么难度，可以当做演示或测试可行性使用。

这里面用的 app_key 与 app_secret 都是测试版的，就 100 个份额，没事的话，大家不要捣乱，谢谢。

源码

GitHub - kvker/rongyun: 融云的可执行极简 demo, 私活项目摘录

使用：

clone 或下载源码包，打开后 cd 进入。

npm i 或 cnpm i

打开 http://localhost:8888 与 http://localhost:8888/test.html 测试 root 与 test 两名用户的聊天。

其他说明看 readme.md。

源码简单解读

原来项目是支持私聊与群聊等复杂功能的，这里只是单纯的单对单聊天，所以代码算是很精简了。

主要难点说下：

• server 获取 token 并返回给前端
• 前端监听相关状态与信息

首先是 server 端，对应文件是 server.js，有两个坑点：

1. 向融云请求的 app_key 放在 headers 中，以及 post 内容格式为 formdata
2. 请求关键参数的加密

1 的问题因为自己踩了，其实本质是不细心，希望大家不用再踩了。

2 的问题看代码即可：

const app_secret = '融云的 [app_key]'
const signAppKey = (nonce, timestamp) => {
  let base = app_secret + nonce + timestamp
  return enc.Hex.stringify(SHA1(base))
}

依赖为 npm 的 crypto-js 包，提供 enc 与 SHA1。

其他问题看源码即可，没什么太特殊的东西。

然后就是前端，主要还是官方文档的 cv 策略。

最大的坑就是命令的调用顺序：

1. 初始化
2. 监听
3. 获取 token
4. 连接
5. 通信或拉取相关数据

恩，相信我，你会踩的。

连接状态监听，负责友好提示：

信息接收监听，负责页面逻辑：

然后就是连接了：

注意 userId 是唯一的并且入融云项目库的，name 与 portraitUri 是必填任意内容的。这几个东西应该从你的数据库中取出的用户对照信息，userId 必然是唯一的。

其他代码就是常规的页面渲染等等了，不再赘述。

注意

前端代码 JS 部分为了方便改写用的是 ES6，IE 与 Safari 并不适用。