环信WebIM2.0版本发布，专为移动端H5打造的通讯SDK
十年磨一剑 砺得梅花香
-献给在一线开发程序员们
经过了长达三个月的封闭开发，环信WebIM2.0版本在9月22号发布，此次更新的WebIM2.0也被称为“H5版本”，一套Demo同时支持PC和H5,自适应微信/QQ和各种手机浏览器。
WebIM 2.0 (webim-h5) 在1.x的基础上, 主要做了以下更新:
- 响应式布局, 一套Demo同时支持PC和H5,自适应不同终端屏幕尺寸
- 完全基于Reac + Redux的单向数据流
- 引入ant-design组件库，方便开发者后续开发
- 适配微信/QQ和各种手机浏览器
webim-h5在线体验地址：https://webim-h5.easemob.com
安装
1.初始化安装执行npm start时如果出现
在/demo下执行 npm i
2.如果需要同时编辑sdk cd sdk && npm link && cd .. && npm link easemob-websdk
3.如果需要同时编辑webrtc cd webrtc && npm link && cd .. && npm link easemob-webrtc
4.运行demo
cd demo && npm start （requires node@>=6）
http://localhost:3001
cd demo && HTTPS=true npm start (webrtc supports HTTPS only)
https://localhost:3001
5.发布demo cd demo && npm run build /demo/build 目录下的就是可以运行和部署的版本
```FIX: 没有执行 npm link easemob-websdk
./src/config/WebIM.js
Module not found: Can't resolve 'easemob-websdk/dist/strophe-1.2.8-g.js' in '<YourRootDir>/demo/src/config'
```
3. 执行npm start时如果出现
> node scripts/start.jsFIX: 请检查node版本是否是v6.0+
/Users/wenke/www/web-im/demo/scripts/start.js:23
const {
^
SyntaxError: Unexpected token {
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:373:25)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Function.Module.runMain (module.js:441:10)
at startup (node.js:139:18)
at node.js:974:3
4. Redux State 的数据结构如下：
{
// ---------------------------------
// 响应式断点
// ---------------------------------
//xs: "480px"
//sm: "768px"
//md: "992px"
//lg: "1200px"
//xl: "1600px"
breakpoint: {
xs: false,
sm: false,
md: false,
lg: false,
xl: false
},
// ---------------------------------
// UI相关
// ---------------------------------
common: {
fetching: false,
isGetGroupAlready: true,
isGetChatRoomAlready: false,
showGroupRequestModal: false //群主管理加入群消息
},
// ---------------------------------
// 用户登录信息
// ---------------------------------
login: {
username: 'sunylt',
password: null,
token: "YWMtZ0m-opwTEeeS-e0Ko59rsU1-S6DcShHjkNXh_7qs2vV",
fetching: false,
error: false
isLogin: true,
},
// ---------------------------------
// 多语言
// ---------------------------------
i18n: {
// 已配置语言
translations: {
cn: {},
us: {},
},
// 当前语言
locale: "cn"
},
// 注册信息，没进行注册操作为{}
register: {
username: "123abcdbb",
password: "123",
fetching: false,
registerError: null
},
// 预留 暂无用
contacts: {}
// 预留 暂无用
im: {}
// ---------------------------------
// 数据实体
// ---------------------------------
entities: {
// 好友
roster: {
byName: {
name: { subscription,jid, ask, name, groups }
...
},
names: ['lwz2' ...],
// 好友列表在此，因为好友列表来源于roster，息息相关
friends: ,
},
// 群组
group: {
loadingFailed: <Boolean>,
isLoading: <Booleadn>,
rightSiderOffset: <Number>, //控制右侧群组管理面板
byId: {
groupId: {groupid, groupname},
....
},
names: [groupName_#-#_groupId, ....]
},
// 聊天室
chatroom: {
byId: {
chatId: {chatId, name, owner, affiliations_count}
...
},
names: [chatName_#-#_chatId, ....]
},
// 陌生人
stranger: {
},
// 群组成员信息
groupMember: {
groupId: {
muted: {byName: {}},//群主可见，禁言列表
byName: {
name: {name: <String: name>, affiliation: 'member'}
},
names: ,
admins: , //群管理员可见
},
...
}
// 订阅通知
subscribe: {
byFrom: {}
},
// 黑名单列表
blacklist: {
byName: {}
name:
},
// 消息
message: {
// 所有消息
byId: {
mid: {"type":"chat|groupchat|chatroom|stranger|error", "chatId": <String: chatId>},
...
}
// 单聊消息列表
chat: {
chatId: [
{message},
...
]
},
// 群组消息列表
groupChat: {
chatId: [
{message},
...
]
},
// 聊天室消息列表
chatroom: {
chatId: [
{message},
...
]
},
// 陌生人消息列表
stranger: {
chatId: [
{message},
...
]
},
// 预留 暂无用
extra: {}
// 未读消息记录
unread: {
// 好友
chat: {
chatId: <Number: unreadNum>,
...
},
// 群组
groupchat: {
chatId: <Number: unreadNum>,
...
},
// 聊天室
chatroom: {
chatId: <Number: unreadNum>,
...
},
// 陌生人
stranger: {
chatId: <Number: unreadNum>,
...
}
}
// 自己发的消息mid跟本地id对照
byMid: {
messageId: {id: <String: localId>},
...
},
},
// 加入群申请
groupRequest: {
byGid: {}
}
}
} 6 个评论
因为项目上要用，这周一下了个版本试了一下，很好用。PC之间视频ok。手机PC之间音视频之外OK。
想确认一下，手机可能是由于权限的原因，手机和PC理论上应该可以的不知道是否有相关问档可参考。
由于之前没有接触过nodejs还是挺废功夫的，希望之后的Demo能把H5和JS分开前后端分开，这样会更便于集成，总之谢谢！
正在开发类似的项目，遇到很多坑，比如发送音频消息，如何在录音完成之后就直接发送(通过audio标签的src路径)，而不是通过file浏览录音文件之后再去发送，这个问题困扰了很久，现在都还没解决，希望这个问题你们能尽快完善
