webim

webim

9
回复

收集基于环信SDK开发的开源项目 开源项目

xiaoyan2015 回复了问题 • 12 人关注 • 9292 次浏览 • 2018-08-18 10:42 • 来自相关话题

3
评论

【开源项目】全国首个开源直播小程序源码 环信公开课 小程序 直播

beyond 发表了文章 • 645 次浏览 • 2018-07-20 17:30 • 来自相关话题

今天你看直播了吗?拥有10亿微信生态用户的小程序已经成为了继移动互联后的又一个现象级风口,随着微信小程序对外开放实时音视频录制及播放等更多连接能力,小程序与直播强强联合,在各行各业找到了非常多的玩法,小程序直播相比微信直播和APP直播更加简洁、流畅、低延时、多入口等众多优势迅速向商业直播领域及泛娱乐直播领域蔓延。从小游戏、内容付费、工具、大数据、社交电商创业者到传统品牌商们,都在努力搭上小程序直播这辆快车,以免错过微信生态里新的流量洼地。
 





作为一名环信生态圈资深开发者,本着对技术的热衷,对环信的眷恋和对党的忠诚,基于环信即时通讯云写了“直播购物小程序”,目前项目源码已全部免费开放,希望对有需求的企业和开发者提供一个思路和参考。
直播购物小程序源码github地址:https://github.com/YuTongNetworkTechnology/wechat_live/tree/master 
git打不开可直接点下面链接下载


小程序直播demo_2018-06-21.zip







直播购物小程序运行预览图 
 
小程序体验指南(仅需两步):
 
1、下载微信小程序开发工具,下载地址:https://developers.weixin.qq.c ... .html 
 




2、导入源码:将附件的源码解压直接导入 







环信小程序直播技术文档
一、 使用的技术
1、 环信IM直播室。
2、 微信小程序实时音视频播放组件live-player。
3、 推流软件(obs、易推流)等推流。
4、 视频流服务器(UCLOUD、七牛、腾讯)等视频流服务器。
二、 系统使用流程。
1、 视频推流软件将视频流推到流服务器。
2、 打开视频直播demo小程序注册环信账号。
3、 进入软件直播室进行测试。
三、 技术流程及使用的SDk
1、 注册环信账号
打开https://www.easemob.com/ 环信官网,点击右上角注册按钮,选择[注册即时通讯云]




填写对相关信息进行注册





注册成功后进行登录




注:新注册用户需进行账号的认证。
2、 直播应用创建
登录成功点击应用列表选择创建应用




输入应用名称等信息
 





创建成功后点击应用进入





需要注意的是应用的OrgName 和AppName这两个是以后都需要用到的两个参数变量




3、 直播创建
1)在创建直播之前需要对应用进行设置首先需要设置应用的直播流地址
第一步获取应用管理员的Tokencurl -X POST "https://a1.easemob.com/[应用OrgName]/[应用AppName]/token" -d '{"grant_type":"client_credentials","client_id":"[应用client_id]","client_secret":"[应用] client_secret"}'返回格式{
"access_token":"YWMtWY779DgJEeS2h9OR7fw4QgAAAUmO4Qukwd9cfJSpkWHiOa7MCSk0MrkVIco",
"expires_in":5184000,
"application":"c03b3e30-046a-11e4-8ed1-5701cdaaa0e4"












第二步设置直播流地址curl -X POST -H "Authorization: Bearer [管理员Token]" " https://a1.easemob.com/[应用OrgName]/[应用AppName]/liverooms/stream_url -d '{"pc_pull":"[pc拉流地址]","pc_push":"[pc推流地址]","mobile_pull":"[手机拉流地址]","mobile_push":"[手机推流地址]"}'"成功返回格式:{
"action": "post",
"application": "e1a09de0-0e03-11e7-ad8e-a1d913615409",
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": {
"pc_pull": true,
"mobile_push": true,
"mobile_pull": true,
"pc_push": true
},
"timestamp": 1494084474885,
"duration": 1,
"organization": "easemob-demo",
"applicationName": "chatdemoui"
}












2)创建主播
点击IM用户





点击注册IM用户





填写用户信息





创建用户的过程同样也可以通过REST API形式进行curl -X POST -i " https://a1.easemob.com/[应用OrgName]/[应用AppName]/users" -d '{"username":"[用户名]","password":"[密码]"}'
注:应用必须为开放注册





将注册的用户添加为主播curl -X POST -H "Authorization: [管理员Token]" https://a1.easemob.com/[应用OrgName]/[应用AppName]/super_admin -d'{"superadmin":"[IM用户名]"}'返回结果示例:{
"action": "post",
"application": "4d7e4ba0-dc4a-11e3-90d5-e1ffbaacdaf5",
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": {
"result": "success"
},
"timestamp": 1496236798886,
"duration": 0,
"organization": "easemob-demo",
"applicationName": "chatdemoui"
}












3)创建直播
点击直播





点击新建房间





填写房间信息




创建房间同时也可以使用REST API形式进行详情可以查看http://docs.easemob.com/im/live/server-integration环信官方文档。
4、 小程序demo集成使用
小程序直播购物demo集成官方WebIM SDK详情请查看https://github.com/easemob/webim-weixin-xcx
Demo具体配置如下
打开demo 下sdk配置文件





修改appkey为自己应用的appkey





打开pages/live/index.js修改房间默认拉流地址及直播间房间号





四、 扩展说明
Demo中房间为固定测试房间,实际使用中应获取环信直播的房间信息及房间列表。具体如下:
获取直播间列表:curl -X GET -H "Authorization: Bearer [用户Token]" https://a1.easemob.com/[应用OrgName]/[应用AppName]/liverooms?ongoing=true&limit=[获取数量]&cursor=[游标地址(不填写为充开始查询)]
响应:{
"action": "get",
"application": "4d7e4ba0-dc4a-11e3-90d5-e1ffbaacdaf5",
"params": {
"cursor": [
"ZGNiMjRmNGY1YjczYjlhYTNkYjk1MDY2YmEyNzFmODQ6aW06Y2hhdHJvb206ZWFzZW1vYi1kZW1vI2NoYXRkZW1vdWk6MzE"
],
"ongoing": [
"true"
],
"limit": [
"2"
]
},
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": [
{
"id": "1924",
"chatroom_id": "17177265635330",
"title": "具体了",
"desc": "就咯",
"startTime": 1495779917352,
"endTime": 1495779917352,
"anchor": "wuls",
"gift_count": 0,
"praise_count": 0,
"current_user_count": 8,
"max_user_count": 9,
"status": "ongoing",
"cover_picture_url": "",
"pc_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1",
"pc_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1",
"mobile_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1",
"mobile_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1"
},
{
"id": "1922",
"chatroom_id": "17175003856897",
"title": "香山",
"desc": "随便",
"startTime": 1495777760957,
"endTime": 1495777760957,
"anchor": "sx001",
"gift_count": 0,
"praise_count": 8,
"current_user_count": 1,
"max_user_count": 3,
"status": "ongoing",
"cover_picture_url": "http://127.0.0.1:8080/easemob- ... ot%3B,
"pc_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1",
"pc_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1",
"mobile_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1",
"mobile_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1"
}
],
"timestamp": 1496303336669,
"duration": 0,
"organization": "easemob-demo",
"applicationName": "chatdemoui",
"cursor": "ZGNiMjRmNGY1YjczYjlhYTNkYjk1MDY2YmEyNzFmODQ6aW06Y2hhdHJvb206ZWFzZW1vYi1kZW1vI2NoYXRkZW1vdWk6NDk",
"count": 2
}












获取直播间详情:curl -X GET -H "Authorization: Bearer [用户Token]" " https://a1.easemob.com/[应用OrgName]/[应用AppName]/[房间id]/status"响应:{
"action": "get",
"application": "4d7e4ba0-dc4a-11e3-90d5-e1ffbaacdaf5",
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": {
"liveRoomID": "1946",
"status": "ongoing"
},
"timestamp": 1496234759930,
"duration": 0,
"organization": "easemob-demo",
"applicationName": "chatdemoui",
"count": 0
}














 
使用环信直播购物小程序遇到任何问题欢迎跟帖讨论。 查看全部
今天你看直播了吗?
拥有10亿微信生态用户的小程序已经成为了继移动互联后的又一个现象级风口,随着微信小程序对外开放实时音视频录制及播放等更多连接能力,小程序与直播强强联合,在各行各业找到了非常多的玩法,小程序直播相比微信直播和APP直播更加简洁、流畅、低延时、多入口等众多优势迅速向商业直播领域及泛娱乐直播领域蔓延。从小游戏、内容付费、工具、大数据、社交电商创业者到传统品牌商们,都在努力搭上小程序直播这辆快车,以免错过微信生态里新的流量洼地。
 
微信图片_20180725162426.jpg


作为一名环信生态圈资深开发者,本着对技术的热衷,对环信的眷恋和对党的忠诚,基于环信即时通讯云写了“直播购物小程序”,目前项目源码已全部免费开放,希望对有需求的企业和开发者提供一个思路和参考。
直播购物小程序源码github地址:https://github.com/YuTongNetworkTechnology/wechat_live/tree/master 
git打不开可直接点下面链接下载



预览图.jpg

直播购物小程序运行预览图 
 
小程序体验指南(仅需两步):
 
1、下载微信小程序开发工具,下载地址:https://developers.weixin.qq.c ... .html 
 
Catch9A07(07-20-17-38-30).jpg

2、导入源码:将附件的源码解压直接导入 


Catch1C69(07-20-17-38-30).jpg


环信小程序直播技术文档
一、 使用的技术
1、 环信IM直播室。
2、 微信小程序实时音视频播放组件live-player。
3、 推流软件(obs、易推流)等推流。
4、 视频流服务器(UCLOUD、七牛、腾讯)等视频流服务器。
二、 系统使用流程。
1、 视频推流软件将视频流推到流服务器。
2、 打开视频直播demo小程序注册环信账号。
3、 进入软件直播室进行测试。
三、 技术流程及使用的SDk
1、 注册环信账号
打开https://www.easemob.com/ 环信官网,点击右上角注册按钮,选择[注册即时通讯云]
1.png

填写对相关信息进行注册

2.png

注册成功后进行登录
3.png

注:新注册用户需进行账号的认证。
2、 直播应用创建
登录成功点击应用列表选择创建应用
4.png

输入应用名称等信息
 

5.png

创建成功后点击应用进入

6.png

需要注意的是应用的OrgName 和AppName这两个是以后都需要用到的两个参数变量
7.png

3、 直播创建
1)在创建直播之前需要对应用进行设置首先需要设置应用的直播流地址
第一步获取应用管理员的Token
curl -X POST "https://a1.easemob.com/[应用OrgName]/[应用AppName]/token" -d '{"grant_type":"client_credentials","client_id":"[应用client_id]","client_secret":"[应用] client_secret"}'
返回格式
{
"access_token":"YWMtWY779DgJEeS2h9OR7fw4QgAAAUmO4Qukwd9cfJSpkWHiOa7MCSk0MrkVIco",
"expires_in":5184000,
"application":"c03b3e30-046a-11e4-8ed1-5701cdaaa0e4"












第二步设置直播流地址
curl -X POST -H "Authorization: Bearer [管理员Token]"  " https://a1.easemob.com/[应用OrgName]/[应用AppName]/liverooms/stream_url -d '{"pc_pull":"[pc拉流地址]","pc_push":"[pc推流地址]","mobile_pull":"[手机拉流地址]","mobile_push":"[手机推流地址]"}'"
成功返回格式:
{
"action": "post",
"application": "e1a09de0-0e03-11e7-ad8e-a1d913615409",
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": {
"pc_pull": true,
"mobile_push": true,
"mobile_pull": true,
"pc_push": true
},
"timestamp": 1494084474885,
"duration": 1,
"organization": "easemob-demo",
"applicationName": "chatdemoui"
}












2)创建主播
点击IM用户

8.png

点击注册IM用户

9.png

填写用户信息

10.png

创建用户的过程同样也可以通过REST API形式进行
curl -X POST -i " https://a1.easemob.com/[应用OrgName]/[应用AppName]/users" -d '{"username":"[用户名]","password":"[密码]"}'

注:应用必须为开放注册

11.png

将注册的用户添加为主播
curl -X POST -H "Authorization: [管理员Token]"  https://a1.easemob.com/[应用OrgName]/[应用AppName]/super_admin -d'{"superadmin":"[IM用户名]"}'
返回结果示例:
{
"action": "post",
"application": "4d7e4ba0-dc4a-11e3-90d5-e1ffbaacdaf5",
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": {
"result": "success"
},
"timestamp": 1496236798886,
"duration": 0,
"organization": "easemob-demo",
"applicationName": "chatdemoui"
}












3)创建直播
点击直播

12.png

点击新建房间

13.png

填写房间信息
14.png

创建房间同时也可以使用REST API形式进行详情可以查看http://docs.easemob.com/im/live/server-integration环信官方文档。
4、 小程序demo集成使用
小程序直播购物demo集成官方WebIM SDK详情请查看https://github.com/easemob/webim-weixin-xcx
Demo具体配置如下
打开demo 下sdk配置文件

15.png

修改appkey为自己应用的appkey

16.png

打开pages/live/index.js修改房间默认拉流地址及直播间房间号

17.png

四、 扩展说明
Demo中房间为固定测试房间,实际使用中应获取环信直播的房间信息及房间列表。具体如下:
获取直播间列表:
curl -X GET -H "Authorization: Bearer  [用户Token]"  https://a1.easemob.com/[应用OrgName]/[应用AppName]/liverooms?ongoing=true&limit=[获取数量]&cursor=[游标地址(不填写为充开始查询)]

响应:
{
"action": "get",
"application": "4d7e4ba0-dc4a-11e3-90d5-e1ffbaacdaf5",
"params": {
"cursor": [
"ZGNiMjRmNGY1YjczYjlhYTNkYjk1MDY2YmEyNzFmODQ6aW06Y2hhdHJvb206ZWFzZW1vYi1kZW1vI2NoYXRkZW1vdWk6MzE"
],
"ongoing": [
"true"
],
"limit": [
"2"
]
},
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": [
{
"id": "1924",
"chatroom_id": "17177265635330",
"title": "具体了",
"desc": "就咯",
"startTime": 1495779917352,
"endTime": 1495779917352,
"anchor": "wuls",
"gift_count": 0,
"praise_count": 0,
"current_user_count": 8,
"max_user_count": 9,
"status": "ongoing",
"cover_picture_url": "",
"pc_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1",
"pc_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1",
"mobile_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1",
"mobile_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1"
},
{
"id": "1922",
"chatroom_id": "17175003856897",
"title": "香山",
"desc": "随便",
"startTime": 1495777760957,
"endTime": 1495777760957,
"anchor": "sx001",
"gift_count": 0,
"praise_count": 8,
"current_user_count": 1,
"max_user_count": 3,
"status": "ongoing",
"cover_picture_url": "http://127.0.0.1:8080/easemob- ... ot%3B,
"pc_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1",
"pc_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1",
"mobile_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1",
"mobile_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1"
}
],
"timestamp": 1496303336669,
"duration": 0,
"organization": "easemob-demo",
"applicationName": "chatdemoui",
"cursor": "ZGNiMjRmNGY1YjczYjlhYTNkYjk1MDY2YmEyNzFmODQ6aW06Y2hhdHJvb206ZWFzZW1vYi1kZW1vI2NoYXRkZW1vdWk6NDk",
"count": 2
}












获取直播间详情:
curl -X GET -H "Authorization: Bearer [用户Token]" " https://a1.easemob.com/[应用OrgName]/[应用AppName]/[房间id]/status"
响应:
{
"action": "get",
"application": "4d7e4ba0-dc4a-11e3-90d5-e1ffbaacdaf5",
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": {
"liveRoomID": "1946",
"status": "ongoing"
},
"timestamp": 1496234759930,
"duration": 0,
"organization": "easemob-demo",
"applicationName": "chatdemoui",
"count": 0
}














 
使用环信直播购物小程序遇到任何问题欢迎跟帖讨论。
14
评论

【有问必答】有温度,有态度,有速度的IMGeek社区! 有问必答 问题已解决 最佳回复

beyond 发表了文章 • 6832 次浏览 • 2018-05-24 17:45 • 来自相关话题

5分钟,是一个从提问到解答的总时长,有温度有态度有速度!
-IMGeek社区“鲁迅”




    IMGeek循着极客们开放、分享、协作、创新的精神,努力构建一个具有服务质量保障(Service Level Assurance , SLA)的社区。

   在IMGeek社区里征集到一批热心的技术专家,得到他们的承诺自愿回复IMGeek社区问题。只要你在IMGeek社区发布问题,专家们将会收到消息提醒,并及时回复。 

   当然,如果你在提交一个问题之前,可以先搜索一下,说不定你要提的问题已经有人提过并且得到解答。这样可以省却不少你的时间。 
 
   最后提醒一下提问的小伙伴,如果您的问题被解决,占用您一秒钟时间将回复设置为最佳回复,方便后面遇到相同问题的同学快速找到答案!




  现在,从一个提问开始你的IMGeek社区之旅。 查看全部
5分钟,是一个从提问到解答的总时长,有温度有态度有速度!
-IMGeek社区“鲁迅”




    IMGeek循着极客们开放、分享、协作、创新的精神,努力构建一个具有服务质量保障(Service Level Assurance , SLA)的社区。

   在IMGeek社区里征集到一批热心的技术专家,得到他们的承诺自愿回复IMGeek社区问题。只要你在IMGeek社区发布问题,专家们将会收到消息提醒,并及时回复。 

   当然,如果你在提交一个问题之前,可以先搜索一下,说不定你要提的问题已经有人提过并且得到解答。这样可以省却不少你的时间。 
 
   最后提醒一下提问的小伙伴,如果您的问题被解决,占用您一秒钟时间将回复设置为最佳回复,方便后面遇到相同问题的同学快速找到答案!
TIM截图20180524175557.png

  现在,从一个提问开始你的IMGeek社区之旅。
18
评论

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

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

   这里整理了集成环信的常见问题和一些功能的实现思路,希望能帮助到大家。感谢热心的开发者贡献,大家在观看过程中有不明白的地方欢迎直接跟帖咨询。
 
ios篇
APNs证书创建和上传到环信后台头像昵称的简述和处理方案音视频离线推送Demo实现环信服务器聊天记录保存多久?离线收不到好友请求IOS中环信聊天窗口如何实现文件发送和预览的功能ios集成常见问题环信推送的一些常见问题实现名片|红包|话题聊天室等自定义cell
 
Android篇
Android sdk 的两种导入方式环信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...小伙伴们还有什么想知道欢迎跟帖提出。
 
1
回复

web IM 发送群组附件消息问题 有专职工程师值守 webim 环信_WebIM

回复

轻雪飞天 回复了问题 • 1 人关注 • 104 次浏览 • 2018-08-16 16:34 • 来自相关话题

1
最佳

web IM 发送群组附件消息问题 有专职工程师值守 webim 群组消息 发送附件

回复

轻雪飞天 回复了问题 • 0 人关注 • 149 次浏览 • 2018-08-16 16:33 • 来自相关话题

0
回复

webim申请加入群总提示错误 有专职工程师值守 webim 加群

回复

轻雪飞天 发起了问题 • 1 人关注 • 76 次浏览 • 2018-08-15 16:59 • 来自相关话题

0
回复

webIM 发送视频消息 失败 发送视频消息 webim

回复

轻雪飞天 发起了问题 • 0 人关注 • 107 次浏览 • 2018-08-10 15:56 • 来自相关话题

1
回复

环信im接受图片,图片是什么类型的 webim

KevinGong 回复了问题 • 2 人关注 • 111 次浏览 • 2018-08-03 18:26 • 来自相关话题

1
回复

环信的web端获取用户分组报错type 28到底什么意思?应该怎么解决? webim

回复

鴈濄侕潭卟留影 回复了问题 • 1 人关注 • 183 次浏览 • 2018-07-24 15:47 • 来自相关话题

2
回复

webim onError type=8 webim

睡姿决定发型 回复了问题 • 2 人关注 • 481 次浏览 • 2018-07-21 11:58 • 来自相关话题

0
回复

webIm 创建视频消息报错【已解决】 视频 webim 报错

回复

q310550690 发起了问题 • 1 人关注 • 153 次浏览 • 2018-07-19 14:14 • 来自相关话题

1
回复

WEBIM 单用户多端登录 webim

KevinGong 回复了问题 • 2 人关注 • 672 次浏览 • 2018-05-21 14:13 • 来自相关话题

1
回复

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

veer 回复了问题 • 2 人关注 • 829 次浏览 • 2018-05-04 17:41 • 来自相关话题

0
回复

$msg未定义 webim

回复

问佛西藏 发起了问题 • 1 人关注 • 331 次浏览 • 2018-04-15 12:01 • 来自相关话题

0
回复

vue采用类似官方demo的方式集成,登陆后报错stropheConn.setJid is not a function。 vue webim 环信_WebIM

回复

yyq 发起了问题 • 1 人关注 • 430 次浏览 • 2018-04-10 13:54 • 来自相关话题

1
评论

【环信征文】|PHP WEBIM整合到项目(一条龙服务包括保存聊天记录到本地数据库) thinkphp 自动登陆 好友列表 头像昵称渲染 聊天记录保存 webim

Sro 发表了文章 • 429 次浏览 • 2018-04-09 14:36 • 来自相关话题

   我是用think PHP做的项目,我们的需求是用IM跟他人聊天并且保存聊天记录到本地。我把整个环信文件下载了下来放在了项目的js文件里。并且没有做单独的页面渲染直接用的环信原来的页面,所以大部分功能都写在了控制器里最后跳转到IM的页面。
第一步,IM集成
  这个可以参照文档,但是这个文档好像是过时的,如果集成失败可以上官方登陆页面 http://webim.easemob.com/ 把页面加载的文件抄下来。
第二步,自动登陆和他人聊天
  此步要先把网站上的用户注册一个环信账号,然后自动登陆跳过环信的登陆页面,然后把对方加为好友(此步如果对方没有环信账号也需要把好友注册一个环信账号)。上代码






逻辑是这么实现的,因为在控制器里做的操作,所以登陆信息要保存在cookie里。里面的方法都可以在http://api-docs.easemob.com/%2 ... token这个环信的服务器端集成Swagger文档里找到,然后用Curl调用,或者一个更简单的方法,有一个完整的类可以用,链接在此https://github.com/easemob/emc ... t.php,简单的curl是这么用的






好此步就此完成
第三步,头像、昵称 渲染
   这步我的处理方法是把你网站用户的头像和昵称查出来然后存在cookie里,然后在demojs文件里进行调用,这步主要麻烦的地方是需要在demo.js的文件里找到页面渲染的地方,大约有8个地方(23288,27321,29764,29862,30101,31211,31360,31465)
   这三步完成基本就完成了IM整合进项目了,还有一个保存聊天记录到本地,我没有用官方的接口来下载历史记录,听说下载下来是一个包,而且数据还会有丢失,所以我的做法是每次发送消息调用自己的Ajax来进行保存数据库操作,然后新在打开聊天的时候请求后台获得聊天记录。
  好,我在demojs里找到了2个发送消息时候的方法,一个是发送文字和表情,一个是发送图片。sendText(27399)这个方法是发送文字和表情的






  msg.boy里面可以获得到你需要保存在数据库里的所有信息,chat_time是因为聊天记录的时间格式是2018/4/9 上午9:53:03这种的所以我自己加上去的。
  pictureChange(22977)这个方法是发送图片的,这里的url非常重要,而且在msg.set在外面拿不到所以我放在了方法里面调用的Ajax,这个url 是
https://a1.easemob.com/1110170 ... 79a8b
这样的二进制一会需要下载到本地或者上传到你需要的图片存储空间,我放在了七牛上。






  保存文字信息非常简单,就像下图一样就可以了,下面的做的判断是当消息类型是图片的时候调用一下图片上传方法












  这个图片是图片上传方法,我在后台用CURL进行了上传操作,最开始我先把图片保存在了本地然后再上传,后来我找了二进制可以上传,改成了这个样子。(值得注意的是我用CURL调用的url返回的值会有一个红色的符号,所以我用substr给它截掉了,之前没发现怎么都找不到图片。最后发现是database文件的编码有问题改成utf-8之后截取字符串的那步可以去掉了)这里的接口就是一个普通的上传方法然后返回的是图片名称。这样聊天记录也保存完毕了。
  表结构






  下一步是读取聊天记录releaseChatRecord这个方法是demojs每次你点击聊天窗口都会触发的方法,我把ajax放在这这里。






  图片里的targetId就是你当天聊天的好友id,自己的id怎么得到不需要说了吧,你肯定是在登陆状态才能聊天。Demo.chatRecord这个就是需要替换的聊天记录,Ajax请求后台






  这里注意的是要获得聊天记录需要进行红圈里的判断,来分别你给我发的消息和你给我发的消息,我之前犯得错误没判断最后只获得了我给他人发的消息记录。。。循环里的是构造demojs需要用的json数据。这个对象结构可以在releaseChatRecord方法里console.log()出来然后自己拼装。
  这样已经基本完成了最后上成功后的图片






  还有个问题没处理就是未送达那个文字,因为我构造的数据里没有加上read=true.你可以选择把IM里这个功能关闭或者在数据里加上去。
  这样保存聊天记录的方式是每次发送都进行保存如果人数太多或太频繁可能会出现问题,以后可能会换成调用官网的获得历史记录的接口。
  查看全部
   我是用think PHP做的项目,我们的需求是用IM跟他人聊天并且保存聊天记录到本地。我把整个环信文件下载了下来放在了项目的js文件里。并且没有做单独的页面渲染直接用的环信原来的页面,所以大部分功能都写在了控制器里最后跳转到IM的页面。
第一步,IM集成
  这个可以参照文档,但是这个文档好像是过时的,如果集成失败可以上官方登陆页面 http://webim.easemob.com/ 把页面加载的文件抄下来。
第二步,自动登陆和他人聊天
  此步要先把网站上的用户注册一个环信账号,然后自动登陆跳过环信的登陆页面,然后把对方加为好友(此步如果对方没有环信账号也需要把好友注册一个环信账号)。上代码

微信图片_20180410135435.png


逻辑是这么实现的,因为在控制器里做的操作,所以登陆信息要保存在cookie里。里面的方法都可以在http://api-docs.easemob.com/%2 ... token这个环信的服务器端集成Swagger文档里找到,然后用Curl调用,或者一个更简单的方法,有一个完整的类可以用,链接在此https://github.com/easemob/emc ... t.php,简单的curl是这么用的

微信图片_20180409114955.png


好此步就此完成
第三步,头像、昵称 渲染
   这步我的处理方法是把你网站用户的头像和昵称查出来然后存在cookie里,然后在demojs文件里进行调用,这步主要麻烦的地方是需要在demo.js的文件里找到页面渲染的地方,大约有8个地方(23288,27321,29764,29862,30101,31211,31360,31465)
   这三步完成基本就完成了IM整合进项目了,还有一个保存聊天记录到本地,我没有用官方的接口来下载历史记录,听说下载下来是一个包,而且数据还会有丢失,所以我的做法是每次发送消息调用自己的Ajax来进行保存数据库操作,然后新在打开聊天的时候请求后台获得聊天记录。
  好,我在demojs里找到了2个发送消息时候的方法,一个是发送文字和表情,一个是发送图片。sendText(27399)这个方法是发送文字和表情的

微信图片_20180409135255.png


  msg.boy里面可以获得到你需要保存在数据库里的所有信息,chat_time是因为聊天记录的时间格式是2018/4/9 上午9:53:03这种的所以我自己加上去的。
  pictureChange(22977)这个方法是发送图片的,这里的url非常重要,而且在msg.set在外面拿不到所以我放在了方法里面调用的Ajax,这个url 是
https://a1.easemob.com/1110170 ... 79a8b
这样的二进制一会需要下载到本地或者上传到你需要的图片存储空间,我放在了七牛上。

微信图片_20180409135626.png


  保存文字信息非常简单,就像下图一样就可以了,下面的做的判断是当消息类型是图片的时候调用一下图片上传方法

微信图片_20180409140143.png



微信图片_20180410135615.png


  这个图片是图片上传方法,我在后台用CURL进行了上传操作,最开始我先把图片保存在了本地然后再上传,后来我找了二进制可以上传,改成了这个样子。(值得注意的是我用CURL调用的url返回的值会有一个红色的符号,所以我用substr给它截掉了,之前没发现怎么都找不到图片。最后发现是database文件的编码有问题改成utf-8之后截取字符串的那步可以去掉了)这里的接口就是一个普通的上传方法然后返回的是图片名称。这样聊天记录也保存完毕了。
  表结构

微信图片_20180409142529.png


  下一步是读取聊天记录releaseChatRecord这个方法是demojs每次你点击聊天窗口都会触发的方法,我把ajax放在这这里。

微信图片_20180409141116.png


  图片里的targetId就是你当天聊天的好友id,自己的id怎么得到不需要说了吧,你肯定是在登陆状态才能聊天。Demo.chatRecord这个就是需要替换的聊天记录,Ajax请求后台

微信图片_20180409141344.png


  这里注意的是要获得聊天记录需要进行红圈里的判断,来分别你给我发的消息和你给我发的消息,我之前犯得错误没判断最后只获得了我给他人发的消息记录。。。循环里的是构造demojs需要用的json数据。这个对象结构可以在releaseChatRecord方法里console.log()出来然后自己拼装。
  这样已经基本完成了最后上成功后的图片

微信图片_20180409142025.png


  还有个问题没处理就是未送达那个文字,因为我构造的数据里没有加上read=true.你可以选择把IM里这个功能关闭或者在数据里加上去。
  这样保存聊天记录的方式是每次发送都进行保存如果人数太多或太频繁可能会出现问题,以后可能会换成调用官网的获得历史记录的接口。
 
0
回复

webim 消息回调 消息时间 webim

回复

q826qq1878 发起了问题 • 1 人关注 • 389 次浏览 • 2018-03-30 14:17 • 来自相关话题

0
回复

web im页面怎么写环信的登录的监听事件,求大神指点 webim

回复

仙人掌 发起了问题 • 1 人关注 • 912 次浏览 • 2018-01-16 11:16 • 来自相关话题

0
回复

chrome 连接webim 连接不上 webim

回复

zengwj 发起了问题 • 1 人关注 • 794 次浏览 • 2017-12-05 15:17 • 来自相关话题

3
评论

基于layim+环信webim的网页即时聊天 LITE-IM LITE_IM webim layim 即时通信 网页聊天

回眸淡然笑 发表了文章 • 1948 次浏览 • 2017-12-03 00:55 • 来自相关话题

什么是LITE-IM?LITE-IM是一款基于 环信webim3.X 和 layim 开发而成的WEB即时通讯,并且完全的免费和开源 。LITE-IM使用 拥有高并发,长连接永不掉线的即时通讯的行业领头羊环信作为通信介质,再搭配上拥有丰富前端交互的layim,让你能够快速的搭建一个现代化的、高度稳定的web即时通讯。

LITE-IM不仅能够担当客户服务来使用,还可以用作你网站粘连客户、活跃社区的媒介,提升用户的使用率。当然LITE-IM还有许多有待完善之处。
 
目前已完成的功能有:
好友/群内的文字、表情、图片、文件 在线/离线消息发送和接收。查看群员列表。 面板内快速查找。 面板右键自定义事件 修改签名 自定义上传背景皮肤 搜索好友/群 添加好友/群 新建群 消息盒子展示查看/修改个人信息实时获取好友在线状态挤下线提醒增删改 好友/好友分组群管理(增删管理员/修改群名片/单个群员禁言解除禁言/踢人)

部分截图如下
 
好友聊天界面

自定义上传皮肤

群组

自定义右键

消息盒子

好友

 
 LITE-IM在线体验地址:test.guoshanchina.com

体验帐号:
用户名:911088 密码:123456

用户名:1570855 密码:123456

用户名:1570845 密码:123456

用户名:911058 密码:123456

用户名:910992 密码:123456

用户名:911067 密码:123456

用户名:911100 密码:123456

用户名:911085 密码:123456

 github源码:https://github.com/shmilylbelva/webim 查看全部
什么是LITE-IM?
LITE-IM是一款基于 环信webim3.X 和 layim 开发而成的WEB即时通讯,并且完全的免费和开源 。LITE-IM使用 拥有高并发,长连接永不掉线的即时通讯的行业领头羊环信作为通信介质,再搭配上拥有丰富前端交互的layim,让你能够快速的搭建一个现代化的、高度稳定的web即时通讯。

LITE-IM不仅能够担当客户服务来使用,还可以用作你网站粘连客户、活跃社区的媒介,提升用户的使用率。当然LITE-IM还有许多有待完善之处。

 
目前已完成的功能有:

  1. 好友/群内的文字、表情、图片、文件 在线/离线消息发送和接收。
  2. 查看群员列表。 
  3. 面板内快速查找。 
  4. 面板右键自定义事件 
  5. 修改签名 
  6. 自定义上传背景皮肤 
  7. 搜索好友/群 
  8. 添加好友/群 
  9. 新建群 
  10. 消息盒子展示
  11. 查看/修改个人信息
  12. 实时获取好友在线状态
  13. 挤下线提醒
  14. 增删改 好友/好友分组
  15. 群管理(增删管理员/修改群名片/单个群员禁言解除禁言/踢人)



部分截图如下
 
好友聊天界面


自定义上传皮肤


群组


自定义右键


消息盒子


好友


 
 LITE-IM在线体验地址:test.guoshanchina.com

体验帐号:

用户名:911088 密码:123456

用户名:1570855 密码:123456

用户名:1570845 密码:123456

用户名:911058 密码:123456

用户名:910992 密码:123456

用户名:911067 密码:123456

用户名:911100 密码:123456

用户名:911085 密码:123456



 github源码:https://github.com/shmilylbelva/webim
3
评论

基于环信webIM提供的Demo改造 webim 自动登录 聊天记录 头像 昵称 显示

__kaven™、 发表了文章 • 952 次浏览 • 2017-11-17 14:44 • 来自相关话题

本效果图是基于webIM的demo版本修改,主要实现了以下功能
1.实现自动登录,到聊天窗口
    解决办法:是在页面自己写参数调用 Demo.conn.open(options) 方法

2.实现最近联系人列表渲染(因为我们没有好友概念,只要跟谁最近聊天了,就算是好友了)
    解决办法:在页面通过ajax调用后台restFul地址获取联系人,然后循环调用 Demo.conn.onTextMessage(msg)方法,将消息内容为空,在msg里面设置标识为初始化加载,这样就会出现在列表里面

3.实现联系人:头像、昵称 渲染
   解决办法:很简单就是在刚才上面的方法体里面调用完之后,你的列表就会出现好友列表,这时候你只需要根据环信用户id,直接基于jq替换即可

4.实现点击联系人 渲染历史聊天记录(在发送消息的时候将聊天记录保存在我们自己的数据库)
   解决办法:在你获取最近联系人这个方法时已经返回了聊天记录列表,你需要在(Demo.chatRecord.环信用户id.messages)这个数组里面把你的消息放在这个数据里面去,然后当用户点击联系人列表时你jq写一个(webim-contact-item)这个样式的click触发方法,在这个方法中你需要写把聊天记录从(Demo.chatRecord.环信用户id.messages) 循环取出来,包装成HTML然后在  $("#wrapper"+Demo.selected).append() 这些HTML即可

5.实现保存聊天
    解决办法:就是在 sendTxt里面调用我们的ajax方法保存
大致就这么多,个人不建议基于官方的webIM的Demo 去修改,这次踩过这个坑了

欢迎各位 集成的朋友来访,目前我这个算是解决,等过段时间我还是自己写一个吧,不打算基于他们的Demo去改造
在此欢迎去我的博客:   www.kaven.cn 查看全部
本效果图是基于webIM的demo版本修改,主要实现了以下功能
1.实现自动登录,到聊天窗口
    解决办法:是在页面自己写参数调用 Demo.conn.open(options) 方法

2.实现最近联系人列表渲染(因为我们没有好友概念,只要跟谁最近聊天了,就算是好友了)
    解决办法:在页面通过ajax调用后台restFul地址获取联系人,然后循环调用 Demo.conn.onTextMessage(msg)方法,将消息内容为空,在msg里面设置标识为初始化加载,这样就会出现在列表里面

3.实现联系人:头像、昵称 渲染
   解决办法:很简单就是在刚才上面的方法体里面调用完之后,你的列表就会出现好友列表,这时候你只需要根据环信用户id,直接基于jq替换即可

4.实现点击联系人 渲染历史聊天记录(在发送消息的时候将聊天记录保存在我们自己的数据库)
   解决办法:在你获取最近联系人这个方法时已经返回了聊天记录列表,你需要在(Demo.chatRecord.环信用户id.messages)这个数组里面把你的消息放在这个数据里面去,然后当用户点击联系人列表时你jq写一个(webim-contact-item)这个样式的click触发方法,在这个方法中你需要写把聊天记录从(Demo.chatRecord.环信用户id.messages) 循环取出来,包装成HTML然后在  $("#wrapper"+Demo.selected).append() 这些HTML即可

5.实现保存聊天
    解决办法:就是在 sendTxt里面调用我们的ajax方法保存
大致就这么多,个人不建议基于官方的webIM的Demo 去修改,这次踩过这个坑了

欢迎各位 集成的朋友来访,目前我这个算是解决,等过段时间我还是自己写一个吧,不打算基于他们的Demo去改造
在此欢迎去我的博客:   www.kaven.cn
0
回复

webIM 连接 webim

回复

空白 也只是昨天的记忆 发起了问题 • 1 人关注 • 557 次浏览 • 2017-11-14 17:23 • 来自相关话题

31
评论

Vue-cli整合环信WebIM vuejs vue webim

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

[b]非常抱歉以前写的文章给各位带来了麻烦,今天突然看到imgeek推送的邮件才记起这个[/b]其实很简单的,以前是我弄复杂了
 
1. 在index.html页面引入js文件

<script type='text/javascript' src='static/webim/webim.config.js'></script>

<script type='text/javascript' src='static/webim/strophe-1.2.8.js'></script>


2. 在main.js 赋值 ,  如下图




 
代码如下
let WebIM = require('easemob-websdk')
Vue.prototype.$webim = WebIM
WebIM.config = {
xmppURL: 'im-api.easemob.com',
apiURL: (location.protocol === 'https:' ? 'https:' : 'http:') + '//a1.easemob.com',
appkey: '你的环信appkey',
https: false,
isMultiLoginSessions: true,
isAutoLogin: true,
isWindowSDK: false,
isSandBox: false,
isDebug: false,
autoReconnectNumMax: 2,
autoReconnectInterval: 2,
isWebRTC: (/Firefox/.test(navigator.userAgent) || /WebKit/.test(navigator.userAgent)) && /^https\:$/.test(window.location.protocol),
heartBeatWait: 4500,
isHttpDNS: false,
msgStatus: true,
delivery: true,
read: true,
saveLocal: false,
encrypt: {
type: 'none'
}
}
// 创建连接
const conn = new WebIM.connection({
isMultiLoginSessions: WebIM.config.isMultiLoginSessions,
https: typeof WebIM.config.https === 'boolean' ? WebIM.config.https : location.protocol === 'https:',
url: WebIM.config.xmppURL,
heartBeatWait: WebIM.config.heartBeatWait,
autoReconnectNumMax: WebIM.config.autoReconnectNumMax,
autoReconnectInterval: WebIM.config.autoReconnectInterval,
apiUrl: WebIM.config.apiURL,
isAutoLogin: true
})
// 添加成功的回调
conn.listen({
onOpened: function (message) {
console.log('连接打开=>', message)
},
onClosed: function (message) {
console.log('连接关闭=>', message)
},
onTextMessage: function (message) {
console.log('收到文本信息message=>', message)
}
})
const options = {
apiUrl: WebIM.config.apiURL,
user: null,
pwd: null,
appKey: WebIM.config.appkey
}
Vue.prototype.$imconn = conn
Vue.prototype.$imoption = options


3.  在页面调用全局的赋值即可
 this.$imconn.open(this.$imoption) 
 
 
 
 
 
 
 
 
 
 
  查看全部
[b]非常抱歉以前写的文章给各位带来了麻烦,今天突然看到imgeek推送的邮件才记起这个[/b]
其实很简单的,以前是我弄复杂了
 
1. 在index.html页面引入js文件

<script type='text/javascript' src='static/webim/webim.config.js'></script>

<script type='text/javascript' src='static/webim/strophe-1.2.8.js'></script>


2. 在main.js 赋值 ,  如下图
QQ图片20180206105624.png

 
代码如下
let WebIM = require('easemob-websdk')
Vue.prototype.$webim = WebIM
WebIM.config = {
xmppURL: 'im-api.easemob.com',
apiURL: (location.protocol === 'https:' ? 'https:' : 'http:') + '//a1.easemob.com',
appkey: '你的环信appkey',
https: false,
isMultiLoginSessions: true,
isAutoLogin: true,
isWindowSDK: false,
isSandBox: false,
isDebug: false,
autoReconnectNumMax: 2,
autoReconnectInterval: 2,
isWebRTC: (/Firefox/.test(navigator.userAgent) || /WebKit/.test(navigator.userAgent)) && /^https\:$/.test(window.location.protocol),
heartBeatWait: 4500,
isHttpDNS: false,
msgStatus: true,
delivery: true,
read: true,
saveLocal: false,
encrypt: {
type: 'none'
}
}
// 创建连接
const conn = new WebIM.connection({
isMultiLoginSessions: WebIM.config.isMultiLoginSessions,
https: typeof WebIM.config.https === 'boolean' ? WebIM.config.https : location.protocol === 'https:',
url: WebIM.config.xmppURL,
heartBeatWait: WebIM.config.heartBeatWait,
autoReconnectNumMax: WebIM.config.autoReconnectNumMax,
autoReconnectInterval: WebIM.config.autoReconnectInterval,
apiUrl: WebIM.config.apiURL,
isAutoLogin: true
})
// 添加成功的回调
conn.listen({
onOpened: function (message) {
console.log('连接打开=>', message)
},
onClosed: function (message) {
console.log('连接关闭=>', message)
},
onTextMessage: function (message) {
console.log('收到文本信息message=>', message)
}
})
const options = {
apiUrl: WebIM.config.apiURL,
user: null,
pwd: null,
appKey: WebIM.config.appkey
}
Vue.prototype.$imconn = conn
Vue.prototype.$imoption = options



3.  在页面调用全局的赋值即可
 
this.$imconn.open(this.$imoption)
 
 
 
 
 
 
 
 
 
 
 
 
6
评论

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

产品更新 发表了文章 • 686 次浏览 • 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 人关注 • 679 次浏览 • 2017-08-25 11:25 • 来自相关话题

0
回复

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

回复

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

4
回复

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

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

0
回复

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

回复

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

条新动态, 点击查看
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接口集成
轻雪飞天

轻雪飞天 回答了问题 • 2018-08-16 16:32 • 1 个回复 不感兴趣

web IM 发送群组附件消息问题

赞同来自:

最近几次可以发送了,
发送格式更改如下
this.name 是发送对象的名字。
群聊和聊天室都是发id的
9020
 
最近几次可以发送了,
发送格式更改如下
this.name 是发送对象的名字。
群聊和聊天室都是发id的
9020
 
3
评论

【开源项目】全国首个开源直播小程序源码 环信公开课 小程序 直播

beyond 发表了文章 • 645 次浏览 • 2018-07-20 17:30 • 来自相关话题

今天你看直播了吗?拥有10亿微信生态用户的小程序已经成为了继移动互联后的又一个现象级风口,随着微信小程序对外开放实时音视频录制及播放等更多连接能力,小程序与直播强强联合,在各行各业找到了非常多的玩法,小程序直播相比微信直播和APP直播更加简洁、流畅、低延时、多入口等众多优势迅速向商业直播领域及泛娱乐直播领域蔓延。从小游戏、内容付费、工具、大数据、社交电商创业者到传统品牌商们,都在努力搭上小程序直播这辆快车,以免错过微信生态里新的流量洼地。
 





作为一名环信生态圈资深开发者,本着对技术的热衷,对环信的眷恋和对党的忠诚,基于环信即时通讯云写了“直播购物小程序”,目前项目源码已全部免费开放,希望对有需求的企业和开发者提供一个思路和参考。
直播购物小程序源码github地址:https://github.com/YuTongNetworkTechnology/wechat_live/tree/master 
git打不开可直接点下面链接下载


小程序直播demo_2018-06-21.zip







直播购物小程序运行预览图 
 
小程序体验指南(仅需两步):
 
1、下载微信小程序开发工具,下载地址:https://developers.weixin.qq.c ... .html 
 




2、导入源码:将附件的源码解压直接导入 







环信小程序直播技术文档
一、 使用的技术
1、 环信IM直播室。
2、 微信小程序实时音视频播放组件live-player。
3、 推流软件(obs、易推流)等推流。
4、 视频流服务器(UCLOUD、七牛、腾讯)等视频流服务器。
二、 系统使用流程。
1、 视频推流软件将视频流推到流服务器。
2、 打开视频直播demo小程序注册环信账号。
3、 进入软件直播室进行测试。
三、 技术流程及使用的SDk
1、 注册环信账号
打开https://www.easemob.com/ 环信官网,点击右上角注册按钮,选择[注册即时通讯云]




填写对相关信息进行注册





注册成功后进行登录




注:新注册用户需进行账号的认证。
2、 直播应用创建
登录成功点击应用列表选择创建应用




输入应用名称等信息
 





创建成功后点击应用进入





需要注意的是应用的OrgName 和AppName这两个是以后都需要用到的两个参数变量




3、 直播创建
1)在创建直播之前需要对应用进行设置首先需要设置应用的直播流地址
第一步获取应用管理员的Tokencurl -X POST "https://a1.easemob.com/[应用OrgName]/[应用AppName]/token" -d '{"grant_type":"client_credentials","client_id":"[应用client_id]","client_secret":"[应用] client_secret"}'返回格式{
"access_token":"YWMtWY779DgJEeS2h9OR7fw4QgAAAUmO4Qukwd9cfJSpkWHiOa7MCSk0MrkVIco",
"expires_in":5184000,
"application":"c03b3e30-046a-11e4-8ed1-5701cdaaa0e4"












第二步设置直播流地址curl -X POST -H "Authorization: Bearer [管理员Token]" " https://a1.easemob.com/[应用OrgName]/[应用AppName]/liverooms/stream_url -d '{"pc_pull":"[pc拉流地址]","pc_push":"[pc推流地址]","mobile_pull":"[手机拉流地址]","mobile_push":"[手机推流地址]"}'"成功返回格式:{
"action": "post",
"application": "e1a09de0-0e03-11e7-ad8e-a1d913615409",
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": {
"pc_pull": true,
"mobile_push": true,
"mobile_pull": true,
"pc_push": true
},
"timestamp": 1494084474885,
"duration": 1,
"organization": "easemob-demo",
"applicationName": "chatdemoui"
}












2)创建主播
点击IM用户





点击注册IM用户





填写用户信息





创建用户的过程同样也可以通过REST API形式进行curl -X POST -i " https://a1.easemob.com/[应用OrgName]/[应用AppName]/users" -d '{"username":"[用户名]","password":"[密码]"}'
注:应用必须为开放注册





将注册的用户添加为主播curl -X POST -H "Authorization: [管理员Token]" https://a1.easemob.com/[应用OrgName]/[应用AppName]/super_admin -d'{"superadmin":"[IM用户名]"}'返回结果示例:{
"action": "post",
"application": "4d7e4ba0-dc4a-11e3-90d5-e1ffbaacdaf5",
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": {
"result": "success"
},
"timestamp": 1496236798886,
"duration": 0,
"organization": "easemob-demo",
"applicationName": "chatdemoui"
}












3)创建直播
点击直播





点击新建房间





填写房间信息




创建房间同时也可以使用REST API形式进行详情可以查看http://docs.easemob.com/im/live/server-integration环信官方文档。
4、 小程序demo集成使用
小程序直播购物demo集成官方WebIM SDK详情请查看https://github.com/easemob/webim-weixin-xcx
Demo具体配置如下
打开demo 下sdk配置文件





修改appkey为自己应用的appkey





打开pages/live/index.js修改房间默认拉流地址及直播间房间号





四、 扩展说明
Demo中房间为固定测试房间,实际使用中应获取环信直播的房间信息及房间列表。具体如下:
获取直播间列表:curl -X GET -H "Authorization: Bearer [用户Token]" https://a1.easemob.com/[应用OrgName]/[应用AppName]/liverooms?ongoing=true&limit=[获取数量]&cursor=[游标地址(不填写为充开始查询)]
响应:{
"action": "get",
"application": "4d7e4ba0-dc4a-11e3-90d5-e1ffbaacdaf5",
"params": {
"cursor": [
"ZGNiMjRmNGY1YjczYjlhYTNkYjk1MDY2YmEyNzFmODQ6aW06Y2hhdHJvb206ZWFzZW1vYi1kZW1vI2NoYXRkZW1vdWk6MzE"
],
"ongoing": [
"true"
],
"limit": [
"2"
]
},
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": [
{
"id": "1924",
"chatroom_id": "17177265635330",
"title": "具体了",
"desc": "就咯",
"startTime": 1495779917352,
"endTime": 1495779917352,
"anchor": "wuls",
"gift_count": 0,
"praise_count": 0,
"current_user_count": 8,
"max_user_count": 9,
"status": "ongoing",
"cover_picture_url": "",
"pc_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1",
"pc_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1",
"mobile_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1",
"mobile_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1"
},
{
"id": "1922",
"chatroom_id": "17175003856897",
"title": "香山",
"desc": "随便",
"startTime": 1495777760957,
"endTime": 1495777760957,
"anchor": "sx001",
"gift_count": 0,
"praise_count": 8,
"current_user_count": 1,
"max_user_count": 3,
"status": "ongoing",
"cover_picture_url": "http://127.0.0.1:8080/easemob- ... ot%3B,
"pc_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1",
"pc_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1",
"mobile_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1",
"mobile_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1"
}
],
"timestamp": 1496303336669,
"duration": 0,
"organization": "easemob-demo",
"applicationName": "chatdemoui",
"cursor": "ZGNiMjRmNGY1YjczYjlhYTNkYjk1MDY2YmEyNzFmODQ6aW06Y2hhdHJvb206ZWFzZW1vYi1kZW1vI2NoYXRkZW1vdWk6NDk",
"count": 2
}












获取直播间详情:curl -X GET -H "Authorization: Bearer [用户Token]" " https://a1.easemob.com/[应用OrgName]/[应用AppName]/[房间id]/status"响应:{
"action": "get",
"application": "4d7e4ba0-dc4a-11e3-90d5-e1ffbaacdaf5",
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": {
"liveRoomID": "1946",
"status": "ongoing"
},
"timestamp": 1496234759930,
"duration": 0,
"organization": "easemob-demo",
"applicationName": "chatdemoui",
"count": 0
}














 
使用环信直播购物小程序遇到任何问题欢迎跟帖讨论。 查看全部
今天你看直播了吗?
拥有10亿微信生态用户的小程序已经成为了继移动互联后的又一个现象级风口,随着微信小程序对外开放实时音视频录制及播放等更多连接能力,小程序与直播强强联合,在各行各业找到了非常多的玩法,小程序直播相比微信直播和APP直播更加简洁、流畅、低延时、多入口等众多优势迅速向商业直播领域及泛娱乐直播领域蔓延。从小游戏、内容付费、工具、大数据、社交电商创业者到传统品牌商们,都在努力搭上小程序直播这辆快车,以免错过微信生态里新的流量洼地。
 
微信图片_20180725162426.jpg


作为一名环信生态圈资深开发者,本着对技术的热衷,对环信的眷恋和对党的忠诚,基于环信即时通讯云写了“直播购物小程序”,目前项目源码已全部免费开放,希望对有需求的企业和开发者提供一个思路和参考。
直播购物小程序源码github地址:https://github.com/YuTongNetworkTechnology/wechat_live/tree/master 
git打不开可直接点下面链接下载



预览图.jpg

直播购物小程序运行预览图 
 
小程序体验指南(仅需两步):
 
1、下载微信小程序开发工具,下载地址:https://developers.weixin.qq.c ... .html 
 
Catch9A07(07-20-17-38-30).jpg

2、导入源码:将附件的源码解压直接导入 


Catch1C69(07-20-17-38-30).jpg


环信小程序直播技术文档
一、 使用的技术
1、 环信IM直播室。
2、 微信小程序实时音视频播放组件live-player。
3、 推流软件(obs、易推流)等推流。
4、 视频流服务器(UCLOUD、七牛、腾讯)等视频流服务器。
二、 系统使用流程。
1、 视频推流软件将视频流推到流服务器。
2、 打开视频直播demo小程序注册环信账号。
3、 进入软件直播室进行测试。
三、 技术流程及使用的SDk
1、 注册环信账号
打开https://www.easemob.com/ 环信官网,点击右上角注册按钮,选择[注册即时通讯云]
1.png

填写对相关信息进行注册

2.png

注册成功后进行登录
3.png

注:新注册用户需进行账号的认证。
2、 直播应用创建
登录成功点击应用列表选择创建应用
4.png

输入应用名称等信息
 

5.png

创建成功后点击应用进入

6.png

需要注意的是应用的OrgName 和AppName这两个是以后都需要用到的两个参数变量
7.png

3、 直播创建
1)在创建直播之前需要对应用进行设置首先需要设置应用的直播流地址
第一步获取应用管理员的Token
curl -X POST "https://a1.easemob.com/[应用OrgName]/[应用AppName]/token" -d '{"grant_type":"client_credentials","client_id":"[应用client_id]","client_secret":"[应用] client_secret"}'
返回格式
{
"access_token":"YWMtWY779DgJEeS2h9OR7fw4QgAAAUmO4Qukwd9cfJSpkWHiOa7MCSk0MrkVIco",
"expires_in":5184000,
"application":"c03b3e30-046a-11e4-8ed1-5701cdaaa0e4"












第二步设置直播流地址
curl -X POST -H "Authorization: Bearer [管理员Token]"  " https://a1.easemob.com/[应用OrgName]/[应用AppName]/liverooms/stream_url -d '{"pc_pull":"[pc拉流地址]","pc_push":"[pc推流地址]","mobile_pull":"[手机拉流地址]","mobile_push":"[手机推流地址]"}'"
成功返回格式:
{
"action": "post",
"application": "e1a09de0-0e03-11e7-ad8e-a1d913615409",
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": {
"pc_pull": true,
"mobile_push": true,
"mobile_pull": true,
"pc_push": true
},
"timestamp": 1494084474885,
"duration": 1,
"organization": "easemob-demo",
"applicationName": "chatdemoui"
}












2)创建主播
点击IM用户

8.png

点击注册IM用户

9.png

填写用户信息

10.png

创建用户的过程同样也可以通过REST API形式进行
curl -X POST -i " https://a1.easemob.com/[应用OrgName]/[应用AppName]/users" -d '{"username":"[用户名]","password":"[密码]"}'

注:应用必须为开放注册

11.png

将注册的用户添加为主播
curl -X POST -H "Authorization: [管理员Token]"  https://a1.easemob.com/[应用OrgName]/[应用AppName]/super_admin -d'{"superadmin":"[IM用户名]"}'
返回结果示例:
{
"action": "post",
"application": "4d7e4ba0-dc4a-11e3-90d5-e1ffbaacdaf5",
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": {
"result": "success"
},
"timestamp": 1496236798886,
"duration": 0,
"organization": "easemob-demo",
"applicationName": "chatdemoui"
}












3)创建直播
点击直播

12.png

点击新建房间

13.png

填写房间信息
14.png

创建房间同时也可以使用REST API形式进行详情可以查看http://docs.easemob.com/im/live/server-integration环信官方文档。
4、 小程序demo集成使用
小程序直播购物demo集成官方WebIM SDK详情请查看https://github.com/easemob/webim-weixin-xcx
Demo具体配置如下
打开demo 下sdk配置文件

15.png

修改appkey为自己应用的appkey

16.png

打开pages/live/index.js修改房间默认拉流地址及直播间房间号

17.png

四、 扩展说明
Demo中房间为固定测试房间,实际使用中应获取环信直播的房间信息及房间列表。具体如下:
获取直播间列表:
curl -X GET -H "Authorization: Bearer  [用户Token]"  https://a1.easemob.com/[应用OrgName]/[应用AppName]/liverooms?ongoing=true&limit=[获取数量]&cursor=[游标地址(不填写为充开始查询)]

响应:
{
"action": "get",
"application": "4d7e4ba0-dc4a-11e3-90d5-e1ffbaacdaf5",
"params": {
"cursor": [
"ZGNiMjRmNGY1YjczYjlhYTNkYjk1MDY2YmEyNzFmODQ6aW06Y2hhdHJvb206ZWFzZW1vYi1kZW1vI2NoYXRkZW1vdWk6MzE"
],
"ongoing": [
"true"
],
"limit": [
"2"
]
},
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": [
{
"id": "1924",
"chatroom_id": "17177265635330",
"title": "具体了",
"desc": "就咯",
"startTime": 1495779917352,
"endTime": 1495779917352,
"anchor": "wuls",
"gift_count": 0,
"praise_count": 0,
"current_user_count": 8,
"max_user_count": 9,
"status": "ongoing",
"cover_picture_url": "",
"pc_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1",
"pc_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1",
"mobile_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1",
"mobile_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1"
},
{
"id": "1922",
"chatroom_id": "17175003856897",
"title": "香山",
"desc": "随便",
"startTime": 1495777760957,
"endTime": 1495777760957,
"anchor": "sx001",
"gift_count": 0,
"praise_count": 8,
"current_user_count": 1,
"max_user_count": 3,
"status": "ongoing",
"cover_picture_url": "http://127.0.0.1:8080/easemob- ... ot%3B,
"pc_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1",
"pc_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1",
"mobile_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1",
"mobile_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1"
}
],
"timestamp": 1496303336669,
"duration": 0,
"organization": "easemob-demo",
"applicationName": "chatdemoui",
"cursor": "ZGNiMjRmNGY1YjczYjlhYTNkYjk1MDY2YmEyNzFmODQ6aW06Y2hhdHJvb206ZWFzZW1vYi1kZW1vI2NoYXRkZW1vdWk6NDk",
"count": 2
}












获取直播间详情:
curl -X GET -H "Authorization: Bearer [用户Token]" " https://a1.easemob.com/[应用OrgName]/[应用AppName]/[房间id]/status"
响应:
{
"action": "get",
"application": "4d7e4ba0-dc4a-11e3-90d5-e1ffbaacdaf5",
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": {
"liveRoomID": "1946",
"status": "ongoing"
},
"timestamp": 1496234759930,
"duration": 0,
"organization": "easemob-demo",
"applicationName": "chatdemoui",
"count": 0
}














 
使用环信直播购物小程序遇到任何问题欢迎跟帖讨论。
14
评论

【有问必答】有温度,有态度,有速度的IMGeek社区! 有问必答 问题已解决 最佳回复

beyond 发表了文章 • 6832 次浏览 • 2018-05-24 17:45 • 来自相关话题

5分钟,是一个从提问到解答的总时长,有温度有态度有速度!
-IMGeek社区“鲁迅”




    IMGeek循着极客们开放、分享、协作、创新的精神,努力构建一个具有服务质量保障(Service Level Assurance , SLA)的社区。

   在IMGeek社区里征集到一批热心的技术专家,得到他们的承诺自愿回复IMGeek社区问题。只要你在IMGeek社区发布问题,专家们将会收到消息提醒,并及时回复。 

   当然,如果你在提交一个问题之前,可以先搜索一下,说不定你要提的问题已经有人提过并且得到解答。这样可以省却不少你的时间。 
 
   最后提醒一下提问的小伙伴,如果您的问题被解决,占用您一秒钟时间将回复设置为最佳回复,方便后面遇到相同问题的同学快速找到答案!




  现在,从一个提问开始你的IMGeek社区之旅。 查看全部
5分钟,是一个从提问到解答的总时长,有温度有态度有速度!
-IMGeek社区“鲁迅”




    IMGeek循着极客们开放、分享、协作、创新的精神,努力构建一个具有服务质量保障(Service Level Assurance , SLA)的社区。

   在IMGeek社区里征集到一批热心的技术专家,得到他们的承诺自愿回复IMGeek社区问题。只要你在IMGeek社区发布问题,专家们将会收到消息提醒,并及时回复。 

   当然,如果你在提交一个问题之前,可以先搜索一下,说不定你要提的问题已经有人提过并且得到解答。这样可以省却不少你的时间。 
 
   最后提醒一下提问的小伙伴,如果您的问题被解决,占用您一秒钟时间将回复设置为最佳回复,方便后面遇到相同问题的同学快速找到答案!
TIM截图20180524175557.png

  现在,从一个提问开始你的IMGeek社区之旅。
18
评论

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

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

   这里整理了集成环信的常见问题和一些功能的实现思路,希望能帮助到大家。感谢热心的开发者贡献,大家在观看过程中有不明白的地方欢迎直接跟帖咨询。
 
ios篇
APNs证书创建和上传到环信后台头像昵称的简述和处理方案音视频离线推送Demo实现环信服务器聊天记录保存多久?离线收不到好友请求IOS中环信聊天窗口如何实现文件发送和预览的功能ios集成常见问题环信推送的一些常见问题实现名片|红包|话题聊天室等自定义cell
 
Android篇
Android sdk 的两种导入方式环信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...小伙伴们还有什么想知道欢迎跟帖提出。
 
9
回复

收集基于环信SDK开发的开源项目 开源项目

xiaoyan2015 回复了问题 • 12 人关注 • 9292 次浏览 • 2018-08-18 10:42 • 来自相关话题

9
回复

收集基于环信SDK开发的开源项目 开源项目

回复

xiaoyan2015 回复了问题 • 12 人关注 • 9292 次浏览 • 2018-08-18 10:42 • 来自相关话题

3
评论

【开源项目】全国首个开源直播小程序源码 环信公开课 小程序 直播

beyond 发表了文章 • 645 次浏览 • 2018-07-20 17:30 • 来自相关话题

今天你看直播了吗?拥有10亿微信生态用户的小程序已经成为了继移动互联后的又一个现象级风口,随着微信小程序对外开放实时音视频录制及播放等更多连接能力,小程序与直播强强联合,在各行各业找到了非常多的玩法,小程序直播相比微信直播和APP直播更加简洁、流畅、低延时、多入口等众多优势迅速向商业直播领域及泛娱乐直播领域蔓延。从小游戏、内容付费、工具、大数据、社交电商创业者到传统品牌商们,都在努力搭上小程序直播这辆快车,以免错过微信生态里新的流量洼地。
 





作为一名环信生态圈资深开发者,本着对技术的热衷,对环信的眷恋和对党的忠诚,基于环信即时通讯云写了“直播购物小程序”,目前项目源码已全部免费开放,希望对有需求的企业和开发者提供一个思路和参考。
直播购物小程序源码github地址:https://github.com/YuTongNetworkTechnology/wechat_live/tree/master 
git打不开可直接点下面链接下载


小程序直播demo_2018-06-21.zip







直播购物小程序运行预览图 
 
小程序体验指南(仅需两步):
 
1、下载微信小程序开发工具,下载地址:https://developers.weixin.qq.c ... .html 
 




2、导入源码:将附件的源码解压直接导入 







环信小程序直播技术文档
一、 使用的技术
1、 环信IM直播室。
2、 微信小程序实时音视频播放组件live-player。
3、 推流软件(obs、易推流)等推流。
4、 视频流服务器(UCLOUD、七牛、腾讯)等视频流服务器。
二、 系统使用流程。
1、 视频推流软件将视频流推到流服务器。
2、 打开视频直播demo小程序注册环信账号。
3、 进入软件直播室进行测试。
三、 技术流程及使用的SDk
1、 注册环信账号
打开https://www.easemob.com/ 环信官网,点击右上角注册按钮,选择[注册即时通讯云]




填写对相关信息进行注册





注册成功后进行登录




注:新注册用户需进行账号的认证。
2、 直播应用创建
登录成功点击应用列表选择创建应用




输入应用名称等信息
 





创建成功后点击应用进入





需要注意的是应用的OrgName 和AppName这两个是以后都需要用到的两个参数变量




3、 直播创建
1)在创建直播之前需要对应用进行设置首先需要设置应用的直播流地址
第一步获取应用管理员的Tokencurl -X POST "https://a1.easemob.com/[应用OrgName]/[应用AppName]/token" -d '{"grant_type":"client_credentials","client_id":"[应用client_id]","client_secret":"[应用] client_secret"}'返回格式{
"access_token":"YWMtWY779DgJEeS2h9OR7fw4QgAAAUmO4Qukwd9cfJSpkWHiOa7MCSk0MrkVIco",
"expires_in":5184000,
"application":"c03b3e30-046a-11e4-8ed1-5701cdaaa0e4"












第二步设置直播流地址curl -X POST -H "Authorization: Bearer [管理员Token]" " https://a1.easemob.com/[应用OrgName]/[应用AppName]/liverooms/stream_url -d '{"pc_pull":"[pc拉流地址]","pc_push":"[pc推流地址]","mobile_pull":"[手机拉流地址]","mobile_push":"[手机推流地址]"}'"成功返回格式:{
"action": "post",
"application": "e1a09de0-0e03-11e7-ad8e-a1d913615409",
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": {
"pc_pull": true,
"mobile_push": true,
"mobile_pull": true,
"pc_push": true
},
"timestamp": 1494084474885,
"duration": 1,
"organization": "easemob-demo",
"applicationName": "chatdemoui"
}












2)创建主播
点击IM用户





点击注册IM用户





填写用户信息





创建用户的过程同样也可以通过REST API形式进行curl -X POST -i " https://a1.easemob.com/[应用OrgName]/[应用AppName]/users" -d '{"username":"[用户名]","password":"[密码]"}'
注:应用必须为开放注册





将注册的用户添加为主播curl -X POST -H "Authorization: [管理员Token]" https://a1.easemob.com/[应用OrgName]/[应用AppName]/super_admin -d'{"superadmin":"[IM用户名]"}'返回结果示例:{
"action": "post",
"application": "4d7e4ba0-dc4a-11e3-90d5-e1ffbaacdaf5",
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": {
"result": "success"
},
"timestamp": 1496236798886,
"duration": 0,
"organization": "easemob-demo",
"applicationName": "chatdemoui"
}












3)创建直播
点击直播





点击新建房间





填写房间信息




创建房间同时也可以使用REST API形式进行详情可以查看http://docs.easemob.com/im/live/server-integration环信官方文档。
4、 小程序demo集成使用
小程序直播购物demo集成官方WebIM SDK详情请查看https://github.com/easemob/webim-weixin-xcx
Demo具体配置如下
打开demo 下sdk配置文件





修改appkey为自己应用的appkey





打开pages/live/index.js修改房间默认拉流地址及直播间房间号





四、 扩展说明
Demo中房间为固定测试房间,实际使用中应获取环信直播的房间信息及房间列表。具体如下:
获取直播间列表:curl -X GET -H "Authorization: Bearer [用户Token]" https://a1.easemob.com/[应用OrgName]/[应用AppName]/liverooms?ongoing=true&limit=[获取数量]&cursor=[游标地址(不填写为充开始查询)]
响应:{
"action": "get",
"application": "4d7e4ba0-dc4a-11e3-90d5-e1ffbaacdaf5",
"params": {
"cursor": [
"ZGNiMjRmNGY1YjczYjlhYTNkYjk1MDY2YmEyNzFmODQ6aW06Y2hhdHJvb206ZWFzZW1vYi1kZW1vI2NoYXRkZW1vdWk6MzE"
],
"ongoing": [
"true"
],
"limit": [
"2"
]
},
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": [
{
"id": "1924",
"chatroom_id": "17177265635330",
"title": "具体了",
"desc": "就咯",
"startTime": 1495779917352,
"endTime": 1495779917352,
"anchor": "wuls",
"gift_count": 0,
"praise_count": 0,
"current_user_count": 8,
"max_user_count": 9,
"status": "ongoing",
"cover_picture_url": "",
"pc_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1",
"pc_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1",
"mobile_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1",
"mobile_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1"
},
{
"id": "1922",
"chatroom_id": "17175003856897",
"title": "香山",
"desc": "随便",
"startTime": 1495777760957,
"endTime": 1495777760957,
"anchor": "sx001",
"gift_count": 0,
"praise_count": 8,
"current_user_count": 1,
"max_user_count": 3,
"status": "ongoing",
"cover_picture_url": "http://127.0.0.1:8080/easemob- ... ot%3B,
"pc_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1",
"pc_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1",
"mobile_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1",
"mobile_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1"
}
],
"timestamp": 1496303336669,
"duration": 0,
"organization": "easemob-demo",
"applicationName": "chatdemoui",
"cursor": "ZGNiMjRmNGY1YjczYjlhYTNkYjk1MDY2YmEyNzFmODQ6aW06Y2hhdHJvb206ZWFzZW1vYi1kZW1vI2NoYXRkZW1vdWk6NDk",
"count": 2
}












获取直播间详情:curl -X GET -H "Authorization: Bearer [用户Token]" " https://a1.easemob.com/[应用OrgName]/[应用AppName]/[房间id]/status"响应:{
"action": "get",
"application": "4d7e4ba0-dc4a-11e3-90d5-e1ffbaacdaf5",
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": {
"liveRoomID": "1946",
"status": "ongoing"
},
"timestamp": 1496234759930,
"duration": 0,
"organization": "easemob-demo",
"applicationName": "chatdemoui",
"count": 0
}














 
使用环信直播购物小程序遇到任何问题欢迎跟帖讨论。 查看全部
今天你看直播了吗?
拥有10亿微信生态用户的小程序已经成为了继移动互联后的又一个现象级风口,随着微信小程序对外开放实时音视频录制及播放等更多连接能力,小程序与直播强强联合,在各行各业找到了非常多的玩法,小程序直播相比微信直播和APP直播更加简洁、流畅、低延时、多入口等众多优势迅速向商业直播领域及泛娱乐直播领域蔓延。从小游戏、内容付费、工具、大数据、社交电商创业者到传统品牌商们,都在努力搭上小程序直播这辆快车,以免错过微信生态里新的流量洼地。
 
微信图片_20180725162426.jpg


作为一名环信生态圈资深开发者,本着对技术的热衷,对环信的眷恋和对党的忠诚,基于环信即时通讯云写了“直播购物小程序”,目前项目源码已全部免费开放,希望对有需求的企业和开发者提供一个思路和参考。
直播购物小程序源码github地址:https://github.com/YuTongNetworkTechnology/wechat_live/tree/master 
git打不开可直接点下面链接下载



预览图.jpg

直播购物小程序运行预览图 
 
小程序体验指南(仅需两步):
 
1、下载微信小程序开发工具,下载地址:https://developers.weixin.qq.c ... .html 
 
Catch9A07(07-20-17-38-30).jpg

2、导入源码:将附件的源码解压直接导入 


Catch1C69(07-20-17-38-30).jpg


环信小程序直播技术文档
一、 使用的技术
1、 环信IM直播室。
2、 微信小程序实时音视频播放组件live-player。
3、 推流软件(obs、易推流)等推流。
4、 视频流服务器(UCLOUD、七牛、腾讯)等视频流服务器。
二、 系统使用流程。
1、 视频推流软件将视频流推到流服务器。
2、 打开视频直播demo小程序注册环信账号。
3、 进入软件直播室进行测试。
三、 技术流程及使用的SDk
1、 注册环信账号
打开https://www.easemob.com/ 环信官网,点击右上角注册按钮,选择[注册即时通讯云]
1.png

填写对相关信息进行注册

2.png

注册成功后进行登录
3.png

注:新注册用户需进行账号的认证。
2、 直播应用创建
登录成功点击应用列表选择创建应用
4.png

输入应用名称等信息
 

5.png

创建成功后点击应用进入

6.png

需要注意的是应用的OrgName 和AppName这两个是以后都需要用到的两个参数变量
7.png

3、 直播创建
1)在创建直播之前需要对应用进行设置首先需要设置应用的直播流地址
第一步获取应用管理员的Token
curl -X POST "https://a1.easemob.com/[应用OrgName]/[应用AppName]/token" -d '{"grant_type":"client_credentials","client_id":"[应用client_id]","client_secret":"[应用] client_secret"}'
返回格式
{
"access_token":"YWMtWY779DgJEeS2h9OR7fw4QgAAAUmO4Qukwd9cfJSpkWHiOa7MCSk0MrkVIco",
"expires_in":5184000,
"application":"c03b3e30-046a-11e4-8ed1-5701cdaaa0e4"












第二步设置直播流地址
curl -X POST -H "Authorization: Bearer [管理员Token]"  " https://a1.easemob.com/[应用OrgName]/[应用AppName]/liverooms/stream_url -d '{"pc_pull":"[pc拉流地址]","pc_push":"[pc推流地址]","mobile_pull":"[手机拉流地址]","mobile_push":"[手机推流地址]"}'"
成功返回格式:
{
"action": "post",
"application": "e1a09de0-0e03-11e7-ad8e-a1d913615409",
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": {
"pc_pull": true,
"mobile_push": true,
"mobile_pull": true,
"pc_push": true
},
"timestamp": 1494084474885,
"duration": 1,
"organization": "easemob-demo",
"applicationName": "chatdemoui"
}












2)创建主播
点击IM用户

8.png

点击注册IM用户

9.png

填写用户信息

10.png

创建用户的过程同样也可以通过REST API形式进行
curl -X POST -i " https://a1.easemob.com/[应用OrgName]/[应用AppName]/users" -d '{"username":"[用户名]","password":"[密码]"}'

注:应用必须为开放注册

11.png

将注册的用户添加为主播
curl -X POST -H "Authorization: [管理员Token]"  https://a1.easemob.com/[应用OrgName]/[应用AppName]/super_admin -d'{"superadmin":"[IM用户名]"}'
返回结果示例:
{
"action": "post",
"application": "4d7e4ba0-dc4a-11e3-90d5-e1ffbaacdaf5",
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": {
"result": "success"
},
"timestamp": 1496236798886,
"duration": 0,
"organization": "easemob-demo",
"applicationName": "chatdemoui"
}












3)创建直播
点击直播

12.png

点击新建房间

13.png

填写房间信息
14.png

创建房间同时也可以使用REST API形式进行详情可以查看http://docs.easemob.com/im/live/server-integration环信官方文档。
4、 小程序demo集成使用
小程序直播购物demo集成官方WebIM SDK详情请查看https://github.com/easemob/webim-weixin-xcx
Demo具体配置如下
打开demo 下sdk配置文件

15.png

修改appkey为自己应用的appkey

16.png

打开pages/live/index.js修改房间默认拉流地址及直播间房间号

17.png

四、 扩展说明
Demo中房间为固定测试房间,实际使用中应获取环信直播的房间信息及房间列表。具体如下:
获取直播间列表:
curl -X GET -H "Authorization: Bearer  [用户Token]"  https://a1.easemob.com/[应用OrgName]/[应用AppName]/liverooms?ongoing=true&limit=[获取数量]&cursor=[游标地址(不填写为充开始查询)]

响应:
{
"action": "get",
"application": "4d7e4ba0-dc4a-11e3-90d5-e1ffbaacdaf5",
"params": {
"cursor": [
"ZGNiMjRmNGY1YjczYjlhYTNkYjk1MDY2YmEyNzFmODQ6aW06Y2hhdHJvb206ZWFzZW1vYi1kZW1vI2NoYXRkZW1vdWk6MzE"
],
"ongoing": [
"true"
],
"limit": [
"2"
]
},
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": [
{
"id": "1924",
"chatroom_id": "17177265635330",
"title": "具体了",
"desc": "就咯",
"startTime": 1495779917352,
"endTime": 1495779917352,
"anchor": "wuls",
"gift_count": 0,
"praise_count": 0,
"current_user_count": 8,
"max_user_count": 9,
"status": "ongoing",
"cover_picture_url": "",
"pc_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1",
"pc_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1",
"mobile_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1",
"mobile_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1"
},
{
"id": "1922",
"chatroom_id": "17175003856897",
"title": "香山",
"desc": "随便",
"startTime": 1495777760957,
"endTime": 1495777760957,
"anchor": "sx001",
"gift_count": 0,
"praise_count": 8,
"current_user_count": 1,
"max_user_count": 3,
"status": "ongoing",
"cover_picture_url": "http://127.0.0.1:8080/easemob- ... ot%3B,
"pc_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1",
"pc_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1",
"mobile_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1",
"mobile_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1"
}
],
"timestamp": 1496303336669,
"duration": 0,
"organization": "easemob-demo",
"applicationName": "chatdemoui",
"cursor": "ZGNiMjRmNGY1YjczYjlhYTNkYjk1MDY2YmEyNzFmODQ6aW06Y2hhdHJvb206ZWFzZW1vYi1kZW1vI2NoYXRkZW1vdWk6NDk",
"count": 2
}












获取直播间详情:
curl -X GET -H "Authorization: Bearer [用户Token]" " https://a1.easemob.com/[应用OrgName]/[应用AppName]/[房间id]/status"
响应:
{
"action": "get",
"application": "4d7e4ba0-dc4a-11e3-90d5-e1ffbaacdaf5",
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": {
"liveRoomID": "1946",
"status": "ongoing"
},
"timestamp": 1496234759930,
"duration": 0,
"organization": "easemob-demo",
"applicationName": "chatdemoui",
"count": 0
}














 
使用环信直播购物小程序遇到任何问题欢迎跟帖讨论。
14
评论

【有问必答】有温度,有态度,有速度的IMGeek社区! 有问必答 问题已解决 最佳回复

beyond 发表了文章 • 6832 次浏览 • 2018-05-24 17:45 • 来自相关话题

5分钟,是一个从提问到解答的总时长,有温度有态度有速度!
-IMGeek社区“鲁迅”




    IMGeek循着极客们开放、分享、协作、创新的精神,努力构建一个具有服务质量保障(Service Level Assurance , SLA)的社区。

   在IMGeek社区里征集到一批热心的技术专家,得到他们的承诺自愿回复IMGeek社区问题。只要你在IMGeek社区发布问题,专家们将会收到消息提醒,并及时回复。 

   当然,如果你在提交一个问题之前,可以先搜索一下,说不定你要提的问题已经有人提过并且得到解答。这样可以省却不少你的时间。 
 
   最后提醒一下提问的小伙伴,如果您的问题被解决,占用您一秒钟时间将回复设置为最佳回复,方便后面遇到相同问题的同学快速找到答案!




  现在,从一个提问开始你的IMGeek社区之旅。 查看全部
5分钟,是一个从提问到解答的总时长,有温度有态度有速度!
-IMGeek社区“鲁迅”




    IMGeek循着极客们开放、分享、协作、创新的精神,努力构建一个具有服务质量保障(Service Level Assurance , SLA)的社区。

   在IMGeek社区里征集到一批热心的技术专家,得到他们的承诺自愿回复IMGeek社区问题。只要你在IMGeek社区发布问题,专家们将会收到消息提醒,并及时回复。 

   当然,如果你在提交一个问题之前,可以先搜索一下,说不定你要提的问题已经有人提过并且得到解答。这样可以省却不少你的时间。 
 
   最后提醒一下提问的小伙伴,如果您的问题被解决,占用您一秒钟时间将回复设置为最佳回复,方便后面遇到相同问题的同学快速找到答案!
TIM截图20180524175557.png

  现在,从一个提问开始你的IMGeek社区之旅。
18
评论

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

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

   这里整理了集成环信的常见问题和一些功能的实现思路,希望能帮助到大家。感谢热心的开发者贡献,大家在观看过程中有不明白的地方欢迎直接跟帖咨询。
 
ios篇
APNs证书创建和上传到环信后台头像昵称的简述和处理方案音视频离线推送Demo实现环信服务器聊天记录保存多久?离线收不到好友请求IOS中环信聊天窗口如何实现文件发送和预览的功能ios集成常见问题环信推送的一些常见问题实现名片|红包|话题聊天室等自定义cell
 
Android篇
Android sdk 的两种导入方式环信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...小伙伴们还有什么想知道欢迎跟帖提出。
 
1
回复

web IM 发送群组附件消息问题 有专职工程师值守 webim 环信_WebIM

回复

轻雪飞天 回复了问题 • 1 人关注 • 104 次浏览 • 2018-08-16 16:34 • 来自相关话题

1
最佳

web IM 发送群组附件消息问题 有专职工程师值守 webim 群组消息 发送附件

回复

轻雪飞天 回复了问题 • 0 人关注 • 149 次浏览 • 2018-08-16 16:33 • 来自相关话题

0
回复

webim申请加入群总提示错误 有专职工程师值守 webim 加群

回复

轻雪飞天 发起了问题 • 1 人关注 • 76 次浏览 • 2018-08-15 16:59 • 来自相关话题

0
回复

webIM 发送视频消息 失败 发送视频消息 webim

回复

轻雪飞天 发起了问题 • 0 人关注 • 107 次浏览 • 2018-08-10 15:56 • 来自相关话题

1
回复

环信im接受图片,图片是什么类型的 webim

回复

KevinGong 回复了问题 • 2 人关注 • 111 次浏览 • 2018-08-03 18:26 • 来自相关话题

1
回复

环信的web端获取用户分组报错type 28到底什么意思?应该怎么解决? webim

回复

鴈濄侕潭卟留影 回复了问题 • 1 人关注 • 183 次浏览 • 2018-07-24 15:47 • 来自相关话题

2
回复

webim onError type=8 webim

回复

睡姿决定发型 回复了问题 • 2 人关注 • 481 次浏览 • 2018-07-21 11:58 • 来自相关话题

0
回复

webIm 创建视频消息报错【已解决】 视频 webim 报错

回复

q310550690 发起了问题 • 1 人关注 • 153 次浏览 • 2018-07-19 14:14 • 来自相关话题

1
回复

WEBIM 单用户多端登录 webim

回复

KevinGong 回复了问题 • 2 人关注 • 672 次浏览 • 2018-05-21 14:13 • 来自相关话题

1
回复

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

回复

veer 回复了问题 • 2 人关注 • 829 次浏览 • 2018-05-04 17:41 • 来自相关话题

0
回复

$msg未定义 webim

回复

问佛西藏 发起了问题 • 1 人关注 • 331 次浏览 • 2018-04-15 12:01 • 来自相关话题

0
回复

vue采用类似官方demo的方式集成,登陆后报错stropheConn.setJid is not a function。 vue webim 环信_WebIM

回复

yyq 发起了问题 • 1 人关注 • 430 次浏览 • 2018-04-10 13:54 • 来自相关话题

0
回复

webim 消息回调 消息时间 webim

回复

q826qq1878 发起了问题 • 1 人关注 • 389 次浏览 • 2018-03-30 14:17 • 来自相关话题

0
回复

web im页面怎么写环信的登录的监听事件,求大神指点 webim

回复

仙人掌 发起了问题 • 1 人关注 • 912 次浏览 • 2018-01-16 11:16 • 来自相关话题

0
回复

chrome 连接webim 连接不上 webim

回复

zengwj 发起了问题 • 1 人关注 • 794 次浏览 • 2017-12-05 15:17 • 来自相关话题

0
回复

webIM 连接 webim

回复

空白 也只是昨天的记忆 发起了问题 • 1 人关注 • 557 次浏览 • 2017-11-14 17:23 • 来自相关话题

0
回复

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

回复

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

0
回复

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

回复

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

4
回复

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

回复

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

0
回复

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

回复

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

2
回复

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

回复

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

0
回复

webIM webim

回复

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

0
回复

webim集成 webim

回复

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

1
回复

web im webim

回复

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

9
回复

收集基于环信SDK开发的开源项目 开源项目

回复

xiaoyan2015 回复了问题 • 12 人关注 • 9292 次浏览 • 2018-08-18 10:42 • 来自相关话题

3
评论

【开源项目】全国首个开源直播小程序源码 环信公开课 小程序 直播

beyond 发表了文章 • 645 次浏览 • 2018-07-20 17:30 • 来自相关话题

今天你看直播了吗?拥有10亿微信生态用户的小程序已经成为了继移动互联后的又一个现象级风口,随着微信小程序对外开放实时音视频录制及播放等更多连接能力,小程序与直播强强联合,在各行各业找到了非常多的玩法,小程序直播相比微信直播和APP直播更加简洁、流畅、低延时、多入口等众多优势迅速向商业直播领域及泛娱乐直播领域蔓延。从小游戏、内容付费、工具、大数据、社交电商创业者到传统品牌商们,都在努力搭上小程序直播这辆快车,以免错过微信生态里新的流量洼地。
 





作为一名环信生态圈资深开发者,本着对技术的热衷,对环信的眷恋和对党的忠诚,基于环信即时通讯云写了“直播购物小程序”,目前项目源码已全部免费开放,希望对有需求的企业和开发者提供一个思路和参考。
直播购物小程序源码github地址:https://github.com/YuTongNetworkTechnology/wechat_live/tree/master 
git打不开可直接点下面链接下载


小程序直播demo_2018-06-21.zip







直播购物小程序运行预览图 
 
小程序体验指南(仅需两步):
 
1、下载微信小程序开发工具,下载地址:https://developers.weixin.qq.c ... .html 
 




2、导入源码:将附件的源码解压直接导入 







环信小程序直播技术文档
一、 使用的技术
1、 环信IM直播室。
2、 微信小程序实时音视频播放组件live-player。
3、 推流软件(obs、易推流)等推流。
4、 视频流服务器(UCLOUD、七牛、腾讯)等视频流服务器。
二、 系统使用流程。
1、 视频推流软件将视频流推到流服务器。
2、 打开视频直播demo小程序注册环信账号。
3、 进入软件直播室进行测试。
三、 技术流程及使用的SDk
1、 注册环信账号
打开https://www.easemob.com/ 环信官网,点击右上角注册按钮,选择[注册即时通讯云]




填写对相关信息进行注册





注册成功后进行登录




注:新注册用户需进行账号的认证。
2、 直播应用创建
登录成功点击应用列表选择创建应用




输入应用名称等信息
 





创建成功后点击应用进入





需要注意的是应用的OrgName 和AppName这两个是以后都需要用到的两个参数变量




3、 直播创建
1)在创建直播之前需要对应用进行设置首先需要设置应用的直播流地址
第一步获取应用管理员的Tokencurl -X POST "https://a1.easemob.com/[应用OrgName]/[应用AppName]/token" -d '{"grant_type":"client_credentials","client_id":"[应用client_id]","client_secret":"[应用] client_secret"}'返回格式{
"access_token":"YWMtWY779DgJEeS2h9OR7fw4QgAAAUmO4Qukwd9cfJSpkWHiOa7MCSk0MrkVIco",
"expires_in":5184000,
"application":"c03b3e30-046a-11e4-8ed1-5701cdaaa0e4"












第二步设置直播流地址curl -X POST -H "Authorization: Bearer [管理员Token]" " https://a1.easemob.com/[应用OrgName]/[应用AppName]/liverooms/stream_url -d '{"pc_pull":"[pc拉流地址]","pc_push":"[pc推流地址]","mobile_pull":"[手机拉流地址]","mobile_push":"[手机推流地址]"}'"成功返回格式:{
"action": "post",
"application": "e1a09de0-0e03-11e7-ad8e-a1d913615409",
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": {
"pc_pull": true,
"mobile_push": true,
"mobile_pull": true,
"pc_push": true
},
"timestamp": 1494084474885,
"duration": 1,
"organization": "easemob-demo",
"applicationName": "chatdemoui"
}












2)创建主播
点击IM用户





点击注册IM用户





填写用户信息





创建用户的过程同样也可以通过REST API形式进行curl -X POST -i " https://a1.easemob.com/[应用OrgName]/[应用AppName]/users" -d '{"username":"[用户名]","password":"[密码]"}'
注:应用必须为开放注册





将注册的用户添加为主播curl -X POST -H "Authorization: [管理员Token]" https://a1.easemob.com/[应用OrgName]/[应用AppName]/super_admin -d'{"superadmin":"[IM用户名]"}'返回结果示例:{
"action": "post",
"application": "4d7e4ba0-dc4a-11e3-90d5-e1ffbaacdaf5",
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": {
"result": "success"
},
"timestamp": 1496236798886,
"duration": 0,
"organization": "easemob-demo",
"applicationName": "chatdemoui"
}












3)创建直播
点击直播





点击新建房间





填写房间信息




创建房间同时也可以使用REST API形式进行详情可以查看http://docs.easemob.com/im/live/server-integration环信官方文档。
4、 小程序demo集成使用
小程序直播购物demo集成官方WebIM SDK详情请查看https://github.com/easemob/webim-weixin-xcx
Demo具体配置如下
打开demo 下sdk配置文件





修改appkey为自己应用的appkey





打开pages/live/index.js修改房间默认拉流地址及直播间房间号





四、 扩展说明
Demo中房间为固定测试房间,实际使用中应获取环信直播的房间信息及房间列表。具体如下:
获取直播间列表:curl -X GET -H "Authorization: Bearer [用户Token]" https://a1.easemob.com/[应用OrgName]/[应用AppName]/liverooms?ongoing=true&limit=[获取数量]&cursor=[游标地址(不填写为充开始查询)]
响应:{
"action": "get",
"application": "4d7e4ba0-dc4a-11e3-90d5-e1ffbaacdaf5",
"params": {
"cursor": [
"ZGNiMjRmNGY1YjczYjlhYTNkYjk1MDY2YmEyNzFmODQ6aW06Y2hhdHJvb206ZWFzZW1vYi1kZW1vI2NoYXRkZW1vdWk6MzE"
],
"ongoing": [
"true"
],
"limit": [
"2"
]
},
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": [
{
"id": "1924",
"chatroom_id": "17177265635330",
"title": "具体了",
"desc": "就咯",
"startTime": 1495779917352,
"endTime": 1495779917352,
"anchor": "wuls",
"gift_count": 0,
"praise_count": 0,
"current_user_count": 8,
"max_user_count": 9,
"status": "ongoing",
"cover_picture_url": "",
"pc_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1",
"pc_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1",
"mobile_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1",
"mobile_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1"
},
{
"id": "1922",
"chatroom_id": "17175003856897",
"title": "香山",
"desc": "随便",
"startTime": 1495777760957,
"endTime": 1495777760957,
"anchor": "sx001",
"gift_count": 0,
"praise_count": 8,
"current_user_count": 1,
"max_user_count": 3,
"status": "ongoing",
"cover_picture_url": "http://127.0.0.1:8080/easemob- ... ot%3B,
"pc_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1",
"pc_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1",
"mobile_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1",
"mobile_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1"
}
],
"timestamp": 1496303336669,
"duration": 0,
"organization": "easemob-demo",
"applicationName": "chatdemoui",
"cursor": "ZGNiMjRmNGY1YjczYjlhYTNkYjk1MDY2YmEyNzFmODQ6aW06Y2hhdHJvb206ZWFzZW1vYi1kZW1vI2NoYXRkZW1vdWk6NDk",
"count": 2
}












获取直播间详情:curl -X GET -H "Authorization: Bearer [用户Token]" " https://a1.easemob.com/[应用OrgName]/[应用AppName]/[房间id]/status"响应:{
"action": "get",
"application": "4d7e4ba0-dc4a-11e3-90d5-e1ffbaacdaf5",
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": {
"liveRoomID": "1946",
"status": "ongoing"
},
"timestamp": 1496234759930,
"duration": 0,
"organization": "easemob-demo",
"applicationName": "chatdemoui",
"count": 0
}














 
使用环信直播购物小程序遇到任何问题欢迎跟帖讨论。 查看全部
今天你看直播了吗?
拥有10亿微信生态用户的小程序已经成为了继移动互联后的又一个现象级风口,随着微信小程序对外开放实时音视频录制及播放等更多连接能力,小程序与直播强强联合,在各行各业找到了非常多的玩法,小程序直播相比微信直播和APP直播更加简洁、流畅、低延时、多入口等众多优势迅速向商业直播领域及泛娱乐直播领域蔓延。从小游戏、内容付费、工具、大数据、社交电商创业者到传统品牌商们,都在努力搭上小程序直播这辆快车,以免错过微信生态里新的流量洼地。
 
微信图片_20180725162426.jpg


作为一名环信生态圈资深开发者,本着对技术的热衷,对环信的眷恋和对党的忠诚,基于环信即时通讯云写了“直播购物小程序”,目前项目源码已全部免费开放,希望对有需求的企业和开发者提供一个思路和参考。
直播购物小程序源码github地址:https://github.com/YuTongNetworkTechnology/wechat_live/tree/master 
git打不开可直接点下面链接下载



预览图.jpg

直播购物小程序运行预览图 
 
小程序体验指南(仅需两步):
 
1、下载微信小程序开发工具,下载地址:https://developers.weixin.qq.c ... .html 
 
Catch9A07(07-20-17-38-30).jpg

2、导入源码:将附件的源码解压直接导入 


Catch1C69(07-20-17-38-30).jpg


环信小程序直播技术文档
一、 使用的技术
1、 环信IM直播室。
2、 微信小程序实时音视频播放组件live-player。
3、 推流软件(obs、易推流)等推流。
4、 视频流服务器(UCLOUD、七牛、腾讯)等视频流服务器。
二、 系统使用流程。
1、 视频推流软件将视频流推到流服务器。
2、 打开视频直播demo小程序注册环信账号。
3、 进入软件直播室进行测试。
三、 技术流程及使用的SDk
1、 注册环信账号
打开https://www.easemob.com/ 环信官网,点击右上角注册按钮,选择[注册即时通讯云]
1.png

填写对相关信息进行注册

2.png

注册成功后进行登录
3.png

注:新注册用户需进行账号的认证。
2、 直播应用创建
登录成功点击应用列表选择创建应用
4.png

输入应用名称等信息
 

5.png

创建成功后点击应用进入

6.png

需要注意的是应用的OrgName 和AppName这两个是以后都需要用到的两个参数变量
7.png

3、 直播创建
1)在创建直播之前需要对应用进行设置首先需要设置应用的直播流地址
第一步获取应用管理员的Token
curl -X POST "https://a1.easemob.com/[应用OrgName]/[应用AppName]/token" -d '{"grant_type":"client_credentials","client_id":"[应用client_id]","client_secret":"[应用] client_secret"}'
返回格式
{
"access_token":"YWMtWY779DgJEeS2h9OR7fw4QgAAAUmO4Qukwd9cfJSpkWHiOa7MCSk0MrkVIco",
"expires_in":5184000,
"application":"c03b3e30-046a-11e4-8ed1-5701cdaaa0e4"












第二步设置直播流地址
curl -X POST -H "Authorization: Bearer [管理员Token]"  " https://a1.easemob.com/[应用OrgName]/[应用AppName]/liverooms/stream_url -d '{"pc_pull":"[pc拉流地址]","pc_push":"[pc推流地址]","mobile_pull":"[手机拉流地址]","mobile_push":"[手机推流地址]"}'"
成功返回格式:
{
"action": "post",
"application": "e1a09de0-0e03-11e7-ad8e-a1d913615409",
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": {
"pc_pull": true,
"mobile_push": true,
"mobile_pull": true,
"pc_push": true
},
"timestamp": 1494084474885,
"duration": 1,
"organization": "easemob-demo",
"applicationName": "chatdemoui"
}












2)创建主播
点击IM用户

8.png

点击注册IM用户

9.png

填写用户信息

10.png

创建用户的过程同样也可以通过REST API形式进行
curl -X POST -i " https://a1.easemob.com/[应用OrgName]/[应用AppName]/users" -d '{"username":"[用户名]","password":"[密码]"}'

注:应用必须为开放注册

11.png

将注册的用户添加为主播
curl -X POST -H "Authorization: [管理员Token]"  https://a1.easemob.com/[应用OrgName]/[应用AppName]/super_admin -d'{"superadmin":"[IM用户名]"}'
返回结果示例:
{
"action": "post",
"application": "4d7e4ba0-dc4a-11e3-90d5-e1ffbaacdaf5",
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": {
"result": "success"
},
"timestamp": 1496236798886,
"duration": 0,
"organization": "easemob-demo",
"applicationName": "chatdemoui"
}












3)创建直播
点击直播

12.png

点击新建房间

13.png

填写房间信息
14.png

创建房间同时也可以使用REST API形式进行详情可以查看http://docs.easemob.com/im/live/server-integration环信官方文档。
4、 小程序demo集成使用
小程序直播购物demo集成官方WebIM SDK详情请查看https://github.com/easemob/webim-weixin-xcx
Demo具体配置如下
打开demo 下sdk配置文件

15.png

修改appkey为自己应用的appkey

16.png

打开pages/live/index.js修改房间默认拉流地址及直播间房间号

17.png

四、 扩展说明
Demo中房间为固定测试房间,实际使用中应获取环信直播的房间信息及房间列表。具体如下:
获取直播间列表:
curl -X GET -H "Authorization: Bearer  [用户Token]"  https://a1.easemob.com/[应用OrgName]/[应用AppName]/liverooms?ongoing=true&limit=[获取数量]&cursor=[游标地址(不填写为充开始查询)]

响应:
{
"action": "get",
"application": "4d7e4ba0-dc4a-11e3-90d5-e1ffbaacdaf5",
"params": {
"cursor": [
"ZGNiMjRmNGY1YjczYjlhYTNkYjk1MDY2YmEyNzFmODQ6aW06Y2hhdHJvb206ZWFzZW1vYi1kZW1vI2NoYXRkZW1vdWk6MzE"
],
"ongoing": [
"true"
],
"limit": [
"2"
]
},
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": [
{
"id": "1924",
"chatroom_id": "17177265635330",
"title": "具体了",
"desc": "就咯",
"startTime": 1495779917352,
"endTime": 1495779917352,
"anchor": "wuls",
"gift_count": 0,
"praise_count": 0,
"current_user_count": 8,
"max_user_count": 9,
"status": "ongoing",
"cover_picture_url": "",
"pc_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1",
"pc_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1",
"mobile_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1",
"mobile_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1"
},
{
"id": "1922",
"chatroom_id": "17175003856897",
"title": "香山",
"desc": "随便",
"startTime": 1495777760957,
"endTime": 1495777760957,
"anchor": "sx001",
"gift_count": 0,
"praise_count": 8,
"current_user_count": 1,
"max_user_count": 3,
"status": "ongoing",
"cover_picture_url": "http://127.0.0.1:8080/easemob- ... ot%3B,
"pc_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1",
"pc_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1",
"mobile_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1",
"mobile_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1"
}
],
"timestamp": 1496303336669,
"duration": 0,
"organization": "easemob-demo",
"applicationName": "chatdemoui",
"cursor": "ZGNiMjRmNGY1YjczYjlhYTNkYjk1MDY2YmEyNzFmODQ6aW06Y2hhdHJvb206ZWFzZW1vYi1kZW1vI2NoYXRkZW1vdWk6NDk",
"count": 2
}












获取直播间详情:
curl -X GET -H "Authorization: Bearer [用户Token]" " https://a1.easemob.com/[应用OrgName]/[应用AppName]/[房间id]/status"
响应:
{
"action": "get",
"application": "4d7e4ba0-dc4a-11e3-90d5-e1ffbaacdaf5",
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": {
"liveRoomID": "1946",
"status": "ongoing"
},
"timestamp": 1496234759930,
"duration": 0,
"organization": "easemob-demo",
"applicationName": "chatdemoui",
"count": 0
}














 
使用环信直播购物小程序遇到任何问题欢迎跟帖讨论。
14
评论

【有问必答】有温度,有态度,有速度的IMGeek社区! 有问必答 问题已解决 最佳回复

beyond 发表了文章 • 6832 次浏览 • 2018-05-24 17:45 • 来自相关话题

5分钟,是一个从提问到解答的总时长,有温度有态度有速度!
-IMGeek社区“鲁迅”




    IMGeek循着极客们开放、分享、协作、创新的精神,努力构建一个具有服务质量保障(Service Level Assurance , SLA)的社区。

   在IMGeek社区里征集到一批热心的技术专家,得到他们的承诺自愿回复IMGeek社区问题。只要你在IMGeek社区发布问题,专家们将会收到消息提醒,并及时回复。 

   当然,如果你在提交一个问题之前,可以先搜索一下,说不定你要提的问题已经有人提过并且得到解答。这样可以省却不少你的时间。 
 
   最后提醒一下提问的小伙伴,如果您的问题被解决,占用您一秒钟时间将回复设置为最佳回复,方便后面遇到相同问题的同学快速找到答案!




  现在,从一个提问开始你的IMGeek社区之旅。 查看全部
5分钟,是一个从提问到解答的总时长,有温度有态度有速度!
-IMGeek社区“鲁迅”




    IMGeek循着极客们开放、分享、协作、创新的精神,努力构建一个具有服务质量保障(Service Level Assurance , SLA)的社区。

   在IMGeek社区里征集到一批热心的技术专家,得到他们的承诺自愿回复IMGeek社区问题。只要你在IMGeek社区发布问题,专家们将会收到消息提醒,并及时回复。 

   当然,如果你在提交一个问题之前,可以先搜索一下,说不定你要提的问题已经有人提过并且得到解答。这样可以省却不少你的时间。 
 
   最后提醒一下提问的小伙伴,如果您的问题被解决,占用您一秒钟时间将回复设置为最佳回复,方便后面遇到相同问题的同学快速找到答案!
TIM截图20180524175557.png

  现在,从一个提问开始你的IMGeek社区之旅。
18
评论

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

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

   这里整理了集成环信的常见问题和一些功能的实现思路,希望能帮助到大家。感谢热心的开发者贡献,大家在观看过程中有不明白的地方欢迎直接跟帖咨询。
 
ios篇
APNs证书创建和上传到环信后台头像昵称的简述和处理方案音视频离线推送Demo实现环信服务器聊天记录保存多久?离线收不到好友请求IOS中环信聊天窗口如何实现文件发送和预览的功能ios集成常见问题环信推送的一些常见问题实现名片|红包|话题聊天室等自定义cell
 
Android篇
Android sdk 的两种导入方式环信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...小伙伴们还有什么想知道欢迎跟帖提出。
 
1
评论

【环信征文】|PHP WEBIM整合到项目(一条龙服务包括保存聊天记录到本地数据库) thinkphp 自动登陆 好友列表 头像昵称渲染 聊天记录保存 webim

Sro 发表了文章 • 429 次浏览 • 2018-04-09 14:36 • 来自相关话题

   我是用think PHP做的项目,我们的需求是用IM跟他人聊天并且保存聊天记录到本地。我把整个环信文件下载了下来放在了项目的js文件里。并且没有做单独的页面渲染直接用的环信原来的页面,所以大部分功能都写在了控制器里最后跳转到IM的页面。
第一步,IM集成
  这个可以参照文档,但是这个文档好像是过时的,如果集成失败可以上官方登陆页面 http://webim.easemob.com/ 把页面加载的文件抄下来。
第二步,自动登陆和他人聊天
  此步要先把网站上的用户注册一个环信账号,然后自动登陆跳过环信的登陆页面,然后把对方加为好友(此步如果对方没有环信账号也需要把好友注册一个环信账号)。上代码






逻辑是这么实现的,因为在控制器里做的操作,所以登陆信息要保存在cookie里。里面的方法都可以在http://api-docs.easemob.com/%2 ... token这个环信的服务器端集成Swagger文档里找到,然后用Curl调用,或者一个更简单的方法,有一个完整的类可以用,链接在此https://github.com/easemob/emc ... t.php,简单的curl是这么用的






好此步就此完成
第三步,头像、昵称 渲染
   这步我的处理方法是把你网站用户的头像和昵称查出来然后存在cookie里,然后在demojs文件里进行调用,这步主要麻烦的地方是需要在demo.js的文件里找到页面渲染的地方,大约有8个地方(23288,27321,29764,29862,30101,31211,31360,31465)
   这三步完成基本就完成了IM整合进项目了,还有一个保存聊天记录到本地,我没有用官方的接口来下载历史记录,听说下载下来是一个包,而且数据还会有丢失,所以我的做法是每次发送消息调用自己的Ajax来进行保存数据库操作,然后新在打开聊天的时候请求后台获得聊天记录。
  好,我在demojs里找到了2个发送消息时候的方法,一个是发送文字和表情,一个是发送图片。sendText(27399)这个方法是发送文字和表情的






  msg.boy里面可以获得到你需要保存在数据库里的所有信息,chat_time是因为聊天记录的时间格式是2018/4/9 上午9:53:03这种的所以我自己加上去的。
  pictureChange(22977)这个方法是发送图片的,这里的url非常重要,而且在msg.set在外面拿不到所以我放在了方法里面调用的Ajax,这个url 是
https://a1.easemob.com/1110170 ... 79a8b
这样的二进制一会需要下载到本地或者上传到你需要的图片存储空间,我放在了七牛上。






  保存文字信息非常简单,就像下图一样就可以了,下面的做的判断是当消息类型是图片的时候调用一下图片上传方法












  这个图片是图片上传方法,我在后台用CURL进行了上传操作,最开始我先把图片保存在了本地然后再上传,后来我找了二进制可以上传,改成了这个样子。(值得注意的是我用CURL调用的url返回的值会有一个红色的符号,所以我用substr给它截掉了,之前没发现怎么都找不到图片。最后发现是database文件的编码有问题改成utf-8之后截取字符串的那步可以去掉了)这里的接口就是一个普通的上传方法然后返回的是图片名称。这样聊天记录也保存完毕了。
  表结构






  下一步是读取聊天记录releaseChatRecord这个方法是demojs每次你点击聊天窗口都会触发的方法,我把ajax放在这这里。






  图片里的targetId就是你当天聊天的好友id,自己的id怎么得到不需要说了吧,你肯定是在登陆状态才能聊天。Demo.chatRecord这个就是需要替换的聊天记录,Ajax请求后台






  这里注意的是要获得聊天记录需要进行红圈里的判断,来分别你给我发的消息和你给我发的消息,我之前犯得错误没判断最后只获得了我给他人发的消息记录。。。循环里的是构造demojs需要用的json数据。这个对象结构可以在releaseChatRecord方法里console.log()出来然后自己拼装。
  这样已经基本完成了最后上成功后的图片






  还有个问题没处理就是未送达那个文字,因为我构造的数据里没有加上read=true.你可以选择把IM里这个功能关闭或者在数据里加上去。
  这样保存聊天记录的方式是每次发送都进行保存如果人数太多或太频繁可能会出现问题,以后可能会换成调用官网的获得历史记录的接口。
  查看全部
   我是用think PHP做的项目,我们的需求是用IM跟他人聊天并且保存聊天记录到本地。我把整个环信文件下载了下来放在了项目的js文件里。并且没有做单独的页面渲染直接用的环信原来的页面,所以大部分功能都写在了控制器里最后跳转到IM的页面。
第一步,IM集成
  这个可以参照文档,但是这个文档好像是过时的,如果集成失败可以上官方登陆页面 http://webim.easemob.com/ 把页面加载的文件抄下来。
第二步,自动登陆和他人聊天
  此步要先把网站上的用户注册一个环信账号,然后自动登陆跳过环信的登陆页面,然后把对方加为好友(此步如果对方没有环信账号也需要把好友注册一个环信账号)。上代码

微信图片_20180410135435.png


逻辑是这么实现的,因为在控制器里做的操作,所以登陆信息要保存在cookie里。里面的方法都可以在http://api-docs.easemob.com/%2 ... token这个环信的服务器端集成Swagger文档里找到,然后用Curl调用,或者一个更简单的方法,有一个完整的类可以用,链接在此https://github.com/easemob/emc ... t.php,简单的curl是这么用的

微信图片_20180409114955.png


好此步就此完成
第三步,头像、昵称 渲染
   这步我的处理方法是把你网站用户的头像和昵称查出来然后存在cookie里,然后在demojs文件里进行调用,这步主要麻烦的地方是需要在demo.js的文件里找到页面渲染的地方,大约有8个地方(23288,27321,29764,29862,30101,31211,31360,31465)
   这三步完成基本就完成了IM整合进项目了,还有一个保存聊天记录到本地,我没有用官方的接口来下载历史记录,听说下载下来是一个包,而且数据还会有丢失,所以我的做法是每次发送消息调用自己的Ajax来进行保存数据库操作,然后新在打开聊天的时候请求后台获得聊天记录。
  好,我在demojs里找到了2个发送消息时候的方法,一个是发送文字和表情,一个是发送图片。sendText(27399)这个方法是发送文字和表情的

微信图片_20180409135255.png


  msg.boy里面可以获得到你需要保存在数据库里的所有信息,chat_time是因为聊天记录的时间格式是2018/4/9 上午9:53:03这种的所以我自己加上去的。
  pictureChange(22977)这个方法是发送图片的,这里的url非常重要,而且在msg.set在外面拿不到所以我放在了方法里面调用的Ajax,这个url 是
https://a1.easemob.com/1110170 ... 79a8b
这样的二进制一会需要下载到本地或者上传到你需要的图片存储空间,我放在了七牛上。

微信图片_20180409135626.png


  保存文字信息非常简单,就像下图一样就可以了,下面的做的判断是当消息类型是图片的时候调用一下图片上传方法

微信图片_20180409140143.png



微信图片_20180410135615.png


  这个图片是图片上传方法,我在后台用CURL进行了上传操作,最开始我先把图片保存在了本地然后再上传,后来我找了二进制可以上传,改成了这个样子。(值得注意的是我用CURL调用的url返回的值会有一个红色的符号,所以我用substr给它截掉了,之前没发现怎么都找不到图片。最后发现是database文件的编码有问题改成utf-8之后截取字符串的那步可以去掉了)这里的接口就是一个普通的上传方法然后返回的是图片名称。这样聊天记录也保存完毕了。
  表结构

微信图片_20180409142529.png


  下一步是读取聊天记录releaseChatRecord这个方法是demojs每次你点击聊天窗口都会触发的方法,我把ajax放在这这里。

微信图片_20180409141116.png


  图片里的targetId就是你当天聊天的好友id,自己的id怎么得到不需要说了吧,你肯定是在登陆状态才能聊天。Demo.chatRecord这个就是需要替换的聊天记录,Ajax请求后台

微信图片_20180409141344.png


  这里注意的是要获得聊天记录需要进行红圈里的判断,来分别你给我发的消息和你给我发的消息,我之前犯得错误没判断最后只获得了我给他人发的消息记录。。。循环里的是构造demojs需要用的json数据。这个对象结构可以在releaseChatRecord方法里console.log()出来然后自己拼装。
  这样已经基本完成了最后上成功后的图片

微信图片_20180409142025.png


  还有个问题没处理就是未送达那个文字,因为我构造的数据里没有加上read=true.你可以选择把IM里这个功能关闭或者在数据里加上去。
  这样保存聊天记录的方式是每次发送都进行保存如果人数太多或太频繁可能会出现问题,以后可能会换成调用官网的获得历史记录的接口。
 
3
评论

基于layim+环信webim的网页即时聊天 LITE-IM LITE_IM webim layim 即时通信 网页聊天

回眸淡然笑 发表了文章 • 1948 次浏览 • 2017-12-03 00:55 • 来自相关话题

什么是LITE-IM?LITE-IM是一款基于 环信webim3.X 和 layim 开发而成的WEB即时通讯,并且完全的免费和开源 。LITE-IM使用 拥有高并发,长连接永不掉线的即时通讯的行业领头羊环信作为通信介质,再搭配上拥有丰富前端交互的layim,让你能够快速的搭建一个现代化的、高度稳定的web即时通讯。

LITE-IM不仅能够担当客户服务来使用,还可以用作你网站粘连客户、活跃社区的媒介,提升用户的使用率。当然LITE-IM还有许多有待完善之处。
 
目前已完成的功能有:
好友/群内的文字、表情、图片、文件 在线/离线消息发送和接收。查看群员列表。 面板内快速查找。 面板右键自定义事件 修改签名 自定义上传背景皮肤 搜索好友/群 添加好友/群 新建群 消息盒子展示查看/修改个人信息实时获取好友在线状态挤下线提醒增删改 好友/好友分组群管理(增删管理员/修改群名片/单个群员禁言解除禁言/踢人)

部分截图如下
 
好友聊天界面

自定义上传皮肤

群组

自定义右键

消息盒子

好友

 
 LITE-IM在线体验地址:test.guoshanchina.com

体验帐号:
用户名:911088 密码:123456

用户名:1570855 密码:123456

用户名:1570845 密码:123456

用户名:911058 密码:123456

用户名:910992 密码:123456

用户名:911067 密码:123456

用户名:911100 密码:123456

用户名:911085 密码:123456

 github源码:https://github.com/shmilylbelva/webim 查看全部
什么是LITE-IM?
LITE-IM是一款基于 环信webim3.X 和 layim 开发而成的WEB即时通讯,并且完全的免费和开源 。LITE-IM使用 拥有高并发,长连接永不掉线的即时通讯的行业领头羊环信作为通信介质,再搭配上拥有丰富前端交互的layim,让你能够快速的搭建一个现代化的、高度稳定的web即时通讯。

LITE-IM不仅能够担当客户服务来使用,还可以用作你网站粘连客户、活跃社区的媒介,提升用户的使用率。当然LITE-IM还有许多有待完善之处。

 
目前已完成的功能有:

  1. 好友/群内的文字、表情、图片、文件 在线/离线消息发送和接收。
  2. 查看群员列表。 
  3. 面板内快速查找。 
  4. 面板右键自定义事件 
  5. 修改签名 
  6. 自定义上传背景皮肤 
  7. 搜索好友/群 
  8. 添加好友/群 
  9. 新建群 
  10. 消息盒子展示
  11. 查看/修改个人信息
  12. 实时获取好友在线状态
  13. 挤下线提醒
  14. 增删改 好友/好友分组
  15. 群管理(增删管理员/修改群名片/单个群员禁言解除禁言/踢人)



部分截图如下
 
好友聊天界面


自定义上传皮肤


群组


自定义右键


消息盒子


好友


 
 LITE-IM在线体验地址:test.guoshanchina.com

体验帐号:

用户名:911088 密码:123456

用户名:1570855 密码:123456

用户名:1570845 密码:123456

用户名:911058 密码:123456

用户名:910992 密码:123456

用户名:911067 密码:123456

用户名:911100 密码:123456

用户名:911085 密码:123456



 github源码:https://github.com/shmilylbelva/webim
3
评论

基于环信webIM提供的Demo改造 webim 自动登录 聊天记录 头像 昵称 显示

__kaven™、 发表了文章 • 952 次浏览 • 2017-11-17 14:44 • 来自相关话题

本效果图是基于webIM的demo版本修改,主要实现了以下功能
1.实现自动登录,到聊天窗口
    解决办法:是在页面自己写参数调用 Demo.conn.open(options) 方法

2.实现最近联系人列表渲染(因为我们没有好友概念,只要跟谁最近聊天了,就算是好友了)
    解决办法:在页面通过ajax调用后台restFul地址获取联系人,然后循环调用 Demo.conn.onTextMessage(msg)方法,将消息内容为空,在msg里面设置标识为初始化加载,这样就会出现在列表里面

3.实现联系人:头像、昵称 渲染
   解决办法:很简单就是在刚才上面的方法体里面调用完之后,你的列表就会出现好友列表,这时候你只需要根据环信用户id,直接基于jq替换即可

4.实现点击联系人 渲染历史聊天记录(在发送消息的时候将聊天记录保存在我们自己的数据库)
   解决办法:在你获取最近联系人这个方法时已经返回了聊天记录列表,你需要在(Demo.chatRecord.环信用户id.messages)这个数组里面把你的消息放在这个数据里面去,然后当用户点击联系人列表时你jq写一个(webim-contact-item)这个样式的click触发方法,在这个方法中你需要写把聊天记录从(Demo.chatRecord.环信用户id.messages) 循环取出来,包装成HTML然后在  $("#wrapper"+Demo.selected).append() 这些HTML即可

5.实现保存聊天
    解决办法:就是在 sendTxt里面调用我们的ajax方法保存
大致就这么多,个人不建议基于官方的webIM的Demo 去修改,这次踩过这个坑了

欢迎各位 集成的朋友来访,目前我这个算是解决,等过段时间我还是自己写一个吧,不打算基于他们的Demo去改造
在此欢迎去我的博客:   www.kaven.cn 查看全部
本效果图是基于webIM的demo版本修改,主要实现了以下功能
1.实现自动登录,到聊天窗口
    解决办法:是在页面自己写参数调用 Demo.conn.open(options) 方法

2.实现最近联系人列表渲染(因为我们没有好友概念,只要跟谁最近聊天了,就算是好友了)
    解决办法:在页面通过ajax调用后台restFul地址获取联系人,然后循环调用 Demo.conn.onTextMessage(msg)方法,将消息内容为空,在msg里面设置标识为初始化加载,这样就会出现在列表里面

3.实现联系人:头像、昵称 渲染
   解决办法:很简单就是在刚才上面的方法体里面调用完之后,你的列表就会出现好友列表,这时候你只需要根据环信用户id,直接基于jq替换即可

4.实现点击联系人 渲染历史聊天记录(在发送消息的时候将聊天记录保存在我们自己的数据库)
   解决办法:在你获取最近联系人这个方法时已经返回了聊天记录列表,你需要在(Demo.chatRecord.环信用户id.messages)这个数组里面把你的消息放在这个数据里面去,然后当用户点击联系人列表时你jq写一个(webim-contact-item)这个样式的click触发方法,在这个方法中你需要写把聊天记录从(Demo.chatRecord.环信用户id.messages) 循环取出来,包装成HTML然后在  $("#wrapper"+Demo.selected).append() 这些HTML即可

5.实现保存聊天
    解决办法:就是在 sendTxt里面调用我们的ajax方法保存
大致就这么多,个人不建议基于官方的webIM的Demo 去修改,这次踩过这个坑了

欢迎各位 集成的朋友来访,目前我这个算是解决,等过段时间我还是自己写一个吧,不打算基于他们的Demo去改造
在此欢迎去我的博客:   www.kaven.cn
31
评论

Vue-cli整合环信WebIM vuejs vue webim

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

[b]非常抱歉以前写的文章给各位带来了麻烦,今天突然看到imgeek推送的邮件才记起这个[/b]其实很简单的,以前是我弄复杂了
 
1. 在index.html页面引入js文件

<script type='text/javascript' src='static/webim/webim.config.js'></script>

<script type='text/javascript' src='static/webim/strophe-1.2.8.js'></script>


2. 在main.js 赋值 ,  如下图




 
代码如下
let WebIM = require('easemob-websdk')
Vue.prototype.$webim = WebIM
WebIM.config = {
xmppURL: 'im-api.easemob.com',
apiURL: (location.protocol === 'https:' ? 'https:' : 'http:') + '//a1.easemob.com',
appkey: '你的环信appkey',
https: false,
isMultiLoginSessions: true,
isAutoLogin: true,
isWindowSDK: false,
isSandBox: false,
isDebug: false,
autoReconnectNumMax: 2,
autoReconnectInterval: 2,
isWebRTC: (/Firefox/.test(navigator.userAgent) || /WebKit/.test(navigator.userAgent)) && /^https\:$/.test(window.location.protocol),
heartBeatWait: 4500,
isHttpDNS: false,
msgStatus: true,
delivery: true,
read: true,
saveLocal: false,
encrypt: {
type: 'none'
}
}
// 创建连接
const conn = new WebIM.connection({
isMultiLoginSessions: WebIM.config.isMultiLoginSessions,
https: typeof WebIM.config.https === 'boolean' ? WebIM.config.https : location.protocol === 'https:',
url: WebIM.config.xmppURL,
heartBeatWait: WebIM.config.heartBeatWait,
autoReconnectNumMax: WebIM.config.autoReconnectNumMax,
autoReconnectInterval: WebIM.config.autoReconnectInterval,
apiUrl: WebIM.config.apiURL,
isAutoLogin: true
})
// 添加成功的回调
conn.listen({
onOpened: function (message) {
console.log('连接打开=>', message)
},
onClosed: function (message) {
console.log('连接关闭=>', message)
},
onTextMessage: function (message) {
console.log('收到文本信息message=>', message)
}
})
const options = {
apiUrl: WebIM.config.apiURL,
user: null,
pwd: null,
appKey: WebIM.config.appkey
}
Vue.prototype.$imconn = conn
Vue.prototype.$imoption = options


3.  在页面调用全局的赋值即可
 this.$imconn.open(this.$imoption) 
 
 
 
 
 
 
 
 
 
 
  查看全部
[b]非常抱歉以前写的文章给各位带来了麻烦,今天突然看到imgeek推送的邮件才记起这个[/b]
其实很简单的,以前是我弄复杂了
 
1. 在index.html页面引入js文件

<script type='text/javascript' src='static/webim/webim.config.js'></script>

<script type='text/javascript' src='static/webim/strophe-1.2.8.js'></script>


2. 在main.js 赋值 ,  如下图
QQ图片20180206105624.png

 
代码如下
let WebIM = require('easemob-websdk')
Vue.prototype.$webim = WebIM
WebIM.config = {
xmppURL: 'im-api.easemob.com',
apiURL: (location.protocol === 'https:' ? 'https:' : 'http:') + '//a1.easemob.com',
appkey: '你的环信appkey',
https: false,
isMultiLoginSessions: true,
isAutoLogin: true,
isWindowSDK: false,
isSandBox: false,
isDebug: false,
autoReconnectNumMax: 2,
autoReconnectInterval: 2,
isWebRTC: (/Firefox/.test(navigator.userAgent) || /WebKit/.test(navigator.userAgent)) && /^https\:$/.test(window.location.protocol),
heartBeatWait: 4500,
isHttpDNS: false,
msgStatus: true,
delivery: true,
read: true,
saveLocal: false,
encrypt: {
type: 'none'
}
}
// 创建连接
const conn = new WebIM.connection({
isMultiLoginSessions: WebIM.config.isMultiLoginSessions,
https: typeof WebIM.config.https === 'boolean' ? WebIM.config.https : location.protocol === 'https:',
url: WebIM.config.xmppURL,
heartBeatWait: WebIM.config.heartBeatWait,
autoReconnectNumMax: WebIM.config.autoReconnectNumMax,
autoReconnectInterval: WebIM.config.autoReconnectInterval,
apiUrl: WebIM.config.apiURL,
isAutoLogin: true
})
// 添加成功的回调
conn.listen({
onOpened: function (message) {
console.log('连接打开=>', message)
},
onClosed: function (message) {
console.log('连接关闭=>', message)
},
onTextMessage: function (message) {
console.log('收到文本信息message=>', message)
}
})
const options = {
apiUrl: WebIM.config.apiURL,
user: null,
pwd: null,
appKey: WebIM.config.appkey
}
Vue.prototype.$imconn = conn
Vue.prototype.$imoption = options



3.  在页面调用全局的赋值即可
 
this.$imconn.open(this.$imoption)
 
 
 
 
 
 
 
 
 
 
 
 
6
评论

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

产品更新 发表了文章 • 686 次浏览 • 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: {}
}
}
}
1
评论

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

产品更新 发表了文章 • 1255 次浏览 • 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 发表了文章 • 1375 次浏览 • 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
 
5
评论

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

beyond 发表了文章 • 1866 次浏览 • 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 发表了文章 • 992 次浏览 • 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 发表了文章 • 3622 次浏览 • 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 发表了文章 • 3205 次浏览 • 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 发表了文章 • 2230 次浏览 • 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]
 
直播中写的项目代码下载 ↓ ↓
27
评论

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

beyond 发表了文章 • 8548 次浏览 • 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 环信商务问题

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

环信专业服务 发表了文章 • 2197 次浏览 • 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

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

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

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

环信专业服务 发表了文章 • 1730 次浏览 • 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 环信技术支持

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

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

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

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

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