webim

webim

2
回复

【环信官方外包一个项目】利用环信IM实现一个在线白板 环信

KevinGong 回复了问题 • 3 人关注 • 762 次浏览 • 2017-09-25 17:48 • 来自相关话题

0
评论

【开源项目】一个基于环信IM开发的开源的私密社交APP-Baby 即时通信 Baby

seven。 发表了文章 • 876 次浏览 • 2017-08-31 14:49 • 来自相关话题

Baby这个开源项目基于环信IM开发,刚开始选择IM的时候,看到知乎上黑环信的人挺多的,就亲自下载了几家IM的demo源码跑一遍,从功能、集成难易和消息稳定几个方面对比,最终还是选择了环信。集成这方面环信做的真不错,尤其是有了EaseUi这个包,基本上一天就能集成完毕。项目运行至今没有出现过什么问题,发送消息挺稳定的。先上效果图




开屏页的登录和注册




编辑个人信息




相册页面




首页的Moment
版本更新:
 
version 1.6
加入Tinker 热修复更新部分依赖修复大量细节问题,加入部分注释

version 1.5
bug fixupdate sth

version 1.4
增加长按删除功能优化Rxbus订阅加载数据外国友人优化的一些细节等等

version 1.3
增加了评论功能优化了相册加载修复了一些内存泄漏等等

version 1.2
修复了一些Bug把登陆注册事件换了个Zip操作符更符合流的思想

version 1.1
修复了主页背景无法切换的问题修复了聊天推送的问题修了语音视频的问题做了一些细节修改
Download



安装包下载体验
 
github地址
github源码
 Development Environment & Library
 
MVP

这个项目是基于MVP框架写的(大体上,聊天那块直接用环信的了),大部分Base类参考FastAndroid里边的基类,参考这个很快就能布好基本的MVP架构。本来是有考虑过MVVM后来想想还是先学习一下MVP吧,看过几个MVVM项目感觉还是挺好用的,不过还是BETA版不知道有没有什么坑。

Material Design

早就手痒想体验一把V7包里边的各种控件了,特喜欢coordinatorlayout和collapsingtoolbarlayout的互动让Tollbar隐藏又现的感觉,但是看起来好看还是要点代价的,在这里捣鼓了不少时间,尤其是collapsingtoolbarlayout的Expanded固定让我Google了好久,因为用英文搜索可能我表达的不太好,最后竟然是一句nestedScroll(false)就可以了。。。。 还是感谢Stackoveflow里边的大腿吧。

Dagger2

依赖注入Dagger2,也是我早就想用的一个框架了,理由是各种配合Mvp十分方便和好用,渐渐也能体会到一次注入到处可用的快感。不过一个新技术真的学习成本,国内没什么中文文档介绍,看国外的看的云里雾里。原理看的明白,用起来好像不太知道如何使用,尤其是在@inject之后对象,也可以在别的地方Inject,原本是被Inject方后来也成了Module提供方。虽然到最后原理还不是特别明白这里,但还是不阻碍用起来的快感。

Realm

一开始被新技术吸引到的是不会放过任何新东西的包括Realm,不过进了坑不代表这个坑可以跳阿。由于我这次用到了leacncloud,Realm感觉会和LeanCloud的子类化冲突让你只能选择其中之一,不过这个也算了,Leancloud提供了类似Map的Put方法也可以接受就是麻烦了点。但是被坑到的地方是Realm所谓的自动数据同步竟然是一改就是改真实的数据,并不是数据的拷贝。。。感觉和我使用到要缓存的数据有点冲突,因为这个Moment里边的项是有点赞的,点赞要修改当前Recycleview的数据(修改数据要开事务)。修改数据后会出现一些很奇怪的现象,不在Recycleview当前Item会跳到当前Item,点赞的动画也会消失。。。真的是想破脑袋也解决不了,就直接跳坑了。最后感觉这个Realm在保存不跟服务器需要同步的数据会好点。

LeanCloud

用LeanCloud是因为在知乎太多吹它的人了而且它的确在BAAS这方面功能比较多(后来才发现即时通信没有语音和视频),所以就尝试使用了,SDK整体来说是不错的都挺好用的,满足了我对存储方面的要求。不过就在我开发的这几天,貌似稳定性没有想象中那么好,好几次上传个头像都会SocketTimeOut,查询也会有点慢,不过还好都在接受范围内(不过要是到了收费的标准我就接受不了)。

环信

baby这个开源项目基于环信IM开发,刚开始选择IM的时候,看到知乎上黑环信的人挺多的,就亲自下载了几家IM的demo源码跑一遍,从功能、集成难易和消息稳定几个方面对比,最终还是选择了环信。集成这方面环信做的真不错,尤其是有了EaseUi这个包,基本上一天就能集成完毕。项目运行至今没有出现过什么问题,发送消息挺稳定的。

Rxjava、RxAndroid

Rxjava我从第一眼看到了就喜欢上了(个人特喜欢那种通过.设置完成的感觉),接触也有几个月,一开始就和Retrofit 、Okhttp一起使用。学习成本还是要有的阿,看了不知道多少篇关于Rxjava使用的文章和例子,对里边的操作符也仅仅停留在那几个最常用的,其他一大堆好多都没用过,看来还用得不够。

Glide

Glide也是一个后来居上让我喜欢的图片加载库,一开始我喜欢picasso 是觉得轻巧而且好用有保证(主要是我偶像Jake Wharton主导,有加成),慢慢觉得Picasso对内存没有Glide来的友好,Glide在加载速度方面也领先,虽然整个库代码量是Picasso的几倍,但是比起重要的内存和用户体验来说还是Glide的领先一筹。

Butterknife、Ucrop等等

当让还有其他的一些润色的轮子啦,不过不是那么重要就不一一感谢啦。

Thanks
感谢Github、LeanCloud、环信、还有造那么多轮子给我们用的Square FaceBook Google的大大们。Thanks for improving my code m-ezzat.

Contacts
Email:379489343zhi@gmail.comQQ:379489343
 Copyright 2016 Roger ou

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License. 查看全部
   Baby这个开源项目基于环信IM开发,刚开始选择IM的时候,看到知乎上黑环信的人挺多的,就亲自下载了几家IM的demo源码跑一遍,从功能、集成难易和消息稳定几个方面对比,最终还是选择了环信。集成这方面环信做的真不错,尤其是有了EaseUi这个包,基本上一天就能集成完毕。项目运行至今没有出现过什么问题,发送消息挺稳定的。
先上效果图

003.png

开屏页的登录和注册


001.png

编辑个人信息


002.png

相册页面


004.png

首页的Moment


版本更新:
 
version 1.6
  1. 加入Tinker 热修复
  2. 更新部分依赖
  3. 修复大量细节问题,加入部分注释


version 1.5
  1. bug fix
  2. update sth


version 1.4
  1. 增加长按删除功能
  2. 优化Rxbus订阅加载数据
  3. 外国友人优化的一些细节
  4. 等等


version 1.3
  1. 增加了评论功能
  2. 优化了相册加载
  3. 修复了一些内存泄漏
  4. 等等


version 1.2
  1. 修复了一些Bug
  2. 把登陆注册事件换了个Zip操作符更符合流的思想


version 1.1
  1. 修复了主页背景无法切换的问题
  2. 修复了聊天推送的问题
  3. 修了语音视频的问题
  4. 做了一些细节修改

Download

 
github地址

 Development Environment & Library
 
MVP

这个项目是基于MVP框架写的(大体上,聊天那块直接用环信的了),大部分Base类参考FastAndroid里边的基类,参考这个很快就能布好基本的MVP架构。本来是有考虑过MVVM后来想想还是先学习一下MVP吧,看过几个MVVM项目感觉还是挺好用的,不过还是BETA版不知道有没有什么坑。

Material Design

早就手痒想体验一把V7包里边的各种控件了,特喜欢coordinatorlayout和collapsingtoolbarlayout的互动让Tollbar隐藏又现的感觉,但是看起来好看还是要点代价的,在这里捣鼓了不少时间,尤其是collapsingtoolbarlayout的Expanded固定让我Google了好久,因为用英文搜索可能我表达的不太好,最后竟然是一句nestedScroll(false)就可以了。。。。 还是感谢Stackoveflow里边的大腿吧。

Dagger2

依赖注入Dagger2,也是我早就想用的一个框架了,理由是各种配合Mvp十分方便和好用,渐渐也能体会到一次注入到处可用的快感。不过一个新技术真的学习成本,国内没什么中文文档介绍,看国外的看的云里雾里。原理看的明白,用起来好像不太知道如何使用,尤其是在@inject之后对象,也可以在别的地方Inject,原本是被Inject方后来也成了Module提供方。虽然到最后原理还不是特别明白这里,但还是不阻碍用起来的快感。

Realm

一开始被新技术吸引到的是不会放过任何新东西的包括Realm,不过进了坑不代表这个坑可以跳阿。由于我这次用到了leacncloud,Realm感觉会和LeanCloud的子类化冲突让你只能选择其中之一,不过这个也算了,Leancloud提供了类似Map的Put方法也可以接受就是麻烦了点。但是被坑到的地方是Realm所谓的自动数据同步竟然是一改就是改真实的数据,并不是数据的拷贝。。。感觉和我使用到要缓存的数据有点冲突,因为这个Moment里边的项是有点赞的,点赞要修改当前Recycleview的数据(修改数据要开事务)。修改数据后会出现一些很奇怪的现象,不在Recycleview当前Item会跳到当前Item,点赞的动画也会消失。。。真的是想破脑袋也解决不了,就直接跳坑了。最后感觉这个Realm在保存不跟服务器需要同步的数据会好点。

LeanCloud

用LeanCloud是因为在知乎太多吹它的人了而且它的确在BAAS这方面功能比较多(后来才发现即时通信没有语音和视频),所以就尝试使用了,SDK整体来说是不错的都挺好用的,满足了我对存储方面的要求。不过就在我开发的这几天,貌似稳定性没有想象中那么好,好几次上传个头像都会SocketTimeOut,查询也会有点慢,不过还好都在接受范围内(不过要是到了收费的标准我就接受不了)。

环信

baby这个开源项目基于环信IM开发,刚开始选择IM的时候,看到知乎上黑环信的人挺多的,就亲自下载了几家IM的demo源码跑一遍,从功能、集成难易和消息稳定几个方面对比,最终还是选择了环信。集成这方面环信做的真不错,尤其是有了EaseUi这个包,基本上一天就能集成完毕。项目运行至今没有出现过什么问题,发送消息挺稳定的。

Rxjava、RxAndroid

Rxjava我从第一眼看到了就喜欢上了(个人特喜欢那种通过.设置完成的感觉),接触也有几个月,一开始就和Retrofit 、Okhttp一起使用。学习成本还是要有的阿,看了不知道多少篇关于Rxjava使用的文章和例子,对里边的操作符也仅仅停留在那几个最常用的,其他一大堆好多都没用过,看来还用得不够。

Glide

Glide也是一个后来居上让我喜欢的图片加载库,一开始我喜欢picasso 是觉得轻巧而且好用有保证(主要是我偶像Jake Wharton主导,有加成),慢慢觉得Picasso对内存没有Glide来的友好,Glide在加载速度方面也领先,虽然整个库代码量是Picasso的几倍,但是比起重要的内存和用户体验来说还是Glide的领先一筹。

Butterknife、Ucrop等等

当让还有其他的一些润色的轮子啦,不过不是那么重要就不一一感谢啦。

Thanks
  • 感谢Github、LeanCloud、环信、还有造那么多轮子给我们用的Square FaceBook Google的大大们。
  • Thanks for improving my code m-ezzat.


Contacts

 
Copyright 2016 Roger ou

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
6
评论

【新手快速入门】集成环信常见问题+解决方案汇总 常见问题

dujiepeng 发表了文章 • 6111 次浏览 • 2017-05-22 15:51 • 来自相关话题

   这里整理了集成环信的常见问题和一些功能的实现思路,希望能帮助到大家。感谢热心的开发者贡献,大家在观看过程中有不明白的地方欢迎直接跟帖咨询。
 
ios篇
APNs证书创建和上传到环信后台头像昵称的简述和处理方案音视频离线推送Demo实现环信服务器聊天记录保存多久?离线收不到好友请求IOS中环信聊天窗口如何实现文件发送和预览的功能ios集成常见问题环信推送的一些常见问题实现名片|红包|话题聊天室等自定义cell
 
Android篇
环信3.0SDK集成小米推送教程EaseUI库中V4、v7包冲突解决方案Android EaseUI里的百度地图替换为高德地图android扩展消息(名片集成)关于会话列表的置顶聊天java.lang.UnsatisfiedLinkError: 的问题android 端 app 后台被杀死收不到消息的解决方案
昵称头像篇
android中如何显示开发者服务器上的昵称和头像 Android中显示头像(接上一篇文章看)环信(Android)设置头像和昵称的方法(最简单暴力的基于环信demo的集成)IOS中如何显示开发者服务器上的昵称和头像【环信公开课第12期视频回放】-所有关于环信IM昵称头像的问题听这课就够了
 
直播篇
一言不合你就搞个直播APP
 
客服集成
IM-SDK和客服SDK并存开发指南—Android篇IM-SDK和客服SDK并存开发指南—iOS篇
 
开源项目
Android简版demoios简版demo凡信2.0:超仿微信的开源项目 凡信3.0:携直播和红包而来高仿微信:Github 3,515 Star方圆十里:环信编程大赛冠军项目泛聊:定一个小目标写一个QQSlack聊天机器人:一天时间做一个聊天机器人TV视频通话:在电视上视频通话视频通话:Android手机视频通话酷信:ios高仿微信公众号助手:与订阅用户聊天沟通
 
持续更新ing...小伙伴们还有什么想知道欢迎跟帖提出。
  查看全部
   这里整理了集成环信的常见问题和一些功能的实现思路,希望能帮助到大家。感谢热心的开发者贡献,大家在观看过程中有不明白的地方欢迎直接跟帖咨询。
 
ios篇

 
Android篇

昵称头像篇

 
直播篇
  1. 一言不合你就搞个直播APP

 
客服集成
  1. IM-SDK和客服SDK并存开发指南—Android篇
  2. IM-SDK和客服SDK并存开发指南—iOS篇

 
开源项目

 
持续更新ing...小伙伴们还有什么想知道欢迎跟帖提出。
 
3
评论

Vue-cli整合环信WebIM webim vue vuejs

魂之挽歌 发表了文章 • 86 次浏览 • 2017-10-11 17:34 • 来自相关话题

[b]今天碰到了一个问题,就是conn.listen里面的函数没法执行,目前不知道怎么解决[/b]baidu下,这个好像是不支持js严格模式下的调用,看来不行了,希望有大神来改造下
回调函数的参数都是报错TypeError: 'caller' and 'arguments' are restricted function properties and cannot be accessed in this context.

 
 由于准备做一个社交性的网站,(暂时不考虑app),前端使用的vuejs+vux,使用vue-cli安装,发现环信有提供react的整合,并没有vuejs版本的,只好自己来动手, 由于是第一次用vuejs开发,硬着头皮来,各种import 都是不行,strophe这个js是个自执行的闭包函数,网上各种搜也没有找到方法,也尝试过直接在index.html引入并执行,但是打包的时候会报错,摸索了一个星期(主要是生手加上头脑简单), 今天找到了不报XXX未定义之类的,打包也正常。可能有朋友用得到,提供一个思路,我暂时只想到了这样,希望有比我简单快捷的方法
 
1.  官方的  npm install easemob-websdk --save
 
2.  npm install strophe.js (这里注意加上.js)
 
3.找到node_modules/easemob-websdk/src/connection.js
在里面引入strophe.js, 我是在第二行假的
var Strophe = require('../../strophe.js').Strophe;





 
然后再大约667行左右加入config 定义





并在4205行左右使用这个定义





 
4. 找到node_modules/strophe.js/strophe.js
大约在2883行左右加入两个函数





 
 
好了,现在基本上可以像vuejs那样使用了
 

























  查看全部
[b]今天碰到了一个问题,就是conn.listen里面的函数没法执行,目前不知道怎么解决[/b]
baidu下,这个好像是不支持js严格模式下的调用,看来不行了,希望有大神来改造下
回调函数的参数都是报错
TypeError: 'caller' and 'arguments' are restricted function properties and cannot be accessed in this context.

 


 由于准备做一个社交性的网站,(暂时不考虑app),前端使用的vuejs+vux,使用vue-cli安装,发现环信有提供react的整合,并没有vuejs版本的,只好自己来动手, 由于是第一次用vuejs开发,硬着头皮来,各种import 都是不行,strophe这个js是个自执行的闭包函数,网上各种搜也没有找到方法,也尝试过直接在index.html引入并执行,但是打包的时候会报错,摸索了一个星期(主要是生手加上头脑简单), 今天找到了不报XXX未定义之类的,打包也正常。可能有朋友用得到,提供一个思路,我暂时只想到了这样,希望有比我简单快捷的方法
 
1.  官方的  npm install easemob-websdk --save
 
2.  npm install strophe.js (这里注意加上.js)
 
3.找到node_modules/easemob-websdk/src/connection.js
在里面引入strophe.js, 我是在第二行假的
var Strophe = require('../../strophe.js').Strophe;

1.png

 
然后再大约667行左右加入config 定义

2.png

并在4205行左右使用这个定义

3.png

 
4. 找到node_modules/strophe.js/strophe.js
大约在2883行左右加入两个函数

4.png

 
 
好了,现在基本上可以像vuejs那样使用了
 

5.png


6.png


7.png


8.png


9.png

 
0
评论

环信WebIM2.0版本发布,专为移动端H5打造的通讯SDK webim h5 产品更新

产品更新 发表了文章 • 102 次浏览 • 2017-09-22 18:18 • 来自相关话题

十年磨一剑 砺得梅花香
-献给在一线开发程序员们 
经过了长达三个月的封闭开发,环信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.初始化安装
在/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 目录下的就是可以运行和部署的版本执行npm start时如果出现```
./src/config/WebIM.js
Module not found: Can't resolve 'easemob-websdk/dist/strophe-1.2.8-g.js' in '<YourRootDir>/demo/src/config'
```FIX: 没有执行 npm link easemob-websdk
 
3. 执行npm start时如果出现> node scripts/start.js

/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:3FIX: 请检查node版本是否是v6.0+
 
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: {}
}
}
} 查看全部
十年磨一剑 砺得梅花香
-献给在一线开发程序员们
 
经过了长达三个月的封闭开发,环信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.初始化安装
在/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 目录下的就是可以运行和部署的版本
执行npm start时如果出现
```
./src/config/WebIM.js
Module not found: Can't resolve 'easemob-websdk/dist/strophe-1.2.8-g.js' in '<YourRootDir>/demo/src/config'
```
FIX: 没有执行 npm link easemob-websdk
 
3. 执行npm start时如果出现
> node scripts/start.js

/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
FIX: 请检查node版本是否是v6.0+
 
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: {}
}
}
}
0
回复

webIM reactnative 如何修改群昵称? react_native webim

回复

leslieliu 发起了问题 • 1 人关注 • 191 次浏览 • 2017-08-25 11:25 • 来自相关话题

0
回复

web im集成后,发送消息成功的回调函数不执行 webim

回复

kidoo1012 发起了问题 • 1 人关注 • 216 次浏览 • 2017-06-25 23:28 • 来自相关话题

0
回复

WEBIM中发送图片如何通过BASE64编码或者APP中地址路径来发送 webim

回复

cjy1002 发起了问题 • 1 人关注 • 190 次浏览 • 2017-06-12 09:59 • 来自相关话题

4
回复

偶尔出现不明错误Error in connection establishment: net::net::<unknown> webim

木云落 回复了问题 • 3 人关注 • 524 次浏览 • 2017-05-27 13:09 • 来自相关话题

0
回复

环信WEBIm的那个coolkie是在哪里生成的?我重新生成COOKIE都不起效?看我下面的截图 webim

回复

lzf520 发起了问题 • 1 人关注 • 218 次浏览 • 2017-05-19 09:14 • 来自相关话题

2
回复

为什么webim按照开发文档写TOKEN登录的时候 conn.open(options)报错? webim

lzf520 回复了问题 • 2 人关注 • 168 次浏览 • 2017-05-18 15:12 • 来自相关话题

0
回复

webIM webim

回复

苜宝小叔 发起了问题 • 1 人关注 • 215 次浏览 • 2017-05-03 14:06 • 来自相关话题

0
回复

webim集成 webim

回复

时间不等人❀ 发起了问题 • 1 人关注 • 213 次浏览 • 2017-05-02 10:17 • 来自相关话题

1
回复

web im webim

回复

时间不等人❀ 回复了问题 • 1 人关注 • 171 次浏览 • 2017-05-02 10:01 • 来自相关话题

1
回复
3
回复

webim 收到消息后strophe.Websocket.prototype._onMessage 能被调用,handleMessage 没被调用 WebIM API webim

wansheg 回复了问题 • 2 人关注 • 321 次浏览 • 2017-04-10 15:46 • 来自相关话题

1
回复

webim发送cmd消息 如何定义? 环信_WebIM webim

木云落 回复了问题 • 2 人关注 • 241 次浏览 • 2017-04-10 12:49 • 来自相关话题

1
回复

webim在demo中如何获取自己服务器的头像和昵称? 头像 昵称 扩展 环信_WebIM 昵称 头像 webim

环信沈冲 回复了问题 • 2 人关注 • 449 次浏览 • 2017-03-24 14:12 • 来自相关话题

1
回复

web IM 回调事件为何触发了两次 webim

zhangyb 回复了问题 • 2 人关注 • 287 次浏览 • 2017-03-22 17:13 • 来自相关话题

1
回复

我的电脑是x201i,win10,使用webim,点击联系人为什么聊天窗不见了 webim系统设配 webim

zhangyb 回复了问题 • 2 人关注 • 267 次浏览 • 2017-03-14 11:24 • 来自相关话题

2
最佳

环信服务端集成,如何集成? iOS Android webim

执念 回复了问题 • 3 人关注 • 2456 次浏览 • 2017-03-13 11:36 • 来自相关话题

3
回复

webim在登录系统时同时登录环信账号,登录成功跳转其他页面时失败 提示登录失败 跳转页面时登录失败 webim

zhangyb 回复了问题 • 4 人关注 • 1431 次浏览 • 2017-03-05 22:14 • 来自相关话题

2
回复

amr 音频 webim播放问题 arm 音频 webim

lizg 回复了问题 • 2 人关注 • 475 次浏览 • 2017-02-15 16:44 • 来自相关话题

1
回复

webim关于https设置问题 https webim

zhangyb 回复了问题 • 2 人关注 • 509 次浏览 • 2017-01-17 12:21 • 来自相关话题

1
回复

webim 上传图片的 width height获取 webim

baoshu 回复了问题 • 2 人关注 • 491 次浏览 • 2016-12-22 17:07 • 来自相关话题

2
回复

最新版本web IM的demo不会修改 webim

孙新乐 回复了问题 • 2 人关注 • 563 次浏览 • 2016-12-10 12:24 • 来自相关话题

7
回复

webim 为什么刷新后就又要重新登录啊?怎么才能不让它重新登录 登录 webim

baoshu 回复了问题 • 5 人关注 • 1046 次浏览 • 2016-11-23 12:01 • 来自相关话题

0
评论

【产品快递】Web IM V1.1.3发布,支持自动重连 webim 产品快递

产品更新 发表了文章 • 891 次浏览 • 2016-11-01 15:18 • 来自相关话题

功能改进:

DEMO
支持 Windows SDK。http://www.easemob.com/download/im 

新增黑名单功能。

获取聊天室列表: 支持分页、下拉刷新,新增以下2个参数:pagenum 和 pagesize。

调试更方便,webpack 支持开发和生产模式。

`npm run dev`:开发模式,支持热加载,启动一个供调试的webserve http://localhost:3000。 

`npm run prod`:生产模式,编译速度更快。

群组增加以下功能:创建群组、修改群组名称、修改群组简介、群组成员管理、加入公开群。

strophe 从 v1.2.2 升级到 v1.2.8,在生产模式使用 strophe-1.2.8.min.js, 在开发模式使用 strophe.js。

SDK
 支持自动重连: 在 webim.config.js 文件中新增相关参数 `autoReconnectNumMax` 和`autoReconnectInterval`。
Bug fixes:

DEMO
 增加 `babel-core/browser-polyfill.js`文件,修复了 IE 不支持 HTML5 elements 的 bug。

 修复了有未读消息时点击联系人不生效的bug。

 修复了strophe.js v1.2.8在IE9中使用BOSH会报错的bug。
https://github.com/strophe/strophejs/issues/213

SDK
修复了存在大量离线消息时收发消息延迟的bug。客户端将发送ack应答消息的速度限制在5个/秒,不影响其他正常消息。

将心跳消息从空body的 json message 切换为 ping/pong iq。前者会作为离线消息被XMPP Server缓存。
 
webim体验:http://webim.easemob.com/

版本历史:更新日志     
 
SDK下载:点击下载 查看全部
358-210(2).jpg

  • 功能改进:


DEMO

支持 Windows SDK。http://www.easemob.com/download/im 

新增黑名单功能。

获取聊天室列表: 支持分页、下拉刷新,新增以下2个参数:pagenum 和 pagesize。

调试更方便,webpack 支持开发和生产模式。

`npm run dev`:开发模式,支持热加载,启动一个供调试的webserve http://localhost:3000。 

`npm run prod`:生产模式,编译速度更快。

群组增加以下功能:创建群组、修改群组名称、修改群组简介、群组成员管理、加入公开群。

strophe 从 v1.2.2 升级到 v1.2.8,在生产模式使用 strophe-1.2.8.min.js, 在开发模式使用 strophe.js。



SDK

 支持自动重连: 在 webim.config.js 文件中新增相关参数 `autoReconnectNumMax` 和`autoReconnectInterval`。


  • Bug fixes:


DEMO

 增加 `babel-core/browser-polyfill.js`文件,修复了 IE 不支持 HTML5 elements 的 bug。

 修复了有未读消息时点击联系人不生效的bug。

 修复了strophe.js v1.2.8在IE9中使用BOSH会报错的bug。
https://github.com/strophe/strophejs/issues/213



SDK

修复了存在大量离线消息时收发消息延迟的bug。客户端将发送ack应答消息的速度限制在5个/秒,不影响其他正常消息。

将心跳消息从空body的 json message 切换为 ping/pong iq。前者会作为离线消息被XMPP Server缓存。


 
webim体验:http://webim.easemob.com/

版本历史:更新日志     
 
SDK下载:点击下载
条新动态, 点击查看
zl

zl 回答了问题 • 2016-02-17 14:17 • 1 个回复 不感兴趣

webIM如何通过图片路径发送图片

赞同来自:

用hbuider ,构建hybird app,使用环信webIM作为Im通讯,发送图片遇到问题,纯浏览器中使用webIM是可以用选图片的方式直接调相机拍照的,但是混合app的话,用的是三方封装的api来调的手机系统拍照,在混合中webIM纯JS调用相机功能不可... 显示全部 »
用hbuider ,构建hybird app,使用环信webIM作为Im通讯,发送图片遇到问题,纯浏览器中使用webIM是可以用选图片的方式直接调相机拍照的,但是混合app的话,用的是三方封装的api来调的手机系统拍照,在混合中webIM纯JS调用相机功能不可用,但是三方封装的api调用后拿到的是图片路径,而webIM发送图片用的是表单,是通过inputid来取的图片对象,发的时候是发的表单数据,这个表单获取图片对象是sdk中封装的,通过路径获取的图片对象和表单获取的不一样,没法直接用,对SDK的改动比较大。

----------------解决方案:可以调rest api 上传 , 上传成功后调用web sdk 的sendPictureMessage方法
 
lizg

lizg 回答了问题 • 2016-06-12 19:01 • 1 个回复 不感兴趣

webim发送的图片,多久会删除?

赞同来自:

webim发送图片是先上传到服务器,服务器保存14天
webim发送图片是先上传到服务器,服务器保存14天
lizg

lizg 回答了问题 • 2016-07-25 19:14 • 1 个回复 不感兴趣

webim加入聊天室406

赞同来自:

获取一下聊天室详情,看下是不是成员满了
获取一下聊天室详情,看下是不是成员满了
环信沈冲

环信沈冲 回答了问题 • 2016-12-26 14:32 • 2 个回复 不感兴趣

环信服务端集成,如何集成?

赞同来自:

客户端直接集成SDK即可,服务端可以根据自己需求调用相应的rest接口集成
客户端直接集成SDK即可,服务端可以根据自己需求调用相应的rest接口集成
2
回复

【环信官方外包一个项目】利用环信IM实现一个在线白板 环信

KevinGong 回复了问题 • 3 人关注 • 762 次浏览 • 2017-09-25 17:48 • 来自相关话题

0
评论

【开源项目】一个基于环信IM开发的开源的私密社交APP-Baby 即时通信 Baby

seven。 发表了文章 • 876 次浏览 • 2017-08-31 14:49 • 来自相关话题

Baby这个开源项目基于环信IM开发,刚开始选择IM的时候,看到知乎上黑环信的人挺多的,就亲自下载了几家IM的demo源码跑一遍,从功能、集成难易和消息稳定几个方面对比,最终还是选择了环信。集成这方面环信做的真不错,尤其是有了EaseUi这个包,基本上一天就能集成完毕。项目运行至今没有出现过什么问题,发送消息挺稳定的。先上效果图




开屏页的登录和注册




编辑个人信息




相册页面




首页的Moment
版本更新:
 
version 1.6
加入Tinker 热修复更新部分依赖修复大量细节问题,加入部分注释

version 1.5
bug fixupdate sth

version 1.4
增加长按删除功能优化Rxbus订阅加载数据外国友人优化的一些细节等等

version 1.3
增加了评论功能优化了相册加载修复了一些内存泄漏等等

version 1.2
修复了一些Bug把登陆注册事件换了个Zip操作符更符合流的思想

version 1.1
修复了主页背景无法切换的问题修复了聊天推送的问题修了语音视频的问题做了一些细节修改
Download



安装包下载体验
 
github地址
github源码
 Development Environment & Library
 
MVP

这个项目是基于MVP框架写的(大体上,聊天那块直接用环信的了),大部分Base类参考FastAndroid里边的基类,参考这个很快就能布好基本的MVP架构。本来是有考虑过MVVM后来想想还是先学习一下MVP吧,看过几个MVVM项目感觉还是挺好用的,不过还是BETA版不知道有没有什么坑。

Material Design

早就手痒想体验一把V7包里边的各种控件了,特喜欢coordinatorlayout和collapsingtoolbarlayout的互动让Tollbar隐藏又现的感觉,但是看起来好看还是要点代价的,在这里捣鼓了不少时间,尤其是collapsingtoolbarlayout的Expanded固定让我Google了好久,因为用英文搜索可能我表达的不太好,最后竟然是一句nestedScroll(false)就可以了。。。。 还是感谢Stackoveflow里边的大腿吧。

Dagger2

依赖注入Dagger2,也是我早就想用的一个框架了,理由是各种配合Mvp十分方便和好用,渐渐也能体会到一次注入到处可用的快感。不过一个新技术真的学习成本,国内没什么中文文档介绍,看国外的看的云里雾里。原理看的明白,用起来好像不太知道如何使用,尤其是在@inject之后对象,也可以在别的地方Inject,原本是被Inject方后来也成了Module提供方。虽然到最后原理还不是特别明白这里,但还是不阻碍用起来的快感。

Realm

一开始被新技术吸引到的是不会放过任何新东西的包括Realm,不过进了坑不代表这个坑可以跳阿。由于我这次用到了leacncloud,Realm感觉会和LeanCloud的子类化冲突让你只能选择其中之一,不过这个也算了,Leancloud提供了类似Map的Put方法也可以接受就是麻烦了点。但是被坑到的地方是Realm所谓的自动数据同步竟然是一改就是改真实的数据,并不是数据的拷贝。。。感觉和我使用到要缓存的数据有点冲突,因为这个Moment里边的项是有点赞的,点赞要修改当前Recycleview的数据(修改数据要开事务)。修改数据后会出现一些很奇怪的现象,不在Recycleview当前Item会跳到当前Item,点赞的动画也会消失。。。真的是想破脑袋也解决不了,就直接跳坑了。最后感觉这个Realm在保存不跟服务器需要同步的数据会好点。

LeanCloud

用LeanCloud是因为在知乎太多吹它的人了而且它的确在BAAS这方面功能比较多(后来才发现即时通信没有语音和视频),所以就尝试使用了,SDK整体来说是不错的都挺好用的,满足了我对存储方面的要求。不过就在我开发的这几天,貌似稳定性没有想象中那么好,好几次上传个头像都会SocketTimeOut,查询也会有点慢,不过还好都在接受范围内(不过要是到了收费的标准我就接受不了)。

环信

baby这个开源项目基于环信IM开发,刚开始选择IM的时候,看到知乎上黑环信的人挺多的,就亲自下载了几家IM的demo源码跑一遍,从功能、集成难易和消息稳定几个方面对比,最终还是选择了环信。集成这方面环信做的真不错,尤其是有了EaseUi这个包,基本上一天就能集成完毕。项目运行至今没有出现过什么问题,发送消息挺稳定的。

Rxjava、RxAndroid

Rxjava我从第一眼看到了就喜欢上了(个人特喜欢那种通过.设置完成的感觉),接触也有几个月,一开始就和Retrofit 、Okhttp一起使用。学习成本还是要有的阿,看了不知道多少篇关于Rxjava使用的文章和例子,对里边的操作符也仅仅停留在那几个最常用的,其他一大堆好多都没用过,看来还用得不够。

Glide

Glide也是一个后来居上让我喜欢的图片加载库,一开始我喜欢picasso 是觉得轻巧而且好用有保证(主要是我偶像Jake Wharton主导,有加成),慢慢觉得Picasso对内存没有Glide来的友好,Glide在加载速度方面也领先,虽然整个库代码量是Picasso的几倍,但是比起重要的内存和用户体验来说还是Glide的领先一筹。

Butterknife、Ucrop等等

当让还有其他的一些润色的轮子啦,不过不是那么重要就不一一感谢啦。

Thanks
感谢Github、LeanCloud、环信、还有造那么多轮子给我们用的Square FaceBook Google的大大们。Thanks for improving my code m-ezzat.

Contacts
Email:379489343zhi@gmail.comQQ:379489343
 Copyright 2016 Roger ou

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License. 查看全部
   Baby这个开源项目基于环信IM开发,刚开始选择IM的时候,看到知乎上黑环信的人挺多的,就亲自下载了几家IM的demo源码跑一遍,从功能、集成难易和消息稳定几个方面对比,最终还是选择了环信。集成这方面环信做的真不错,尤其是有了EaseUi这个包,基本上一天就能集成完毕。项目运行至今没有出现过什么问题,发送消息挺稳定的。
先上效果图

003.png

开屏页的登录和注册


001.png

编辑个人信息


002.png

相册页面


004.png

首页的Moment


版本更新:
 
version 1.6
  1. 加入Tinker 热修复
  2. 更新部分依赖
  3. 修复大量细节问题,加入部分注释


version 1.5
  1. bug fix
  2. update sth


version 1.4
  1. 增加长按删除功能
  2. 优化Rxbus订阅加载数据
  3. 外国友人优化的一些细节
  4. 等等


version 1.3
  1. 增加了评论功能
  2. 优化了相册加载
  3. 修复了一些内存泄漏
  4. 等等


version 1.2
  1. 修复了一些Bug
  2. 把登陆注册事件换了个Zip操作符更符合流的思想


version 1.1
  1. 修复了主页背景无法切换的问题
  2. 修复了聊天推送的问题
  3. 修了语音视频的问题
  4. 做了一些细节修改

Download

 
github地址

 Development Environment & Library
 
MVP

这个项目是基于MVP框架写的(大体上,聊天那块直接用环信的了),大部分Base类参考FastAndroid里边的基类,参考这个很快就能布好基本的MVP架构。本来是有考虑过MVVM后来想想还是先学习一下MVP吧,看过几个MVVM项目感觉还是挺好用的,不过还是BETA版不知道有没有什么坑。

Material Design

早就手痒想体验一把V7包里边的各种控件了,特喜欢coordinatorlayout和collapsingtoolbarlayout的互动让Tollbar隐藏又现的感觉,但是看起来好看还是要点代价的,在这里捣鼓了不少时间,尤其是collapsingtoolbarlayout的Expanded固定让我Google了好久,因为用英文搜索可能我表达的不太好,最后竟然是一句nestedScroll(false)就可以了。。。。 还是感谢Stackoveflow里边的大腿吧。

Dagger2

依赖注入Dagger2,也是我早就想用的一个框架了,理由是各种配合Mvp十分方便和好用,渐渐也能体会到一次注入到处可用的快感。不过一个新技术真的学习成本,国内没什么中文文档介绍,看国外的看的云里雾里。原理看的明白,用起来好像不太知道如何使用,尤其是在@inject之后对象,也可以在别的地方Inject,原本是被Inject方后来也成了Module提供方。虽然到最后原理还不是特别明白这里,但还是不阻碍用起来的快感。

Realm

一开始被新技术吸引到的是不会放过任何新东西的包括Realm,不过进了坑不代表这个坑可以跳阿。由于我这次用到了leacncloud,Realm感觉会和LeanCloud的子类化冲突让你只能选择其中之一,不过这个也算了,Leancloud提供了类似Map的Put方法也可以接受就是麻烦了点。但是被坑到的地方是Realm所谓的自动数据同步竟然是一改就是改真实的数据,并不是数据的拷贝。。。感觉和我使用到要缓存的数据有点冲突,因为这个Moment里边的项是有点赞的,点赞要修改当前Recycleview的数据(修改数据要开事务)。修改数据后会出现一些很奇怪的现象,不在Recycleview当前Item会跳到当前Item,点赞的动画也会消失。。。真的是想破脑袋也解决不了,就直接跳坑了。最后感觉这个Realm在保存不跟服务器需要同步的数据会好点。

LeanCloud

用LeanCloud是因为在知乎太多吹它的人了而且它的确在BAAS这方面功能比较多(后来才发现即时通信没有语音和视频),所以就尝试使用了,SDK整体来说是不错的都挺好用的,满足了我对存储方面的要求。不过就在我开发的这几天,貌似稳定性没有想象中那么好,好几次上传个头像都会SocketTimeOut,查询也会有点慢,不过还好都在接受范围内(不过要是到了收费的标准我就接受不了)。

环信

baby这个开源项目基于环信IM开发,刚开始选择IM的时候,看到知乎上黑环信的人挺多的,就亲自下载了几家IM的demo源码跑一遍,从功能、集成难易和消息稳定几个方面对比,最终还是选择了环信。集成这方面环信做的真不错,尤其是有了EaseUi这个包,基本上一天就能集成完毕。项目运行至今没有出现过什么问题,发送消息挺稳定的。

Rxjava、RxAndroid

Rxjava我从第一眼看到了就喜欢上了(个人特喜欢那种通过.设置完成的感觉),接触也有几个月,一开始就和Retrofit 、Okhttp一起使用。学习成本还是要有的阿,看了不知道多少篇关于Rxjava使用的文章和例子,对里边的操作符也仅仅停留在那几个最常用的,其他一大堆好多都没用过,看来还用得不够。

Glide

Glide也是一个后来居上让我喜欢的图片加载库,一开始我喜欢picasso 是觉得轻巧而且好用有保证(主要是我偶像Jake Wharton主导,有加成),慢慢觉得Picasso对内存没有Glide来的友好,Glide在加载速度方面也领先,虽然整个库代码量是Picasso的几倍,但是比起重要的内存和用户体验来说还是Glide的领先一筹。

Butterknife、Ucrop等等

当让还有其他的一些润色的轮子啦,不过不是那么重要就不一一感谢啦。

Thanks
  • 感谢Github、LeanCloud、环信、还有造那么多轮子给我们用的Square FaceBook Google的大大们。
  • Thanks for improving my code m-ezzat.


Contacts

 
Copyright 2016 Roger ou

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
6
评论

【新手快速入门】集成环信常见问题+解决方案汇总 常见问题

dujiepeng 发表了文章 • 6111 次浏览 • 2017-05-22 15:51 • 来自相关话题

   这里整理了集成环信的常见问题和一些功能的实现思路,希望能帮助到大家。感谢热心的开发者贡献,大家在观看过程中有不明白的地方欢迎直接跟帖咨询。
 
ios篇
APNs证书创建和上传到环信后台头像昵称的简述和处理方案音视频离线推送Demo实现环信服务器聊天记录保存多久?离线收不到好友请求IOS中环信聊天窗口如何实现文件发送和预览的功能ios集成常见问题环信推送的一些常见问题实现名片|红包|话题聊天室等自定义cell
 
Android篇
环信3.0SDK集成小米推送教程EaseUI库中V4、v7包冲突解决方案Android EaseUI里的百度地图替换为高德地图android扩展消息(名片集成)关于会话列表的置顶聊天java.lang.UnsatisfiedLinkError: 的问题android 端 app 后台被杀死收不到消息的解决方案
昵称头像篇
android中如何显示开发者服务器上的昵称和头像 Android中显示头像(接上一篇文章看)环信(Android)设置头像和昵称的方法(最简单暴力的基于环信demo的集成)IOS中如何显示开发者服务器上的昵称和头像【环信公开课第12期视频回放】-所有关于环信IM昵称头像的问题听这课就够了
 
直播篇
一言不合你就搞个直播APP
 
客服集成
IM-SDK和客服SDK并存开发指南—Android篇IM-SDK和客服SDK并存开发指南—iOS篇
 
开源项目
Android简版demoios简版demo凡信2.0:超仿微信的开源项目 凡信3.0:携直播和红包而来高仿微信:Github 3,515 Star方圆十里:环信编程大赛冠军项目泛聊:定一个小目标写一个QQSlack聊天机器人:一天时间做一个聊天机器人TV视频通话:在电视上视频通话视频通话:Android手机视频通话酷信:ios高仿微信公众号助手:与订阅用户聊天沟通
 
持续更新ing...小伙伴们还有什么想知道欢迎跟帖提出。
  查看全部
   这里整理了集成环信的常见问题和一些功能的实现思路,希望能帮助到大家。感谢热心的开发者贡献,大家在观看过程中有不明白的地方欢迎直接跟帖咨询。
 
ios篇

 
Android篇

昵称头像篇

 
直播篇
  1. 一言不合你就搞个直播APP

 
客服集成
  1. IM-SDK和客服SDK并存开发指南—Android篇
  2. IM-SDK和客服SDK并存开发指南—iOS篇

 
开源项目

 
持续更新ing...小伙伴们还有什么想知道欢迎跟帖提出。
 
2
回复

【环信官方外包一个项目】利用环信IM实现一个在线白板 环信

回复

KevinGong 回复了问题 • 3 人关注 • 762 次浏览 • 2017-09-25 17:48 • 来自相关话题

0
评论

【开源项目】一个基于环信IM开发的开源的私密社交APP-Baby 即时通信 Baby

seven。 发表了文章 • 876 次浏览 • 2017-08-31 14:49 • 来自相关话题

Baby这个开源项目基于环信IM开发,刚开始选择IM的时候,看到知乎上黑环信的人挺多的,就亲自下载了几家IM的demo源码跑一遍,从功能、集成难易和消息稳定几个方面对比,最终还是选择了环信。集成这方面环信做的真不错,尤其是有了EaseUi这个包,基本上一天就能集成完毕。项目运行至今没有出现过什么问题,发送消息挺稳定的。先上效果图




开屏页的登录和注册




编辑个人信息




相册页面




首页的Moment
版本更新:
 
version 1.6
加入Tinker 热修复更新部分依赖修复大量细节问题,加入部分注释

version 1.5
bug fixupdate sth

version 1.4
增加长按删除功能优化Rxbus订阅加载数据外国友人优化的一些细节等等

version 1.3
增加了评论功能优化了相册加载修复了一些内存泄漏等等

version 1.2
修复了一些Bug把登陆注册事件换了个Zip操作符更符合流的思想

version 1.1
修复了主页背景无法切换的问题修复了聊天推送的问题修了语音视频的问题做了一些细节修改
Download



安装包下载体验
 
github地址
github源码
 Development Environment & Library
 
MVP

这个项目是基于MVP框架写的(大体上,聊天那块直接用环信的了),大部分Base类参考FastAndroid里边的基类,参考这个很快就能布好基本的MVP架构。本来是有考虑过MVVM后来想想还是先学习一下MVP吧,看过几个MVVM项目感觉还是挺好用的,不过还是BETA版不知道有没有什么坑。

Material Design

早就手痒想体验一把V7包里边的各种控件了,特喜欢coordinatorlayout和collapsingtoolbarlayout的互动让Tollbar隐藏又现的感觉,但是看起来好看还是要点代价的,在这里捣鼓了不少时间,尤其是collapsingtoolbarlayout的Expanded固定让我Google了好久,因为用英文搜索可能我表达的不太好,最后竟然是一句nestedScroll(false)就可以了。。。。 还是感谢Stackoveflow里边的大腿吧。

Dagger2

依赖注入Dagger2,也是我早就想用的一个框架了,理由是各种配合Mvp十分方便和好用,渐渐也能体会到一次注入到处可用的快感。不过一个新技术真的学习成本,国内没什么中文文档介绍,看国外的看的云里雾里。原理看的明白,用起来好像不太知道如何使用,尤其是在@inject之后对象,也可以在别的地方Inject,原本是被Inject方后来也成了Module提供方。虽然到最后原理还不是特别明白这里,但还是不阻碍用起来的快感。

Realm

一开始被新技术吸引到的是不会放过任何新东西的包括Realm,不过进了坑不代表这个坑可以跳阿。由于我这次用到了leacncloud,Realm感觉会和LeanCloud的子类化冲突让你只能选择其中之一,不过这个也算了,Leancloud提供了类似Map的Put方法也可以接受就是麻烦了点。但是被坑到的地方是Realm所谓的自动数据同步竟然是一改就是改真实的数据,并不是数据的拷贝。。。感觉和我使用到要缓存的数据有点冲突,因为这个Moment里边的项是有点赞的,点赞要修改当前Recycleview的数据(修改数据要开事务)。修改数据后会出现一些很奇怪的现象,不在Recycleview当前Item会跳到当前Item,点赞的动画也会消失。。。真的是想破脑袋也解决不了,就直接跳坑了。最后感觉这个Realm在保存不跟服务器需要同步的数据会好点。

LeanCloud

用LeanCloud是因为在知乎太多吹它的人了而且它的确在BAAS这方面功能比较多(后来才发现即时通信没有语音和视频),所以就尝试使用了,SDK整体来说是不错的都挺好用的,满足了我对存储方面的要求。不过就在我开发的这几天,貌似稳定性没有想象中那么好,好几次上传个头像都会SocketTimeOut,查询也会有点慢,不过还好都在接受范围内(不过要是到了收费的标准我就接受不了)。

环信

baby这个开源项目基于环信IM开发,刚开始选择IM的时候,看到知乎上黑环信的人挺多的,就亲自下载了几家IM的demo源码跑一遍,从功能、集成难易和消息稳定几个方面对比,最终还是选择了环信。集成这方面环信做的真不错,尤其是有了EaseUi这个包,基本上一天就能集成完毕。项目运行至今没有出现过什么问题,发送消息挺稳定的。

Rxjava、RxAndroid

Rxjava我从第一眼看到了就喜欢上了(个人特喜欢那种通过.设置完成的感觉),接触也有几个月,一开始就和Retrofit 、Okhttp一起使用。学习成本还是要有的$L̫VxnLE$L̫Vxn关于Rxjava使用的文章和例子,对里边的操作符也仅仅停留在那几个最常用的,其他一大堆好多都没用过,看来还用得不够。

Glide

Glide也是一个后来居上让我喜欢的图片加载库,一开始我喜欢picasso 是觉得轻巧而且好用有保证(主要是我偶像Jake Wharton主导,有加成),慢慢觉得Picasso对内存没有Glide来的友好,Glide在加载速度方面也领先,虽然整个库代码量是Picasso的几倍,但是比起重要的内存和用户体验来说还是Glide的领先一筹。

Butterknife、Ucrop等等

当让还有其他的一些润色的轮子啦,不过不是那么重要就不一一感谢啦。

Thanks
感谢Github、LeanCloud、环信、还有造那么多轮子给我们用的Square FaceBook Google的大大们。Thanks for improving my code m-ezzat.

Contacts
Email:379489343zhi@gmail.comQQ:379489343
 Copyright 2016 Roger ou

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License. 查看全部
   Baby这个开源项目基于环信IM开发,刚开始选择IM的时候,看到知乎上黑环信的人挺多的,就亲自下载了几家IM的demo源码跑一遍,从功能、集成难易和消息稳定几个方面对比,最终还是选择了环信。集成这方面环信做的真不错,尤其是有了EaseUi这个包,基本上一天就能集成完毕。项目运行至今没有出现过什么问题,发送消息挺稳定的。
先上效果图

003.png

开屏页的登录和注册


001.png

编辑个人信息


002.png

相册页面


004.png

首页的Moment


版本更新:
 
version 1.6
  1. 加入Tinker 热修复
  2. 更新部分依赖
  3. 修复大量细节问题,加入部分注释


version 1.5
  1. bug fix
  2. update sth


version 1.4
  1. 增加长按删除功能
  2. 优化Rxbus订阅加载数据
  3. 外国友人优化的一些细节
  4. 等等


version 1.3
  1. 增加了评论功能
  2. 优化了相册加载
  3. 修复了一些内存泄漏
  4. 等等


version 1.2
  1. 修复了一些Bug
  2. 把登陆注册事件换了个Zip操作符更符合流的思想


version 1.1
  1. 修复了主页背景无法切换的问题
  2. 修复了聊天推送的问题
  3. 修了语音视频的问题
  4. 做了一些细节修改

Download

 
github地址

 Development Environment & Library
 
MVP

这个项目是基于MVP框架写的(大体上,聊天那块直接用环信的了),大部分Base类参考FastAndroid里边的基类,参考这个很快就能布好基本的MVP架构。本来是有考虑过MVVM后来想想还是先学习一下MVP吧,看过几个MVVM项目感觉还是挺好用的,不过还是BETA版不知道有没有什么坑。

Material Design

早就手痒想体验一把V7包里边的各种控件了,特喜欢coordinatorlayout和collapsingtoolbarlayout的互动让Tollbar隐藏又现的感觉,但是看起来好看还是要点代价的,在这里捣鼓了不少时间,尤其是collapsingtoolbarlayout的Expanded固定让我Google了好久,因为用英文搜索可能我表达的不太好,最后竟然是一句nestedScroll(false)就可以了。。。。 还是感谢Stackoveflow里边的大腿吧。

Dagger2

依赖注入Dagger2,也是我早就想用的一个框架了,理由是各种配合Mvp十分方便和好用,渐渐也能体会到一次注入到处可用的快感。不过一个新技术真的学习成本,国内没什么中文文档介绍,看国外的看的云里雾里。原理看的明白,用起来好像不太知道如何使用,尤其是在@inject之后对象,也可以在别的地方Inject,原本是被Inject方后来也成了Module提供方。虽然到最后原理还不是特别明白这里,但还是不阻碍用起来的快感。

Realm

一开始被新技术吸引到的是不会放过任何新东西的包括Realm,不过进了坑不代表这个坑可以跳阿。由于我这次用到了leacncloud,Realm感觉会和LeanCloud的子类化冲突让你只能选择其中之一,不过这个也算了,Leancloud提供了类似Map的Put方法也可以接受就是麻烦了点。但是被坑到的地方是Realm所谓的自动数据同步竟然是一改就是改真实的数据,并不是数据的拷贝。。。感觉和我使用到要缓存的数据有点冲突,因为这个Moment里边的项是有点赞的,点赞要修改当前Recycleview的数据(修改数据要开事务)。修改数据后会出现一些很奇怪的现象,不在Recycleview当前Item会跳到当前Item,点赞的动画也会消失。。。真的是想破脑袋也解决不了,就直接跳坑了。最后感觉这个Realm在保存不跟服务器需要同步的数据会好点。

LeanCloud

用LeanCloud是因为在知乎太多吹它的人了而且它的确在BAAS这方面功能比较多(后来才发现即时通信没有语音和视频),所以就尝试使用了,SDK整体来说是不错的都挺好用的,满足了我对存储方面的要求。不过就在我开发的这几天,貌似稳定性没有想象中那么好,好几次上传个头像都会SocketTimeOut,查询也会有点慢,不过还好都在接受范围内(不过要是到了收费的标准我就接受不了)。

环信

baby这个开源项目基于环信IM开发,刚开始选择IM的时候,看到知乎上黑环信的人挺多的,就亲自下载了几家IM的demo源码跑一遍,从功能、集成难易和消息稳定几个方面对比,最终还是选择了环信。集成这方面环信做的真不错,尤其是有了EaseUi这个包,基本上一天就能集成完毕。项目运行至今没有出现过什么问题,发送消息挺稳定的。

Rxjava、RxAndroid

Rxjava我从第一眼看到了就喜欢上了(个人特喜欢那种通过.设置完成的感觉),接触也有几个月,一开始就和Retrofit 、Okhttp一起使用。学习成本还是要有的阿,看了不知道多少篇关于Rxjava使用的文章和例子,对里边的操作符也仅仅停留在那几个最常用的,其他一大堆好多都没用过,看来还用得不够。

Glide

Glide也是一个后来居上让我喜欢的图片加载库,一开始我喜欢picasso 是觉得轻巧而且好用有保证(主要是我偶像Jake Wharton主导,有加成),慢慢觉得Picasso对内存没有Glide来的友好,Glide在加载速度方面也领先,虽然整个库代码量是Picasso的几倍,但是比起重要的内存和用户体验来说还是Glide的领先一筹。

Butterknife、Ucrop等等

当让还有其他的一些润色的轮子啦,不过不是那么重要就不一一感谢啦。

Thanks
  • 感谢Github、LeanCloud、环信、还有造那么多轮子给我们用的Square FaceBook Google的大大们。
  • Thanks for improving my code m-ezzat.


Contacts

 
Copyright 2016 Roger ou

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
6
评论

【新手快速入门】集成环信常见问题+解决方案汇总 常见问题

dujiepeng 发表了文章 • 6111 次浏览 • 2017-05-22 15:51 • 来自相关话题

   这里整理了集成环信的常见问题和一些功能的实现思路,希望能帮助到大家。感谢热心的开发者贡献,大家在观看过程中有不明白的地方欢迎直接跟帖咨询。
 
ios篇
APNs证书创建和上传到环信后台头像昵称的简述和处理方案音视频离线推送Demo实现环信服务器聊天记录保存多久?离线收不到好友请求IOS中环信聊天窗口如何实现文件发送和预览的功能ios集成常见问题环信推送的一些常见问题实现名片|红包|话题聊天室等自定义cell
 
Android篇
环信3.0SDK集成小米推送教程EaseUI库中V4、v7包冲突解决方案Android EaseUI里的百度地图替换为高德地图android扩展消息(名片集成)关于会话列表的置顶聊天java.lang.UnsatisfiedLinkError: 的问题android 端 app 后台被杀死收不到消息的解决方案
昵称头像篇
android中如何显示开发者服务器上的昵称和头像 Android中显示头像(接上一篇文章看)环信(Android)设置头像和昵称的方法(最简单暴力的基于环信demo的集成)IOS中如何显示开发者服务器上的昵称和头像【环信公开课第12期视频回放】-所有关于环信IM昵称头像的问题听这课就够了
 
直播篇
一言不合你就搞个直播APP
 
客服集成
IM-SDK和客服SDK并存开发指南—Android篇IM-SDK和客服SDK并存开发指南—iOS篇
 
开源项目
Android简版demoios简版demo凡信2.0:超仿微信的开源项目 凡信3.0:携直播和红包而来高仿微信:Github 3,515 Star方圆十里:环信编程大赛冠军项目泛聊:定一个小目标写一个QQSlack聊天机器人:一天时间做一个聊天机器人TV视频通话:在电视上视频通话视频通话:Android手机视频通话酷信:ios高仿微信公众号助手:与订阅用户聊天沟通
 
持续更新ing...小伙伴们还有什么想知道欢迎跟帖提出。
  查看全部
   这里整理了集成环信的常见问题和一些功能的实现思路,希望能帮助到大家。感谢热心的开发者贡献,大家在观看过程中有不明白的地方欢迎直接跟帖咨询。
 
ios篇

 
Android篇

昵称头像篇

 
直播篇
  1. 一言不合你就搞个直播APP

 
客服集成
  1. IM-SDK和客服SDK并存开发指南—Android篇
  2. IM-SDK和客服SDK并存开发指南—iOS篇

 
开源项目

 
持续更新ing...小伙伴们还有什么想知道欢迎跟帖提出。
 
0
回复

webIM reactnative 如何修改群昵称? react_native webim

回复

leslieliu 发起了问题 • 1 人关注 • 191 次浏览 • 2017-08-25 11:25 • 来自相关话题

0
回复

web im集成后,发送消息成功的回调函数不执行 webim

回复

kidoo1012 发起了问题 • 1 人关注 • 216 次浏览 • 2017-06-25 23:28 • 来自相关话题

0
回复

WEBIM中发送图片如何通过BASE64编码或者APP中地址路径来发送 webim

回复

cjy1002 发起了问题 • 1 人关注 • 190 次浏览 • 2017-06-12 09:59 • 来自相关话题

4
回复

偶尔出现不明错误Error in connection establishment: net::net::<unknown> webim

回复

木云落 回复了问题 • 3 人关注 • 524 次浏览 • 2017-05-27 13:09 • 来自相关话题

0
回复

环信WEBIm的那个coolkie是在哪里生成的?我重新生成COOKIE都不起效?看我下面的截图 webim

回复

lzf520 发起了问题 • 1 人关注 • 218 次浏览 • 2017-05-19 09:14 • 来自相关话题

2
回复

为什么webim按照开发文档写TOKEN登录的时候 conn.open(options)报错? webim

回复

lzf520 回复了问题 • 2 人关注 • 168 次浏览 • 2017-05-18 15:12 • 来自相关话题

0
回复

webIM webim

回复

苜宝小叔 发起了问题 • 1 人关注 • 215 次浏览 • 2017-05-03 14:06 • 来自相关话题

0
回复

webim集成 webim

回复

时间不等人❀ 发起了问题 • 1 人关注 • 213 次浏览 • 2017-05-02 10:17 • 来自相关话题

1
回复

web im webim

回复

时间不等人❀ 回复了问题 • 1 人关注 • 171 次浏览 • 2017-05-02 10:01 • 来自相关话题

3
回复

webim 收到消息后strophe.Websocket.prototype._onMessage 能被调用,handleMessage 没被调用 WebIM API webim

回复

wansheg 回复了问题 • 2 人关注 • 321 次浏览 • 2017-04-10 15:46 • 来自相关话题

1
回复

webim发送cmd消息 如何定义? 环信_WebIM webim

回复

木云落 回复了问题 • 2 人关注 • 241 次浏览 • 2017-04-10 12:49 • 来自相关话题

1
回复

webim在demo中如何获取自己服务器的头像和昵称? 头像 昵称 扩展 环信_WebIM 昵称 头像 webim

回复

环信沈冲 回复了问题 • 2 人关注 • 449 次浏览 • 2017-03-24 14:12 • 来自相关话题

1
回复

web IM 回调事件为何触发了两次 webim

回复

zhangyb 回复了问题 • 2 人关注 • 287 次浏览 • 2017-03-22 17:13 • 来自相关话题

1
回复

我的电脑是x201i,win10,使用webim,点击联系人为什么聊天窗不见了 webim系统设配 webim

回复

zhangyb 回复了问题 • 2 人关注 • 267 次浏览 • 2017-03-14 11:24 • 来自相关话题

2
最佳

环信服务端集成,如何集成? iOS Android webim

回复

执念 回复了问题 • 3 人关注 • 2456 次浏览 • 2017-03-13 11:36 • 来自相关话题

3
回复

webim在登录系统时同时登录环信账号,登录成功跳转其他页面时失败 提示登录失败 跳转页面时登录失败 webim

回复

zhangyb 回复了问题 • 4 人关注 • 1431 次浏览 • 2017-03-05 22:14 • 来自相关话题

2
回复

amr 音频 webim播放问题 arm 音频 webim

回复

lizg 回复了问题 • 2 人关注 • 475 次浏览 • 2017-02-15 16:44 • 来自相关话题

1
回复

webim关于https设置问题 https webim

回复

zhangyb 回复了问题 • 2 人关注 • 509 次浏览 • 2017-01-17 12:21 • 来自相关话题

1
回复

webim 上传图片的 width height获取 webim

回复

baoshu 回复了问题 • 2 人关注 • 491 次浏览 • 2016-12-22 17:07 • 来自相关话题

2
回复

最新版本web IM的demo不会修改 webim

回复

孙新乐 回复了问题 • 2 人关注 • 563 次浏览 • 2016-12-10 12:24 • 来自相关话题

7
回复

webim 为什么刷新后就又要重新登录啊?怎么才能不让它重新登录 登录 webim

回复

baoshu 回复了问题 • 5 人关注 • 1046 次浏览 • 2016-11-23 12:01 • 来自相关话题

1
回复

Webim 中如何获取图片消息的缩略图 缩略图 webim

回复

lizg 回复了问题 • 2 人关注 • 1154 次浏览 • 2016-08-08 19:25 • 来自相关话题

1
回复

webim怎么获取环信服务器的历史聊天记录? 历史聊天记录 webim

回复

lizg 回复了问题 • 2 人关注 • 799 次浏览 • 2016-08-08 17:59 • 来自相关话题

2
回复

【环信官方外包一个项目】利用环信IM实现一个在线白板 环信

回复

KevinGong 回复了问题 • 3 人关注 • 762 次浏览 • 2017-09-25 17:48 • 来自相关话题

0
评论

【开源项目】一个基于环信IM开发的开源的私密社交APP-Baby 即时通信 Baby

seven。 发表了文章 • 876 次浏览 • 2017-08-31 14:49 • 来自相关话题

Baby这个开源项目基于环信IM开发,刚开始选择IM的时候,看到知乎上黑环信的人挺多的,就亲自下载了几家IM的demo源码跑一遍,从功能、集成难易和消息稳定几个方面对比,最终还是选择了环信。集成这方面环信做的真不错,尤其是有了EaseUi这个包,基本上一天就能集成完毕。项目运行至今没有出现过什么问题,发送消息挺稳定的。先上效果图




开屏页的登录和注册




编辑个人信息




相册页面




首页的Moment
版本更新:
 
version 1.6
加入Tinker 热修复更新部分依赖修复大量细节问题,加入部分注释

version 1.5
bug fixupdate sth

version 1.4
增加长按删除功能优化Rxbus订阅加载数据外国友人优化的一些细节等等

version 1.3
增加了评论功能优化了相册加载修复了一些内存泄漏等等

version 1.2
修复了一些Bug把登陆注册事件换了个Zip操作符更符合流的思想

version 1.1
修复了主页背景无法切换的问题修复了聊天推送的问题修了语音视频的问题做了一些细节修改
Download



安装包下载体验
 
github地址
github源码
 Development Environment & Library
 
MVP

这个项目是基于MVP框架写的(大体上,聊天那块直接用环信的了),大部分Base类参考FastAndroid里边的基类,参考这个很快就能布好基本的MVP架构。本来是有考虑过MVVM后来想想还是先学习一下MVP吧,看过几个MVVM项目感觉还是挺好用的,不过还是BETA版不知道有没有什么坑。

Material Design

早就手痒想体验一把V7包里边的各种控件了,特喜欢coordinatorlayout和collapsingtoolbarlayout的互动让Tollbar隐藏又现的感觉,但是看起来好看还是要点代价的,在这里捣鼓了不少时间,尤其是collapsingtoolbarlayout的Expanded固定让我Google了好久,因为用英文搜索可能我表达的不太好,最后竟然是一句nestedScroll(false)就可以了。。。。 还是感谢Stackoveflow里边的大腿吧。

Dagger2

依赖注入Dagger2,也是我早就想用的一个框架了,理由是各种配合Mvp十分方便和好用,渐渐也能体会到一次注入到处可用的快感。不过一个新技术真的学习成本,国内没什么中文文档介绍,看国外的看的云里雾里。原理看的明白,用起来好像不太知道如何使用,尤其是在@inject之后对象,也可以在别的地方Inject,原本是被Inject方后来也成了Module提供方。虽然到最后原理还不是特别明白这里,但还是不阻碍用起来的快感。

Realm

一开始被新技术吸引到的是不会放过任何新东西的包括Realm,不过进了坑不代表这个坑可以跳阿。由于我这次用到了leacncloud,Realm感觉会和LeanCloud的子类化冲突让你只能选择其中之一,不过这个也算了,Leancloud提供了类似Map的Put方法也可以接受就是麻烦了点。但是被坑到的地方是Realm所谓的自动数据同步竟然是一改就是改真实的数据,并不是数据的拷贝。。。感觉和我使用到要缓存的数据有点冲突,因为这个Moment里边的项是有点赞的,点赞要修改当前Recycleview的数据(修改数据要开事务)。修改数据后会出现一些很奇怪的现象,不在Recycleview当前Item会跳到当前Item,点赞的动画也会消失。。。真的是想破脑袋也解决不了,就直接跳坑了。最后感觉这个Realm在保存不跟服务器需要同步的数据会好点。

LeanCloud

用LeanCloud是因为在知乎太多吹它的人了而且它的确在BAAS这方面功能比较多(后来才发现即时通信没有语音和视频),所以就尝试使用了,SDK整体来说是不错的都挺好用的,满足了我对存储方面的要求。不过就在我开发的这几天,貌似稳定性没有想象中那么好,好几次上传个头像都会SocketTimeOut,查询也会有点慢,不过还好都在接受范围内(不过要是到了收费的标准我就接受不了)。

环信

baby这个开源项目基于环信IM开发,刚开始选择IM的时候,看到知乎上黑环信的人挺多的,就亲自下载了几家IM的demo源码跑一遍,从功能、集成难易和消息稳定几个方面对比,最终还是选择了环信。集成这方面环信做的真不错,尤其是有了EaseUi这个包,基本上一天就能集成完毕。项目运行至今没有出现过什么问题,发送消息挺稳定的。

Rxjava、RxAndroid

Rxjava我从第一眼看到了就喜欢上了(个人特喜欢那种通过.设置完成的感觉),接触也有几个月,一开始就和Retrofit 、Okhttp一起使用。学习成本还是要有的阿,看了不知道多少篇关于Rxjava使用的文章和例子,对里边的操作符也仅仅停留在那几个最常用的,其他一大堆好多都没用过,看来还用得不够。

Glide

Glide也是一个后来居上让我喜欢的图片加载库,一开始我喜欢picasso 是觉得轻巧而且好用有保证(主要是我偶像Jake Wharton主导,有加成),慢慢觉得Picasso对内存没有Glide来的友好,Glide在加载速度方面也领先,虽然整个库代码量是Picasso的几倍,但是比起重要的内存和用户体验来说还是Glide的领先一筹。

Butterknife、Ucrop等等

当让还有其他的一些润色的轮子啦,不过不是那么重要就不一一感谢啦。

Thanks
感谢Github、LeanCloud、环信、还有造那么多轮子给我们用的Square FaceBook Google的大大们。Thanks for improving my code m-ezzat.

Contacts
Email:379489343zhi@gmail.comQQ:379489343
 Copyright 2016 Roger ou

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License. 查看全部
   Baby这个开源项目基于环信IM开发,刚开始选择IM的时候,看到知乎上黑环信的人挺多的,就亲自下载了几家IM的demo源码跑一遍,从功能、集成难易和消息稳定几个方面对比,最终还是选择了环信。集成这方面环信做的真不错,尤其是有了EaseUi这个包,基本上一天就能集成完毕。项目运行至今没有出现过什么问题,发送消息挺稳定的。
先上效果图

003.png

开屏页的登录和注册


001.png

编辑个人信息


002.png

相册页面


004.png

首页的Moment


版本更新:
 
version 1.6
  1. 加入Tinker 热修复
  2. 更新部分依赖
  3. 修复大量细节问题,加入部分注释


version 1.5
  1. bug fix
  2. update sth


version 1.4
  1. 增加长按删除功能
  2. 优化Rxbus订阅加载数据
  3. 外国友人优化的一些细节
  4. 等等


version 1.3
  1. 增加了评论功能
  2. 优化了相册加载
  3. 修复了一些内存泄漏
  4. 等等


version 1.2
  1. 修复了一些Bug
  2. 把登陆注册事件换了个Zip操作符更符合流的思想


version 1.1
  1. 修复了主页背景无法切换的问题
  2. 修复了聊天推送的问题
  3. 修了语音视频的问题
  4. 做了一些细节修改

Download

 
github地址

 Development Environment & Library
 
MVP

这个项目是基于MVP框架写的(大体上,聊天那块直接用环信的了),大部分Base类参考FastAndroid里边的基类,参考这个很快就能布好基本的MVP架构。本来是有考虑过MVVM后来想想还是先学习一下MVP吧,看过几个MVVM项目感觉还是挺好用的,不过还是BETA版不知道有没有什么坑。

Material Design

早就手痒想体验一把V7包里边的各种控件了,特喜欢coordinatorlayout和collapsingtoolbarlayout的互动让Tollbar隐藏又现的感觉,但是看起来好看还是要点代价的,在这里捣鼓了不少时间,尤其是collapsingtoolbarlayout的Expanded固定让我Google了好久,因为用英文搜索可能我表达的不太好,最后竟然是一句nestedScroll(false)就可以了。。。。 还是感谢Stackoveflow里边的大腿吧。

Dagger2

依赖注入Dagger2,也是我早就想用的一个框架了,理由是各种配合Mvp十分方便和好用,渐渐也能体会到一次注入到处可用的快感。不过一个新技术真的学习成本,国内没什么中文文档介绍,看国外的看的云里雾里。原理看的明白,用起来好像不太知道如何使用,尤其是在@inject之后对象,也可以在别的地方Inject,原本是被Inject方后来也成了Module提供方。虽然到最后原理还不是特别明白这里,但还是不阻碍用起来的快感。

Realm

一开始被新技术吸引到的是不会放过任何新东西的包括Realm,不过进了坑不代表这个坑可以跳阿。由于我这次用到了leacncloud,Realm感觉会和LeanCloud的子类化冲突让你只能选择其中之一,不过这个也算了,Leancloud提供了类似Map的Put方法也可以接受就是麻烦了点。但是被坑到的地方是Realm所谓的自动数据同步竟然是一改就是改真实的数据,并不是数据的拷贝。。。感觉和我使用到要缓存的数据有点冲突,因为这个Moment里边的项是有点赞的,点赞要修改当前Recycleview的数据(修改数据要开事务)。修改数据后会出现一些很奇怪的现象,不在Recycleview当前Item会跳到当前Item,点赞的动画也会消失。。。真的是想破脑袋也解决不了,就直接跳坑了。最后感觉这个Realm在保存不跟服务器需要同步的数据会好点。

LeanCloud

用LeanCloud是因为在知乎太多吹它的人了而且它的确在BAAS这方面功能比较多(后来才发现即时通信没有语音和视频),所以就尝试使用了,SDK整体来说是不错的都挺好用的,满足了我对存储方面的要求。不过就在我开发的这几天,貌似稳定性没有想象中那么好,好几次上传个头像都会SocketTimeOut,查询也会有点慢,不过还好都在接受范围内(不过要是到了收费的标准我就接受不了)。

环信

baby这个开源项目基于环信IM开发,刚开始选择IM的时候,看到知乎上黑环信的人挺多的,就亲自下载了几家IM的demo源码跑一遍,从功能、集成难易和消息稳定几个方面对比,最终还是选择了环信。集成这方面环信做的真不错,尤其是有了EaseUi这个包,基本上一天就能集成完毕。项目运行至今没有出现过什么问题,发送消息挺稳定的。

Rxjava、RxAndroid

Rxjava我从第一眼看到了就喜欢上了(个人特喜欢那种通过.设置完成的感觉),接触也有几个月,一开始就和Retrofit 、Okhttp一起使用。学习成本还是要有的阿,看了不知道多少篇关于Rxjava使用的文章和例子,对里边的操作符也仅仅停留在那几个最常用的,其他一大堆好多都没用过,看来还用得不够。

Glide

Glide也是一个后来居上让我喜欢的图片加载库,一开始我喜欢picasso 是觉得轻巧而且好用有保证(主要是我偶像Jake Wharton主导,有加成),慢慢觉得Picasso对内存没有Glide来的友好,Glide在加载速度方面也领先,虽然整个库代码量是Picasso的几倍,但是比起重要的内存和用户体验来说还是Glide的领先一筹。

Butterknife、Ucrop等等

当让还有其他的一些润色的轮子啦,不过不是那么重要就不一一感谢啦。

Thanks
  • 感谢Github、LeanCloud、环信、还有造那么多轮子给我们用的Square FaceBook Google的大大们。
  • Thanks for improving my code m-ezzat.


Contacts

 
Copyright 2016 Roger ou

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
6
评论

【新手快速入门】集成环信常见问题+解决方案汇总 常见问题

dujiepeng 发表了文章 • 6111 次浏览 • 2017-05-22 15:51 • 来自相关话题

   这里整理了集成环信的常见问题和一些功能的实现思路,希望能帮助到大家。感谢热心的开发者贡献,大家在观看过程中有不明白的地方欢迎直接跟帖咨询。
 
ios篇
APNs证书创建和上传到环信后台头像昵称的简述和处理方案音视频离线推送Demo实现环信服务器聊天记录保存多久?离线收不到好友请求IOS中环信聊天窗口如何实现文件发送和预览的功能ios集成常见问题环信推送的一些常见问题实现名片|红包|话题聊天室等自定义cell
 
Android篇
环信3.0SDK集成小米推送教程EaseUI库中V4、v7包冲突解决方案Android EaseUI里的百度地图替换为高德地图android扩展消息(名片集成)关于会话列表的置顶聊天java.lang.UnsatisfiedLinkError: 的问题android 端 app 后台被杀死收不到消息的解决方案
昵称头像篇
android中如何显示开发者服务器上的昵称和头像 Android中显示头像(接上一篇文章看)环信(Android)设置头像和昵称的方法(最简单暴力的基于环信demo的集成)IOS中如何显示开发者服务器上的昵称和头像【环信公开课第12期视频回放】-所有关于环信IM昵称头像的问题听这课就够了
 
直播篇
一言不合你就搞个直播APP
 
客服集成
IM-SDK和客服SDK并存开发指南—Android篇IM-SDK和客服SDK并存开发指南—iOS篇
 
开源项目
Android简版demoios简版demo凡信2.0:超仿微信的开源项目 凡信3.0:携直播和红包而来高仿微信:Github 3,515 Star方圆十里:环信编程大赛冠军项目泛聊:定一个小目标写一个QQSlack聊天机器人:一天时间做一个聊天机器人TV视频通话:在电视上视频通话视频通话:Android手机视频通话酷信:ios高仿微信公众号助手:与订阅用户聊天沟通
 
持续更新ing...小伙伴们还有什么想知道欢迎跟帖提出。
  查看全部
   这里整理了集成环信的常见问题和一些功能的实现思路,希望能帮助到大家。感谢热心的开发者贡献,大家在观看过程中有不明白的地方欢迎直接跟帖咨询。
 
ios篇

 
Android篇

昵称头像篇

 
直播篇
  1. 一言不合你就搞个直播APP

 
客服集成
  1. IM-SDK和客服SDK并存开发指南—Android篇
  2. IM-SDK和客服SDK并存开发指南—iOS篇

 
开源项目

 
持续更新ing...小伙伴们还有什么想知道欢迎跟帖提出。
 
3
评论

Vue-cli整合环信WebIM webim vue vuejs

魂之挽歌 发表了文章 • 86 次浏览 • 2017-10-11 17:34 • 来自相关话题

[b]今天碰到了一个问题,就是conn.listen里面的函数没法执行,目前不知道怎么解决[/b]baidu下,这个好像是不支持js严格模式下的调用,看来不行了,希望有大神来改造下
回调函数的参数都是报错TypeError: 'caller' and 'arguments' are restricted function properties and cannot be accessed in this context.

 
 由于准备做一个社交性的网站,(暂时不考虑app),前端使用的vuejs+vux,使用vue-cli安装,发现环信有提供react的整合,并没有vuejs版本的,只好自己来动手, 由于是第一次用vuejs开发,硬着头皮来,各种import 都是不行,strophe这个js是个自执行的闭包函数,网上各种搜也没有找到方法,也尝试过直接在index.html引入并执行,但是打包的时候会报错,摸索了一个星期(主要是生手加上头脑简单), 今天找到了不报XXX未定义之类的,打包也正常。可能有朋友用得到,提供一个思路,我暂时只想到了这样,希望有比我简单快捷的方法
 
1.  官方的  npm install easemob-websdk --save
 
2.  npm install strophe.js (这里注意加上.js)
 
3.找到node_modules/easemob-websdk/src/connection.js
在里面引入strophe.js, 我是在第二行假的
var Strophe = require('../../strophe.js').Strophe;





 
然后再大约667行左右加入config 定义





并在4205行左右使用这个定义





 
4. 找到node_modules/strophe.js/strophe.js
大约在2883行左右加入两个函数





 
 
好了,现在基本上可以像vuejs那样使用了
 

























  查看全部
[b]今天碰到了一个问题,就是conn.listen里面的函数没法执行,目前不知道怎么解决[/b]
baidu下,这个好像是不支持js严格模式下的调用,看来不行了,希望有大神来改造下
回调函数的参数都是报错
TypeError: 'caller' and 'arguments' are restricted function properties and cannot be accessed in this context.

 


 由于准备做一个社交性的网站,(暂时不考虑app),前端使用的vuejs+vux,使用vue-cli安装,发现环信有提供react的整合,并没有vuejs版本的,只好自己来动手, 由于是第一次用vuejs开发,硬着头皮来,各种import 都是不行,strophe这个js是个自执行的闭包函数,网上各种搜也没有找到方法,也尝试过直接在index.html引入并执行,但是打包的时候会报错,摸索了一个星期(主要是生手加上头脑简单), 今天找到了不报XXX未定义之类的,打包也正常。可能有朋友用得到,提供一个思路,我暂时只想到了这样,希望有比我简单快捷的方法
 
1.  官方的  npm install easemob-websdk --save
 
2.  npm install strophe.js (这里注意加上.js)
 
3.找到node_modules/easemob-websdk/src/connection.js
在里面引入strophe.js, 我是在第二行假的
var Strophe = require('../../strophe.js').Strophe;

1.png

 
然后再大约667行左右加入config 定义

2.png

并在4205行左右使用这个定义

3.png

 
4. 找到node_modules/strophe.js/strophe.js
大约在2883行左右加入两个函数

4.png

 
 
好了,现在基本上可以像vuejs那样使用了
 

5.png


6.png


7.png


8.png


9.png

 
0
评论

环信WebIM2.0版本发布,专为移动端H5打造的通讯SDK webim h5 产品更新

产品更新 发表了文章 • 102 次浏览 • 2017-09-22 18:18 • 来自相关话题

十年磨一剑 砺得梅花香
-献给在一线开发程序员们 
经过了长达三个月的封闭开发,环信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.初始化安装
在/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 目录下的就是可以运行和部署的版本执行npm start时如果出现```
./src/config/WebIM.js
Module not found: Can't resolve 'easemob-websdk/dist/strophe-1.2.8-g.js' in '<YourRootDir>/demo/src/config'
```FIX: 没有执行 npm link easemob-websdk
 
3. 执行npm start时如果出现> node scripts/start.js

/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:3FIX: 请检查node版本是否是v6.0+
 
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: {}
}
}
} 查看全部
十年磨一剑 砺得梅花香
-献给在一线开发程序员们
 
经过了长达三个月的封闭开发,环信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.初始化安装
在/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 目录下的就是可以运行和部署的版本
执行npm start时如果出现
```
./src/config/WebIM.js
Module not found: Can't resolve 'easemob-websdk/dist/strophe-1.2.8-g.js' in '<YourRootDir>/demo/src/config'
```
FIX: 没有执行 npm link easemob-websdk
 
3. 执行npm start时如果出现
> node scripts/start.js

/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
FIX: 请检查node版本是否是v6.0+
 
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: {}
}
}
}
0
评论

【产品快递】Web IM V1.1.3发布,支持自动重连 webim 产品快递

产品更新 发表了文章 • 891 次浏览 • 2016-11-01 15:18 • 来自相关话题

功能改进:

DEMO
支持 Windows SDK。http://www.easemob.com/download/im 

新增黑名单功能。

获取聊天室列表: 支持分页、下拉刷新,新增以下2个参数:pagenum 和 pagesize。

调试更方便,webpack 支持开发和生产模式。

`npm run dev`:开发模式,支持热加载,启动一个供调试的webserve http://localhost:3000。 

`npm run prod`:生产模式,编译速度更快。

群组增加以下功能:创建群组、修改群组名称、修改群组简介、群组成员管理、加入公开群。

strophe 从 v1.2.2 升级到 v1.2.8,在生产模式使用 strophe-1.2.8.min.js, 在开发模式使用 strophe.js。

SDK
 支持自动重连: 在 webim.config.js 文件中新增相关参数 `autoReconnectNumMax` 和`autoReconnectInterval`。
Bug fixes:

DEMO
 增加 `babel-core/browser-polyfill.js`文件,修复了 IE 不支持 HTML5 elements 的 bug。

 修复了有未读消息时点击联系人不生效的bug。

 修复了strophe.js v1.2.8在IE9中使用BOSH会报错的bug。
https://github.com/strophe/strophejs/issues/213

SDK
修复了存在大量离线消息时收发消息延迟的bug。客户端将发送ack应答消息的速度限制在5个/秒,不影响其他正常消息。

将心跳消息从空body的 json message 切换为 ping/pong iq。前者会作为离线消息被XMPP Server缓存。
 
webim体验:http://webim.easemob.com/

版本历史:更新日志     
 
SDK下载:点击下载 查看全部
358-210(2).jpg

  • 功能改进:


DEMO

支持 Windows SDK。http://www.easemob.com/download/im 

新增黑名单功能。

获取聊天室列表: 支持分页、下拉刷新,新增以下2个参数:pagenum 和 pagesize。

调试更方便,webpack 支持开发和生产模式。

`npm run dev`:开发模式,支持热加载,启动一个供调试的webserve http://localhost:3000。 

`npm run prod`:生产模式,编译速度更快。

群组增加以下功能:创建群组、修改群组名称、修改群组简介、群组成员管理、加入公开群。

strophe 从 v1.2.2 升级到 v1.2.8,在生产模式使用 strophe-1.2.8.min.js, 在开发模式使用 strophe.js。



SDK

 支持自动重连: 在 webim.config.js 文件中新增相关参数 `autoReconnectNumMax` 和`autoReconnectInterval`。


  • Bug fixes:


DEMO

 增加 `babel-core/browser-polyfill.js`文件,修复了 IE 不支持 HTML5 elements 的 bug。

 修复了有未读消息时点击联系人不生效的bug。

 修复了strophe.js v1.2.8在IE9中使用BOSH会报错的bug。
https://github.com/strophe/strophejs/issues/213



SDK

修复了存在大量离线消息时收发消息延迟的bug。客户端将发送ack应答消息的速度限制在5个/秒,不影响其他正常消息。

将心跳消息从空body的 json message 切换为 ping/pong iq。前者会作为离线消息被XMPP Server缓存。


 
webim体验:http://webim.easemob.com/

版本历史:更新日志     
 
SDK下载:点击下载
1
评论

环信webim1.1.2版本在windows下npm环境搭建错误解决 webim

easonjim 发表了文章 • 1017 次浏览 • 2016-09-01 01:33 • 来自相关话题

1.1.2版本的webim从ui到整体的代码结构都做了很大改变,从代码结构上采用node.js的环境进行开发和打包,最终打包的输出项目,不依赖node.js的环境进行运行,得益于webpack的打包实现。

这里有详细的管网介绍:http://www.imgeek.org/article/825308179

下载地址:https://github.com/easemob/web ... 1.1.2

先说明一下在搭建node.js环境时到打包碰到的问题:

前提:必须成功搭建了node.js环境才能进行以下步骤,可以参考这篇文章进行搭建:http://xiaoyaojones.blog.163.c ... 3581/

1、如果在https://nodejs.org/en/官网下载的v4.5.0 LTS,然后进行npm install命令之后再进行webpack命令,会提示以下错误:






解决方法:使用会5.10.1版本的进行npm install->webpack,然后就能成功打包。

2、上面一步中,很大机率会出现webpack不是系统命令,如果出现这样的问题,一种是webpack的包安装不是全局,webim采用的就是局部安装,只是项目上引用局部模块非常方便,也不会出现太多的莫名奇怪的冲突问题;

可以通过以下方式解决:

①用npm install -g命令安装webpack为全局模块,然后即可使用webpack命令。

②既然要局部,那就直接局部使用;经过分析,调用webpack命令时其实就是一个cmd批处理,查看批处理会发现,就是node + “xxx.js”的形式存在,那么我们可以这样变通一下,命令行进入到webim的目录运行如下命令:

node ./node_modules/webpack/bin\webpack.js -config webpack.config.js

③还有一种方式,那就是通过package.json进行开刀,在scripts节点上增加"start":"webpack",然后在命令行上运行npm start同样能达到打包的效果。

注意:以上运行的命令行一定要以管理员的身份运行

题外:新版的webim需要用的知识比较多,可以按照这样的顺序进行突破:node.js->npm->react->webpack
  查看全部
1.1.2版本的webim从ui到整体的代码结构都做了很大改变,从代码结构上采用node.js的环境进行开发和打包,最终打包的输出项目,不依赖node.js的环境进行运行,得益于webpack的打包实现。

这里有详细的管网介绍:http://www.imgeek.org/article/825308179

下载地址:https://github.com/easemob/web ... 1.1.2

先说明一下在搭建node.js环境时到打包碰到的问题:

前提:必须成功搭建了node.js环境才能进行以下步骤,可以参考这篇文章进行搭建:http://xiaoyaojones.blog.163.c ... 3581/

1、如果在https://nodejs.org/en/官网下载的v4.5.0 LTS,然后进行npm install命令之后再进行webpack命令,会提示以下错误:

QQ图片20160901010009.png


解决方法:使用会5.10.1版本的进行npm install->webpack,然后就能成功打包。

2、上面一步中,很大机率会出现webpack不是系统命令,如果出现这样的问题,一种是webpack的包安装不是全局,webim采用的就是局部安装,只是项目上引用局部模块非常方便,也不会出现太多的莫名奇怪的冲突问题;

可以通过以下方式解决:

①用npm install -g命令安装webpack为全局模块,然后即可使用webpack命令。

②既然要局部,那就直接局部使用;经过分析,调用webpack命令时其实就是一个cmd批处理,查看批处理会发现,就是node + “xxx.js”的形式存在,那么我们可以这样变通一下,命令行进入到webim的目录运行如下命令:

node ./node_modules/webpack/bin\webpack.js -config webpack.config.js

③还有一种方式,那就是通过package.json进行开刀,在scripts节点上增加"start":"webpack",然后在命令行上运行npm start同样能达到打包的效果。

注意:以上运行的命令行一定要以管理员的身份运行

题外:新版的webim需要用的知识比较多,可以按照这样的顺序进行突破:node.js->npm->react->webpack
 
4
评论

【产品快递】Web IM V1.1.2发布,新版demo,全新SDK目录等你来体验 产品快递 webim

beyond 发表了文章 • 1404 次浏览 • 2016-08-15 15:59 • 来自相关话题

版本:V1.1.2 2016-8-12

功能改进:
新版demo添加isAutoLogoin参数,默认setPresence拆分sdk为四个文件,最终打包成一个webim.im.sdk.js增加try catch,尽量减少因为外部的错误导致的连接断开修改错误码,不在返回错误提示消息,在文档体现

Bug fix:
无法传file_length特殊字符无法显示im用户为数字时,toLowercase报错发送音频增加时长参数
 
环信 WebIM sdk
测试环信WebIM请访问 https://webim.easemob.com更多关于环信的开发文档请见:https://docs.easemob.com
 
什么是环信 Web IM Demo

环信 Web IM Demo 展示了怎样使用环信 Web IM SDK 快速创建一个完整的类似微信的网页聊天示例。展示的功能包括:登录,登出,操作好友,收发个人消息、群组消息。

环信 Web IM 源代码已在 GitHub 上开源供开发者下载 https://github.com/easemob/web-im,以帮助开发者更好的学习了解环信 SDK。

Demo使用react框架,支持IE9+、Chrome、Firefox等高级浏览器。SDK支持IE8+。

下载环信 Web IM Demo
下载环信Web IM及SDK:下载目录简要说明:
 
demo:demo相关静态资源文件。包括脚本、样式、语言包、Appkey配置文件(/demo/javascript/dist/webim.config.js)等sdk:WebIM SDKpackage.json: 构建环境依赖文件。需要安装npm环境,终端执行sudo npm intall等待安装完成webpack.config.js: webpack配置文件

运行环信 Web IM

运行方式有两种:
直接使用浏览器打开 index.html 文件。(注:ie9需要使用下面的方式)将Demo部署到 web 服务器通过 URL 访问 index.html。

Web IM 功能演示

点击http://webim.easemob.com 对 Web IM 进行体验,账号为环信Demo的账号(与 Android、iOS 的 Demo 账号相同)。

Web IM 功能说明

Easemob Web IM SDK 已支持如下功能:

1. SDK 本身已支持 IE8+、FireFox10+、Chrome15+、Safari6+ 之间文本、表情、图片、音频消息相互发送。

2. SDK 支持 Web 端之间,Web 端与 Android/iOS端相互添加、删除好友功能。

3. SDK 支持与iOS、Android SDK 之间相互发送文本、图片、音频、地址消息。

4. SDK 对于消息的处理方式如下:
文本、表情消息,直接发送、接收。附件消息(图片、音频、文件等),SDK上传附件到服务器,然后发送附件基本信息(发送方上传的附件URL、文件名等),接收方根据附件的URL、secret和自身的登录信息,以流的形式从服务器上下载到本地处理。

5. 提供Demo,方便大家参考,已实现聊天添加/删除好友/群组功能。

备注:
Demo默认支持的图片消息格式:PNG、JPG、BMP、GIF;Demo默认支持的音频消息格式:MP3、AMR、WMV;Demo默认支持的文件消息格式:PNG、JPG、BMP、GIF、zip、txt、doc、pdf; 查看全部
WebIM.jpg

版本:V1.1.2 2016-8-12

功能改进:
  • 新版demo
  • 添加isAutoLogoin参数,默认setPresence
  • 拆分sdk为四个文件,最终打包成一个webim.im.sdk.js
  • 增加try catch,尽量减少因为外部的错误导致的连接断开
  • 修改错误码,不在返回错误提示消息,在文档体现


Bug fix:
  • 无法传file_length
  • 特殊字符无法显示
  • im用户为数字时,toLowercase报错
  • 发送音频增加时长参数

 
环信 WebIM sdk

 
什么是环信 Web IM Demo

环信 Web IM Demo 展示了怎样使用环信 Web IM SDK 快速创建一个完整的类似微信的网页聊天示例。展示的功能包括:登录,登出,操作好友,收发个人消息、群组消息。

环信 Web IM 源代码已在 GitHub 上开源供开发者下载 https://github.com/easemob/web-im,以帮助开发者更好的学习了解环信 SDK。

Demo使用react框架,支持IE9+、Chrome、Firefox等高级浏览器。SDK支持IE8+。

下载环信 Web IM Demo
  1. 下载环信Web IM及SDK:下载
  2. 目录简要说明:

 
  • demo:demo相关静态资源文件。包括脚本、样式、语言包、Appkey配置文件(/demo/javascript/dist/webim.config.js)等
  • sdk:WebIM SDK
  • package.json: 构建环境依赖文件。需要安装npm环境,终端执行sudo npm intall等待安装完成
  • webpack.config.js: webpack配置文件


运行环信 Web IM

运行方式有两种:
  • 直接使用浏览器打开 index.html 文件。(注:ie9需要使用下面的方式)
  • 将Demo部署到 web 服务器通过 URL 访问 index.html。


Web IM 功能演示

点击http://webim.easemob.com 对 Web IM 进行体验,账号为环信Demo的账号(与 Android、iOS 的 Demo 账号相同)。

Web IM 功能说明

Easemob Web IM SDK 已支持如下功能:

1. SDK 本身已支持 IE8+、FireFox10+、Chrome15+、Safari6+ 之间文本、表情、图片、音频消息相互发送。

2. SDK 支持 Web 端之间,Web 端与 Android/iOS端相互添加、删除好友功能。

3. SDK 支持与iOS、Android SDK 之间相互发送文本、图片、音频、地址消息。

4. SDK 对于消息的处理方式如下:
  • 文本、表情消息,直接发送、接收。
  • 附件消息(图片、音频、文件等),SDK上传附件到服务器,然后发送附件基本信息(发送方上传的附件URL、文件名等),接收方根据附件的URL、secret和自身的登录信息,以流的形式从服务器上下载到本地处理。


5. 提供Demo,方便大家参考,已实现聊天添加/删除好友/群组功能。

备注:
  • Demo默认支持的图片消息格式:PNG、JPG、BMP、GIF;
  • Demo默认支持的音频消息格式:MP3、AMR、WMV;
  • Demo默认支持的文件消息格式:PNG、JPG、BMP、GIF、zip、txt、doc、pdf;

0
评论

15个Chrome中的开发技巧 chrome webim

beyond 发表了文章 • 699 次浏览 • 2016-08-09 16:02 • 来自相关话题

    如果你是一位开发者,相信你肯定不会对Chrome浏览器感到陌生。根据一份最新的浏览器市场占有率报告,Chrome近乎占有浏览器天下的半壁江山。如果你是一名web开发人员,我推荐你使用Chrome。作为前端开发的"IDE",你只需要搭配一个编辑器就能完成几乎所有的开发任务了。在Web开发者中,Google Chrome是使用最广泛的浏览器。六周一次的发布周期和一套强大的不断扩大开发功能,使其成为了web开发者必备的工具。本文分享15个有助于改进你的开发流程的技巧。

一、快速切换文件

如果你使用过sublime text,那么你可能不习惯没有Go to anything这个功能的覆盖。你会很高兴听到chrome开发者功能也有这个功能,当DevTools被打开的时候,按Ctrl+P(cmd+p on mac),就能快速搜寻和打开你项目的文件。




快速切换文件
二、在源代码中搜索

如果你希望在源代码中搜索要怎么办呢?在页面已经加载的文件中搜寻一个特定的字符串,快捷键是Ctrl + Shift + F (Cmd + Opt + F),这种搜寻方式还支持正则表达式哦




在源代码中搜索
三、快速跳转到指定行

在Sources标签中打开一个文件之后,在Windows和Linux中,按Ctrl + G,(or Cmd + L for Mac),然后输入行号,DevTools就会允许你跳转到文件中的任意一行。




快速跳转到指定行
另外一种方式是按Ctrl + O,输入:和行数,而不用去寻找一个文件。
 
四、在控制台选择元素

DevTools控制台支持一些变量和函数来选择DOM元素:

$()–document.querySelector()的简写,返回第一个和css选择器匹配的元素。例如$(‘div’)返回这个页面中第一个div元素
$$()–document.querySelectorAll()的简写,返回一个和css选择器匹配的元素数组。
$0-$4–依次返回五个最近你在元素面板选择过的DOM元素的历史记录,$0是最新的记录,以此类推。




在控制台选择元素
五、使用多个插入符进行选择

当编辑一个文件的时候,你可以按住Ctrl(cmd for mac),在你要编辑的地方点击鼠标,可以设置多个插入符,这样可以一次在多个地方编辑。




使用多个插入符进行选择
六、保存记录

勾选在Console标签下的保存记录选项,你可以使DevTools的console继续保存记录而不会在每个页面加载之后清除记录。当你想要研究在页面还没加载完之前出现的bug时,这会是一个很方便的方法。




保存记录
 
七、优质打印

Chrome’s Developer Tools有内建的美化代码,可以返回一段最小化且格式易读的代码。Pretty Print的按钮在Sources标签的左下角。




优质打印
八、设备模式

对于开发移动友好页面,DevTools包含了一个非常强大的模式,这个谷歌视频介绍了其主要特点,如调整屏幕大小、触摸仿真和模拟糟糕的网络连接。




设备模式

九、设备传感仿真

设备模式的另一个很酷的功能是模拟移动设备的传感器,例如触摸屏幕和加速计。你甚至可以恶搞你的地理位置。这个功能位于元素标签的底部,点击“show drawer”按钮,就可看见Emulation标签 --> Sensors。




设备传感仿真
 
十、颜色选择器

当在样式编辑中选择了一个颜色属性时,你可以点击颜色预览,就会弹出一个颜色选择器。当选择器开启时,如果你停留在页面,鼠标指针会变成一个放大镜,让你去选择像素精度的颜色。




颜色选择器
 
十一、强制改变元素状态

DevTools有一个可以模拟CSS状态的功能,例如元素的hover和focus,可以很容易的改变元素样式。在CSS编辑器中可以利用这个功能。




强制改变元素状态
十二、可视化的DOM阴影

Web浏览器在构建如文本框、按钮和输入框一类元素时,其它基本元素的视图是隐藏的。不过,你可以在Settings -> General 中切换成Show user agent shadow DOM,这样就会在元素标签页中显示被隐藏的代码。甚至还能单独设计他们的样式,这给你了很大的控制权。




可视化的DOM阴影
 
十三、选择下一个匹配项

当在Sources标签下编辑文件时,按下Ctrl + D (Cmd + D) ,当前选中的单词的下一个匹配也会被选中,有利于你同时对它们进行编辑。




选择下一个匹配项
 
十四、改变颜色格式

在颜色预览功能使用快捷键Shift + Click,可以在rgba、hsl和hexadecimal来回切换颜色的格式。




改变颜色格式
 
十五、通过workspaces来编辑本地 文件

Workspaces是Chrome DevTools的一个强大功能,这使DevTools变成了一个真正的IDE。Workspaces会将Sources选项卡中的文件和本地项目中的文件进行匹配,所以你可以直接编辑和保存,而不必复制/粘贴外部改变的文件到编辑器。

为了配置Workspaces,只需打开Sources选项,然后右击左边面板的任何一个地方,选择Add Folder To Worskpace,或者只是把你的整个工程文件夹拖放入Developer Tool。现在,无论在哪一个文件夹,被选中的文件夹,包括其子目录和所有文件都可以被编辑。为了让Workspaces更高效,你可以将页面中用到的文件映射到相应的文件夹,允许在线编辑和简单的保存。 查看全部
    如果你是一位开发者,相信你肯定不会对Chrome浏览器感到陌生。根据一份最新的浏览器市场占有率报告,Chrome近乎占有浏览器天下的半壁江山。如果你是一名web开发人员,我推荐你使用Chrome。作为前端开发的"IDE",你只需要搭配一个编辑器就能完成几乎所有的开发任务了。在Web开发者中,Google Chrome是使用最广泛的浏览器。六周一次的发布周期和一套强大的不断扩大开发功能,使其成为了web开发者必备的工具。本文分享15个有助于改进你的开发流程的技巧。

一、快速切换文件

如果你使用过sublime text,那么你可能不习惯没有Go to anything这个功能的覆盖。你会很高兴听到chrome开发者功能也有这个功能,当DevTools被打开的时候,按Ctrl+P(cmd+p on mac),就能快速搜寻和打开你项目的文件。

1714316-3f5e3c22736f3be7.gif

快速切换文件


二、在源代码中搜索

如果你希望在源代码中搜索要怎么办呢?在页面已经加载的文件中搜寻一个特定的字符串,快捷键是Ctrl + Shift + F (Cmd + Opt + F),这种搜寻方式还支持正则表达式哦

1714316-211b51988aef8f1f.gif

在源代码中搜索


三、快速跳转到指定行

在Sources标签中打开一个文件之后,在Windows和Linux中,按Ctrl + G,(or Cmd + L for Mac),然后输入行号,DevTools就会允许你跳转到文件中的任意一行。

1714316-def471241b0cb500.gif

快速跳转到指定行


另外一种方式是按Ctrl + O,输入:和行数,而不用去寻找一个文件。
 
四、在控制台选择元素

DevTools控制台支持一些变量和函数来选择DOM元素:

$()–document.querySelector()的简写,返回第一个和css选择器匹配的元素。例如$(‘div’)返回这个页面中第一个div元素
$$()–document.querySelectorAll()的简写,返回一个和css选择器匹配的元素数组。
$0-$4–依次返回五个最近你在元素面板选择过的DOM元素的历史记录,$0是最新的记录,以此类推。

1714316-3a3ad1498b101829.gif

在控制台选择元素


五、使用多个插入符进行选择

当编辑一个文件的时候,你可以按住Ctrl(cmd for mac),在你要编辑的地方点击鼠标,可以设置多个插入符,这样可以一次在多个地方编辑。

1714316-b1b717002c08d092.gif

使用多个插入符进行选择


六、保存记录

勾选在Console标签下的保存记录选项,你可以使DevTools的console继续保存记录而不会在每个页面加载之后清除记录。当你想要研究在页面还没加载完之前出现的bug时,这会是一个很方便的方法。

1714316-6b01f5e052aa5303.gif

保存记录


 
七、优质打印

Chrome’s Developer Tools有内建的美化代码,可以返回一段最小化且格式易读的代码。Pretty Print的按钮在Sources标签的左下角。

1714316-3445643968682add.gif

优质打印


八、设备模式

对于开发移动友好页面,DevTools包含了一个非常强大的模式,这个谷歌视频介绍了其主要特点,如调整屏幕大小、触摸仿真和模拟糟糕的网络连接。

1714316-adbd0cfcc727f787.png

设备模式



九、设备传感仿真

设备模式的另一个很酷的功能是模拟移动设备的传感器,例如触摸屏幕和加速计。你甚至可以恶搞你的地理位置。这个功能位于元素标签的底部,点击“show drawer”按钮,就可看见Emulation标签 --> Sensors。

1714316-72e0730ff49f4fc6.gif

设备传感仿真


 
十、颜色选择器

当在样式编辑中选择了一个颜色属性时,你可以点击颜色预览,就会弹出一个颜色选择器。当选择器开启时,如果你停留在页面,鼠标指针会变成一个放大镜,让你去选择像素精度的颜色。

1714316-c6a331a08722a76e.gif

颜色选择器


 
十一、强制改变元素状态

DevTools有一个可以模拟CSS状态的功能,例如元素的hover和focus,可以很容易的改变元素样式。在CSS编辑器中可以利用这个功能。

1714316-30f876f5791f7cb0.gif

强制改变元素状态


十二、可视化的DOM阴影

Web浏览器在构建如文本框、按钮和输入框一类元素时,其它基本元素的视图是隐藏的。不过,你可以在Settings -> General 中切换成Show user agent shadow DOM,这样就会在元素标签页中显示被隐藏的代码。甚至还能单独设计他们的样式,这给你了很大的控制权。

1714316-4540379689508bf9.gif

可视化的DOM阴影


 
十三、选择下一个匹配项

当在Sources标签下编辑文件时,按下Ctrl + D (Cmd + D) ,当前选中的单词的下一个匹配也会被选中,有利于你同时对它们进行编辑。

1714316-60021f3bb92aab5e.gif

选择下一个匹配项


 
十四、改变颜色格式

在颜色预览功能使用快捷键Shift + Click,可以在rgba、hsl和hexadecimal来回切换颜色的格式。

1714316-7a17a919f4e01687.gif

改变颜色格式


 
十五、通过workspaces来编辑本地 文件

Workspaces是Chrome DevTools的一个强大功能,这使DevTools变成了一个真正的IDE。Workspaces会将Sources选项卡中的文件和本地项目中的文件进行匹配,所以你可以直接编辑和保存,而不必复制/粘贴外部改变的文件到编辑器。

为了配置Workspaces,只需打开Sources选项,然后右击左边面板的任何一个地方,选择Add Folder To Worskpace,或者只是把你的整个工程文件夹拖放入Developer Tool。现在,无论在哪一个文件夹,被选中的文件夹,包括其子目录和所有文件都可以被编辑。为了让Workspaces更高效,你可以将页面中用到的文件映射到相应的文件夹,允许在线编辑和简单的保存。
0
评论

JS区分浏览器中页面刷新与关闭标签页 js刷新当前页面 webim JS区分浏览器中页面刷新与关闭标签页

beyond 发表了文章 • 2309 次浏览 • 2016-04-18 17:04 • 来自相关话题

文章摘要:js刷新当前页面,Web开发者在系统开发中经常要面对产品经理各式各样的需求,当然,大部分对产品体验还是有帮助的,例如我们今天提到的刷新页面,前进后退,关闭浏览器标签时,为了避免用户误操作,需给出二次确认提示框,这个相信大家都非常熟悉了,采用浏览器提供的BOM事件机制就可以...

   Web开发者在系统开发中经常要面对产品经理各式各样的需求,当然,大部分对产品体验还是有帮助的,例如我们今天提到的刷新页面,前进后退,关闭浏览器标签时,为了避免用户误操作,需给出二次确认提示框,这个相信大家都非常熟悉了,采用浏览器提供的BOM事件机制就可以解决,使用window对象的onbeforeunload事件即可,如果产品经理只提出这样的需求,那确实无可厚非,然而其需要的不仅仅是这些...

例如,我们一次项目开发中,产品经理就针对我们的实现提出了“改进方案”:
你们这弹出框太丑了,跟系统整体风格不搭调啊,不能使用咱们自己组件库中的Dialog吗?很好的问题...我只想说,you can you up...你们这刷新和关闭标签页中展示的文案一样啊,需要区分对待下,刷新提示XXX,关闭时提示SSS,这样用户才能更明确。恩,考虑到了用户的体验,很好,我还是想说,you can you up...其实,浏览器在关闭和刷新时,本身已经区别对待了,提示是不同的,只不过我们自定义的部分并不能显示不同的文案而已;当然,也有一些hack的方法,但是很难适应多个浏览器,各浏览器内部对于关闭标签页和刷新的实现机制会有所不同;你们每次登录进来,为什么要延时10秒,才让坐席签入电话系统啊(我们做的是客服系统)?能不能把这个限制去掉啊,用户体验太不好了!我们也想去掉啊,但是电话系统频繁签入签出会有问题,用户刷新了浏览器,再次签入,如果相隔时间很短的话,电话系统会出现故障,为了避免这个问题,我们才加上了这个限制,但是回过头来思考,就可以进入我们今天讨论的主题了;


区分刷新与关闭标签页

我们无法根据浏览器事件区分刷新还是关闭标签页,进而在相应动作触发前,执行不同的动作,但是对于上文中产品提出的第三点意见,其实还是可以考虑优化一下的,就是只有在刷新的时候延时10秒,新登录或关闭标签页一段时间之后再进来时不延时;

要做到这点其实也很简单,使用浏览器的本地存储机制就可以实现,例如cookie,LocalStorage等,这里就不能使用SessionStorage了,因为本次回话结束后,该缓存就失效了;由于在cookie中存储会增加cookie的字节数,每次请求中相应的网络传输量会增加,因此,我们采用了LocalStorage;其操作很简单,我们使用的前端框架是AngularJS,具体如下:const MAX_WAIT_TIME = 10;
const currentDate = new Date().getTime();
const lastestLeaveTime = parseInt(this.$window.localStorage.getItem('lastestLeaveTime'), 10) || currentDate;
this.secondCounter = Math.max(MAX_WAIT_TIME - Math.ceil((currentDate - lastestLeaveTime) / 1000), 0);
if (this.secondCounter > 0) {
this.logoutTimeInterval = this.$interval(()=> {
this.secondCounter--;
this.$scope.$digest();
}, 1000, this.secondCounter, false).then(() => {
this.updateByStatus(this.AvayaService.status.OFFLINE);
});
} else {
this.updateByStatus(this.AvayaService.status.OFFLINE);
}上面代码主要作用是,进入系统后,会先去LocalStorage中获取上次退出时的时间,再获取当前时间,两个时间进行减法,如果值小于10秒,我们就认为这是刷新,如果值大于10秒,我们认为是关闭标签页或新登录,进而可以执行不同的方法,让客服有更好的体验,不用每次进入系统都要等待10秒才能签入电话系统了,产品经理还是很重要的,吼吼,要不是他的疑问,可能我们也不会来优化这个地方了...当然,其实RD也要逐渐培养这种用户体验至上的思维,哪怕有一点可提升客服效率的地方,都值得我们花时间来优化;

下面把相关退出的代码也贴一下吧,前面忘说了,不管是刷新,还是关闭标签页,只要是页面销毁,我们都会去执行登出电话系统的操作,所以每次进来后需要重新签入;//刷新页面或者关闭页面
$window.onbeforeunload = () => {
return '操作将会导致页面数据清空,请谨慎操作...';
};//每次页面unload时,设置LocalStorage时间;
$window.onunload = () => {
$window.localStorage.setItem('lastestLeaveTime', new Date().getTime());
};我们可能还注意到一些问题,那就是刷新,关闭页面,前进后退,你需要跳出浏览器默认二次确认框,但是用户点击退出系统按钮,则必须弹出自己组件库中的Dialog了,还必须不能两个都弹出,具体代码如下:onStatusClick(index, name) {
if (name === '退出') {
this.mgDialog.openConfirm({
showClose: false,
template: 'app/header/logoutDialog.html',
controller: 'HeaderDialogController as dialog',
data: {
'title': '您确定要退出系统吗?'
}
}).then(() => {
this.$window.location.href = '/logout';
this.$window.onbeforeunload = null;
});
} else {
// 内部操作,大家不用管
...
}
} 查看全部
文章摘要:js刷新当前页面,Web开发者在系统开发中经常要面对产品经理各式各样的需求,当然,大部分对产品体验还是有帮助的,例如我们今天提到的刷新页面,前进后退,关闭浏览器标签时,为了避免用户误操作,需给出二次确认提示框,这个相信大家都非常熟悉了,采用浏览器提供的BOM事件机制就可以...

   Web开发者在系统开发中经常要面对产品经理各式各样的需求,当然,大部分对产品体验还是有帮助的,例如我们今天提到的刷新页面,前进后退,关闭浏览器标签时,为了避免用户误操作,需给出二次确认提示框,这个相信大家都非常熟悉了,采用浏览器提供的BOM事件机制就可以解决,使用window对象的onbeforeunload事件即可,如果产品经理只提出这样的需求,那确实无可厚非,然而其需要的不仅仅是这些...

例如,我们一次项目开发中,产品经理就针对我们的实现提出了“改进方案”:
  1. 你们这弹出框太丑了,跟系统整体风格不搭调啊,不能使用咱们自己组件库中的Dialog吗?很好的问题...我只想说,you can you up...
  2. 你们这刷新和关闭标签页中展示的文案一样啊,需要区分对待下,刷新提示XXX,关闭时提示SSS,这样用户才能更明确。恩,考虑到了用户的体验,很好,我还是想说,you can you up...其实,浏览器在关闭和刷新时,本身已经区别对待了,提示是不同的,只不过我们自定义的部分并不能显示不同的文案而已;当然,也有一些hack的方法,但是很难适应多个浏览器,各浏览器内部对于关闭标签页和刷新的实现机制会有所不同;
  3. 你们每次登录进来,为什么要延时10秒,才让坐席签入电话系统啊(我们做的是客服系统)?能不能把这个限制去掉啊,用户体验太不好了!我们也想去掉啊,但是电话系统频繁签入签出会有问题,用户刷新了浏览器,再次签入,如果相隔时间很短的话,电话系统会出现故障,为了避免这个问题,我们才加上了这个限制,但是回过头来思考,就可以进入我们今天讨论的主题了;



区分刷新与关闭标签页

我们无法根据浏览器事件区分刷新还是关闭标签页,进而在相应动作触发前,执行不同的动作,但是对于上文中产品提出的第三点意见,其实还是可以考虑优化一下的,就是只有在刷新的时候延时10秒,新登录或关闭标签页一段时间之后再进来时不延时;

要做到这点其实也很简单,使用浏览器的本地存储机制就可以实现,例如cookie,LocalStorage等,这里就不能使用SessionStorage了,因为本次回话结束后,该缓存就失效了;由于在cookie中存储会增加cookie的字节数,每次请求中相应的网络传输量会增加,因此,我们采用了LocalStorage;其操作很简单,我们使用的前端框架是AngularJS,具体如下:
const MAX_WAIT_TIME = 10;
const currentDate = new Date().getTime();
const lastestLeaveTime = parseInt(this.$window.localStorage.getItem('lastestLeaveTime'), 10) || currentDate;
this.secondCounter = Math.max(MAX_WAIT_TIME - Math.ceil((currentDate - lastestLeaveTime) / 1000), 0);
if (this.secondCounter > 0) {
this.logoutTimeInterval = this.$interval(()=> {
this.secondCounter--;
this.$scope.$digest();
}, 1000, this.secondCounter, false).then(() => {
this.updateByStatus(this.AvayaService.status.OFFLINE);
});
} else {
this.updateByStatus(this.AvayaService.status.OFFLINE);
}
上面代码主要作用是,进入系统后,会先去LocalStorage中获取上次退出时的时间,再获取当前时间,两个时间进行减法,如果值小于10秒,我们就认为这是刷新,如果值大于10秒,我们认为是关闭标签页或新登录,进而可以执行不同的方法,让客服有更好的体验,不用每次进入系统都要等待10秒才能签入电话系统了,产品经理还是很重要的,吼吼,要不是他的疑问,可能我们也不会来优化这个地方了...当然,其实RD也要逐渐培养这种用户体验至上的思维,哪怕有一点可提升客服效率的地方,都值得我们花时间来优化;

下面把相关退出的代码也贴一下吧,前面忘说了,不管是刷新,还是关闭标签页,只要是页面销毁,我们都会去执行登出电话系统的操作,所以每次进来后需要重新签入;
//刷新页面或者关闭页面
$window.onbeforeunload = () => {
return '操作将会导致页面数据清空,请谨慎操作...';
};
//每次页面unload时,设置LocalStorage时间;
$window.onunload = () => {
$window.localStorage.setItem('lastestLeaveTime', new Date().getTime());
};
我们可能还注意到一些问题,那就是刷新,关闭页面,前进后退,你需要跳出浏览器默认二次确认框,但是用户点击退出系统按钮,则必须弹出自己组件库中的Dialog了,还必须不能两个都弹出,具体代码如下:
onStatusClick(index, name) {
if (name === '退出') {
this.mgDialog.openConfirm({
showClose: false,
template: 'app/header/logoutDialog.html',
controller: 'HeaderDialogController as dialog',
data: {
'title': '您确定要退出系统吗?'
}
}).then(() => {
this.$window.location.href = '/logout';
this.$window.onbeforeunload = null;
});
} else {
// 内部操作,大家不用管
...
}
}
3
评论

【产品快递】WebIm V1.1.0发布,网页端新增聊天室功能 聊天室 产品快递 webim

beyond 发表了文章 • 2851 次浏览 • 2016-04-11 19:18 • 来自相关话题

版本:V1.1.0 2016-4-6​:
功能改进:

1. 将表情包移除sdk,变为可自定义导入配置。
2. 增加XMPP连接多resource支持的参数。
3. 对于不支持wss,如qqX5内核浏览器,自动降级为https long polling。
4. 增加聊天室功能,在线聊天室列表,加入聊天室,退出聊天室等接口 
5. 与之前版本sdk部分api已不兼容,添加shim.js,做降级支持
6. 新增消息发送的成功失败回调
7. 重整目录结构,优化代码,bug fix
 
 
easemob webim sdk已支持如下功能:
1.sdk本身已支持IE8+、FireFox、Chrome、Safari之间文本、表情、图片、音频消息相互发送
2.sdk支持web端之间,web端与app端相互添加、删除好友功能
3.sdk支持与ios、android sdk见相互发送文本、图片、音频消息
4.sdk提供部分公共方法,具体参见quickstart.md
5.sdk对于消息的处理方式如下:
   1)文本消息,直接发送,接收方接收到为文本消息
   2)表情消息,sdk得到表情对应的编码后,发送的文本消息,接收方接收到后处理根据编码还原表情
   3)图片消息,sdk上传图片到聊天服务器,然后发送图片基本信息消息,消息中带有发送方上传的图片url等,接收方根据图片url、secret和自身的登录信息,以流的形式从服务器上下载图片到本地显示
   4)音频消息,sdk上传音频到聊天服务器,然后发送音频基本消息消息,消息中含有发送方上传的音频url等,接收房根据音频url、secret和自身的登录信息,以流的形式从服务器上下载音频到本地播放
6.跟随sdk会有简单的demo,方便大家参考,已实现简单的聊天添加删除好友功能。
7.对于amr格式音频FF、Chrome、IE、Safari已实现接收方对收到后音频下载,调用本地播放器实现播放。
8.支持群组线聊天功能,显示群组成员列表
9.支持陌生人聊天功能

测试环信WebIM请访问 https://webim.easemob.com

登录可以使用环信UIDemo的账号和密码(见http://www.easemob.com/demo)

环信WebIM快速入门文档请见:https://github.com/easemob/web-im/blob/master/static/sdk/quickstart.md

更多关于环信的开发文档请见:https://docs.easemob.com 
 
WebIm V1.1.0 下载
 
       ↓↓↓
  查看全部
24958PICwjQ_1024.jpg

版本:V1.1.0 2016-4-6​:

功能改进:

1. 将表情包移除sdk,变为可自定义导入配置。
2. 增加XMPP连接多resource支持的参数。
3. 对于不支持wss,如qqX5内核浏览器,自动降级为https long polling。
4. 增加聊天室功能,在线聊天室列表,加入聊天室,退出聊天室等接口 
5. 与之前版本sdk部分api已不兼容,添加shim.js,做降级支持
6. 新增消息发送的成功失败回调
7. 重整目录结构,优化代码,bug fix

 


 
easemob webim sdk已支持如下功能:

1.sdk本身已支持IE8+、FireFox、Chrome、Safari之间文本、表情、图片、音频消息相互发送
2.sdk支持web端之间,web端与app端相互添加、删除好友功能
3.sdk支持与ios、android sdk见相互发送文本、图片、音频消息
4.sdk提供部分公共方法,具体参见quickstart.md
5.sdk对于消息的处理方式如下:
   1)文本消息,直接发送,接收方接收到为文本消息
   2)表情消息,sdk得到表情对应的编码后,发送的文本消息,接收方接收到后处理根据编码还原表情
   3)图片消息,sdk上传图片到聊天服务器,然后发送图片基本信息消息,消息中带有发送方上传的图片url等,接收方根据图片url、secret和自身的登录信息,以流的形式从服务器上下载图片到本地显示
   4)音频消息,sdk上传音频到聊天服务器,然后发送音频基本消息消息,消息中含有发送方上传的音频url等,接收房根据音频url、secret和自身的登录信息,以流的形式从服务器上下载音频到本地播放
6.跟随sdk会有简单的demo,方便大家参考,已实现简单的聊天添加删除好友功能。
7.对于amr格式音频FF、Chrome、IE、Safari已实现接收方对收到后音频下载,调用本地播放器实现播放。
8.支持群组线聊天功能,显示群组成员列表
9.支持陌生人聊天功能



测试环信WebIM请访问 https://webim.easemob.com

登录可以使用环信UIDemo的账号和密码(见http://www.easemob.com/demo)

环信WebIM快速入门文档请见:https://github.com/easemob/web-im/blob/master/static/sdk/quickstart.md

更多关于环信的开发文档请见:https://docs.easemob.com 
 
WebIm V1.1.0 下载
 
       ↓↓↓
 
0
评论

环信直播课堂第一期 知识点干货分享和项目代码 环信直播 webim

beyond 发表了文章 • 1749 次浏览 • 2016-03-02 12:19 • 来自相关话题

以下为直播中记录的干货笔记,视频中写的webim集成项目在文章末尾附件下载Q:心跳的支持
A:连接成功的回调里面启动心跳

Q:环信发消息是否需要好友关系呢
A:不需要的 ,知道对方id就可以直接聊天
var options = {
//to : to,
to:'msgto',
msg : msg,
type : "chat"
};

Q:输入空消息的判断
A: var sendText = function() {
// if (textSending) {
// return;
//}

Q:自动登陆的 实现
A:$(function()
{
login();
}

)

Q:用户token 的登陆
A://根据用户名密码登录系统
conn.open({
apiUrl : Easemob.im.config.apiURL,
user : user,
// pwd : pass,
accessToken : "YWMtV8DgQt97EeWInF-xEd80TgAAAVRl-FixEr0I5NWLkYFefpM919W5-JU1Uvc",
//连接时提供appkey
appKey : Easemob.im.config.appkey
});

Q:多网页的共存
A:var resource_value = Math.floor(Math.random()*1000);
// var resource_value = "webim";

Q:刷新或者退出网页的时候提示
A: $(function() {
$(window).bind('beforeunload', function() {
if (conn) {
conn.close();
if (navigator.userAgent.indexOf("Firefox") > 0)
return ' ';
else
return '';
}
});
});

Q:低版本ie是否支持
A:支持ie789+,在调试的过程中需要本地配置服务

集成移动客服的时候,IM 服务号是干嘛的呢
A:
1:在客服后台绑定一个关联
指定一个im服务号

2:客户端联系客服的时候,写个按钮“联系客服”
调用了发消息的方法,接收对象 to=关联里面的 im服务号
消息发送过去之后 会到客服后台,根据分配策略分配给对应的客服

Q:网站集成环信移动客服
A:在</body>标签前加入这段代码
<script src='//kefu.easemob.com/webim/easemob.js?tenantId=327&hide=false' async='async'></script>

Q:这个按钮进行自定义
A:首先,将已嵌入网站中的JS插件代码中的hide=false修改为hide=true:(确保tenantId为自己的)
<a href="javascript:;" onclick="easemobIM()" tenantId=0000>自定义按钮</a>

Q:自定义联系客服的界面
A:[url]https://github.com/easemob/kefu-webim[/url]
 
直播中写的项目代码下载 ↓ ↓ 查看全部
以下为直播中记录的干货笔记,视频中写的webim集成项目在文章末尾附件下载
Q:心跳的支持
A:连接成功的回调里面启动心跳

Q:环信发消息是否需要好友关系呢
A:不需要的 ,知道对方id就可以直接聊天
var options = {
//to : to,
to:'msgto',
msg : msg,
type : "chat"
};

Q:输入空消息的判断
A: var sendText = function() {
// if (textSending) {
// return;
//}

Q:自动登陆的 实现
A:$(function()
{
login();
}

)

Q:用户token 的登陆
A://根据用户名密码登录系统
conn.open({
apiUrl : Easemob.im.config.apiURL,
user : user,
// pwd : pass,
accessToken : "YWMtV8DgQt97EeWInF-xEd80TgAAAVRl-FixEr0I5NWLkYFefpM919W5-JU1Uvc",
//连接时提供appkey
appKey : Easemob.im.config.appkey
});

Q:多网页的共存
A:var resource_value = Math.floor(Math.random()*1000);
// var resource_value = "webim";

Q:刷新或者退出网页的时候提示
A: $(function() {
$(window).bind('beforeunload', function() {
if (conn) {
conn.close();
if (navigator.userAgent.indexOf("Firefox") > 0)
return ' ';
else
return '';
}
});
});

Q:低版本ie是否支持
A:支持ie789+,在调试的过程中需要本地配置服务

集成移动客服的时候,IM 服务号是干嘛的呢
A:
1:在客服后台绑定一个关联
指定一个im服务号

2:客户端联系客服的时候,写个按钮“联系客服”
调用了发消息的方法,接收对象 to=关联里面的 im服务号
消息发送过去之后 会到客服后台,根据分配策略分配给对应的客服

Q:网站集成环信移动客服
A:在</body>标签前加入这段代码
<script src='//kefu.easemob.com/webim/easemob.js?tenantId=327&hide=false' async='async'></script>

Q:这个按钮进行自定义
A:首先,将已嵌入网站中的JS插件代码中的hide=false修改为hide=true:(确保tenantId为自己的)
<a href="javascript:;" onclick="easemobIM()" tenantId=0000>自定义按钮</a>

Q:自定义联系客服的界面
A:[url]https://github.com/easemob/kefu-webim[/url]
 
直播中写的项目代码下载 ↓ ↓
26
评论

webim自动登录 多网页共存 输入框空消息判断 webim

beyond 发表了文章 • 6409 次浏览 • 2015-12-21 17:40 • 来自相关话题

集成环信webim ,发现需要输入账号密码才能登陆,如果需要实现打开页面就直接登陆该怎么办?

以webdemo为例(demo下载地址http://www.easemob.com/downloads),打开index ,demo 的登陆是写了一个login方法调用的conn.open。只需要在这个方法前写一个页面加载函数 ,直接调用login就可以实现我们需要的打开页面登陆功能
 




就是这么酷炫,小伙伴们快去试一下吧!
 
接下来我们来看第二个问题,怎么实现多网页共存?还是老样子,先讲一下原理吧,
-conn.open的时候多传递参数,resource:随机值,每个tab中随机值不能一样,一样则会把前一个登录的踢出,默认都是webim
如果觉得看不懂也没关系,这个在环信webimsdk里已经写好了的,打开easemob.im-1.0.7.js 
把截图里圈出来的地方注释打开,下面resource_value注释掉(这下是不是明白了呢)





 
 
在使用webdemo 的时候发现打开会话界面不输入消息,点击发送按钮(也就是发送一条空消息)这样会导致后续发不出去消息,这个应该怎么处理呢?
 
把这个判断注释掉即可





 
上面说的三个技能都掌握了吗?附件为一份简单集成的demo,可以拿去参考下。

有关于环信集成问题或者想了解哪方面移动互联网知识,可以在下方评论留言,我们就计划更新出来。
  查看全部
集成环信webim ,发现需要输入账号密码才能登陆,如果需要实现打开页面就直接登陆该怎么办?

以webdemo为例(demo下载地址http://www.easemob.com/downloads),打开index ,demo 的登陆是写了一个login方法调用的conn.open。只需要在这个方法前写一个页面加载函数 ,直接调用login就可以实现我们需要的打开页面登陆功能
 
QQ截图20151221173013.png

就是这么酷炫,小伙伴们快去试一下吧!
 
接下来我们来看第二个问题,怎么实现多网页共存?还是老样子,先讲一下原理吧,
-conn.open的时候多传递参数,resource:随机值,每个tab中随机值不能一样,一样则会把前一个登录的踢出,默认都是webim
如果觉得看不懂也没关系,这个在环信webimsdk里已经写好了的,打开easemob.im-1.0.7.js 
把截图里圈出来的地方注释打开,下面resource_value注释掉(这下是不是明白了呢)

QQ截图20151221173151.png

 
 
在使用webdemo 的时候发现打开会话界面不输入消息,点击发送按钮(也就是发送一条空消息)这样会导致后续发不出去消息,这个应该怎么处理呢?
 
把这个判断注释掉即可

QQ截图20151221173324.png

 
上面说的三个技能都掌握了吗?附件为一份简单集成的demo,可以拿去参考下。

有关于环信集成问题或者想了解哪方面移动互联网知识,可以在下方评论留言,我们就计划更新出来。
 
0
评论

用户的H5 APP接这个WEBIM的SDK,可行吗?能否给个建议? webim 环信商务问题

环信专业服务 发表了文章 • 1348 次浏览 • 2015-09-18 15:26 • 来自相关话题

手机端用可以。但强烈不建议,因为webim设计时是没有考虑移动终端的弱网络环境的,在自动重连,不丢失消息等方面都没有做特别的处理。也没有考虑省电省流量的需求。因为桌面的浏览器没有要求省电省流量。所以结论就是能用。但可能不好用 。
手机端用可以。但强烈不建议,因为webim设计时是没有考虑移动终端的弱网络环境的,在自动重连,不丢失消息等方面都没有做特别的处理。也没有考虑省电省流量的需求。因为桌面的浏览器没有要求省电省流量。所以结论就是能用。但可能不好用 。
0
评论

webIM明文传输,安全性不够吧? webim 环信_WebIM

环信专业服务 发表了文章 • 1294 次浏览 • 2015-09-16 14:52 • 来自相关话题

webim支持https
webim支持https
7
评论
0
评论

请教个webim问题,报错“同源策略禁止读取位于http://im-api.easemob.com/http-bind/的无程资源”,请问怎么解决? webim 环信_WebIM

环信专业服务 发表了文章 • 1930 次浏览 • 2015-09-06 20:22 • 来自相关话题

设置 apiurl 为https。
设置 apiurl 为https。
0
评论

把 webIM弄到微信公众号里面去。在里面的网页进行聊天。会不会被微信干掉? webim 环信商务问题

环信专业服务 发表了文章 • 1516 次浏览 • 2015-09-04 07:24 • 来自相关话题

应该不会。微信也没法监视到网页里在做什么,有环信上的app把webim嵌入到微信上的网页上的案例。
应该不会。微信也没法监视到网页里在做什么,有环信上的app把webim嵌入到微信上的网页上的案例。
0
评论

webIM如果直接关闭聊天窗口,那当前登录人的状态还是在线? webim 在线 在线状态 环信_WebIM

环信专业服务 发表了文章 • 1792 次浏览 • 2015-08-31 20:15 • 来自相关话题

有个缓冲时间,如果是点击退出,应该是立刻;如果要是直接关闭浏览器,服务器没法立刻知道,需要有个缓冲时间。
有个缓冲时间,如果是点击退出,应该是立刻;如果要是直接关闭浏览器,服务器没法立刻知道,需要有个缓冲时间。
0
评论

1.webim-sdk是依赖jQuery吗?2.webim-sdk可以不依赖 jQuery吗? webim 环信_WebIM

环信专业服务 发表了文章 • 1837 次浏览 • 2015-08-31 08:46 • 来自相关话题

1.webim-SDK 依赖于 jQuery; 2.目前不行,除非jQuery做的完全用js重写。
1.webim-SDK 依赖于 jQuery; 2.目前不行,除非jQuery做的完全用js重写。
0
评论

WEBIM 可以支持IE6,IE7,IE8,IE9部署成功了吗?现在可以支持了吗? webim 环信_WebIM

环信专业服务 发表了文章 • 1452 次浏览 • 2015-08-30 18:43 • 来自相关话题

已经支持IE7,8,9。
已经支持IE7,8,9。
0
评论

webIM 支持发送透传消息吗? webim 透传 透传消息 环信_WebIM

环信专业服务 发表了文章 • 1350 次浏览 • 2015-08-28 22:42 • 来自相关话题

可以调用restapi发送透传消息,查看文档上的介绍 http://docs.easemob.com/doku.p ... sages
可以调用restapi发送透传消息,查看文档上的介绍 http://docs.easemob.com/doku.p ... sages
0
评论

官网下载webIM SDK,没有v1.0.7 版本? webim 环信技术支持

环信专业服务 发表了文章 • 1045 次浏览 • 2015-08-26 03:19 • 来自相关话题

1.0.7版本依赖于服务端的一个功能升级,所以还没有正式发布。
1.0.7版本依赖于服务端的一个功能升级,所以还没有正式发布。
0
评论

web端私信为什么不建议用webIM,而是调用rest接口发送,用轮询是否会对后期服务器造成压力呢? webim 环信_WebIM

环信专业服务 发表了文章 • 1784 次浏览 • 2015-08-26 01:50 • 来自相关话题

这种方案最简单。但不会特别的实时。所以适合实时要求不是特别高的私信,如果用webim改,会非常实时。但工作量大。webim很复杂,用的库也多,ui也复杂。环信的webim是开源的,但工程师要把这些代码读懂,也需要些时间的。用轮询是否会对后期服务器造成压力呢 --这个要看系统以后设计容量是多少。 查看全部
这种方案最简单。但不会特别的实时。所以适合实时要求不是特别高的私信,如果用webim改,会非常实时。但工作量大。webim很复杂,用的库也多,ui也复杂。环信的webim是开源的,但工程师要把这些代码读懂,也需要些时间的。用轮询是否会对后期服务器造成压力呢 --这个要看系统以后设计容量是多少。