【源码下载】一款使用环信SDK实现的开源--社交demo

React webIm demo简介   --(集成环信SDK)

webIm demo 是基于环信sdk开发的一款具有单聊、群聊、聊天室、音视频等功能的应用,为了react用户能够快速集成环信 im sdk和音视频sdk,我们特使用了react全家桶,为大家提供参考。


项目截图:


16df69ea7a91facd.jpg


16df6a2287ccb151.jpg


16df6a550a6bd226.jpg


16df6a87eaa8c068.jpg


16df6aef07a80553.jpg


16df6b33eaa4edfd.jpg



项目地址:https://github.com/easemob/webim 

开发环境:
完全基于React + Redux的单向数据流,引入ant-design组件库。 

响应式布局, 一套Demo同时支持PC和H5,自适应不同终端屏幕尺寸

支持所有的现代浏览器(不支持IE6-11)

初始化安装:
- 在/demo目录下执行  
npm i
- 运行demo
- cd demo && npm start (requires node@>=6) http://localhost:3001注意:只有在https的情况才支持语音视频功能
- 打包发布demo
cd demo && npm run build /demo/build 目录下的就是可以运行和部署的版本
可能遇见的问题:
1. 如果在npm i的过程中遇到
> phantomjs-prebuilt@2.1.14 install /Users/will/work/my-project/node_modules/phantomjs-prebuilt> node install.jsPhantomJS not found on PATHDownloading https://github.com/Medium/phan ... aving to /var/folders/mh/2ptfthxj2qb49jscj1b0gjsm0000gn/T/phantomjs/phantomjs-2.1.1-macosx.zipReceiving...Error making request.Error: connect ETIMEDOUT 54.231.113.227:443 at Object.exports._errnoException (util.js:1018:11) at exports._exceptionWithHostPort (util.js:1041:20) at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1090:14)FIX:
这个问题,可以尝试 PHANTOMJS_CDNURL=https://npm.taobao.org/mirrors/phantomjs/ npm install --save-dev phantomjs-prebuilt 来解决
2. 执行npm start时如果出现
> node scripts/start.js/Users/wenke/www/web-im/demo/scripts/start.js:23const { ^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 FIX: 请检查node版本是否是v6.0+ 
项目模块
本项目包含两部分:一部分是项目主模块,这部分主要包含了项目的业务逻辑,比如增,删好友、音视频聊天、信息修改、群设置等
另一部分是 环信sdk集成(包含音视频sdk)


16e1ba1c27a529fe.jpg



src项目结构


16e1bd9c61944e5f.jpg



更多关于环信sdk[集成文档]
http://docs-im.easemob.com/im/web/intro/start 


参与贡献
如果你有什么好的想法,或者好的实现,可以通过下边的步骤参与进来,让我们一起把这个项目做得更好,欢迎参与
1.Fork本仓库
2.新建feature_xxx分支 (单独创建一个实现你自己想法的分支)
3.提交代码
4.新建Pull Request
5.等待我们的Review & Merge

0 个评论

要回复文章请先登录注册

知识价值的认可,源自您的赞赏

扫描二维码,你的支付将由imGeek代收后转给对方

×