6
评论

【源码下载】一款使用环信实现的开源灵魂社交APP(含服务器) 猿匹配 开源

beyond 发表了文章 • 1435 次浏览 • 2019-07-01 10:48 • 来自相关话题

#前言
近期,环信热心开发者-穿裤衩闯天下使用环信IM开发了一款实时聊天应用,包含简单的服务器端,现在正式开源给小伙伴们。感兴趣的同学可以一起搞一下哦,详细介绍请往下看。






  上代码
服务器:VMServer
客户端:VMMatch
 
 #VMMatch
猿匹配 —— 国内首个程序猿非严肃婚恋交友应用,让我们一言不合就来场匹配吧
 
#介绍#
首先说下中文名:为什么叫这个名字呢,因为这是一个程序猿(媛)之间匹配交流的应用啊其实这是一个使用环信 IM 开发的一款开源聊天项目,涵盖了时下流行的一些聊天元素,同时已将 IM 功能封装为单独库,可以直接引用,方便使用
项目还处在初期阶段,还有许多功能需要实现,有兴趣的可以一起来
项目资源均来自于互联网,如果有侵权请联系我
 
 #下载体验
猿匹配 小米商店 审核中
猿匹配 Google Play
 
  #项目截图

























  
 #开发环境
项目基本属于在最新的Android开发环境下开发,使用Java8的一些新特性,比如Lambda表达式,
然后项目已经适配Android6.x以上的动态权限适配,以及7.x的文件选择,和8.x的通知提醒等;
· Mac OS 10.14.4
· Android Studio 3.3.2
  #项目模块儿
本项目包含两部分:
一部分是项目主模块app,这部分主要包含了项目的业务逻辑,比如匹配、信息修改、设置等
另一部分是封装成library的vmim,这是为了方便大家引用到自己的项目中做的一步封装,不用再去复杂的复制代码和资源等,
只需要将vmim以module导入到自己的项目中就行了,具体使用方式参见项目app模块儿;
 
  #功能与 TODO
IM部分功能
· [x] 链接监听
· [x] 登录注册
· [x] 会话功能
      。[x] 置顶
      。[x] 标为未读
      。[x] 删除与清空
      。[x] 草稿功能
· [x] 消息功能
      。[x] 下拉加载更多
      。[x] 消息复制(仅文字类消息)
      。[x] 消息删除
      。[x] 文本+Emoji消息收发
      。[x] 大表情消息收发
      。[x] 图片消息
        ~[x] 查看大图
        ~[ ] 保存图片
      。[x] 语音消息
        ~[x] 语音录制
        ~[x] 语音播放(可暂停,波形待优化)
        ~[x] 听筒和扬声器播放切换
      。[x] 语音实时通话功能
      。[x] 视频实时通话功能
      。[x] 通话过程中的娱乐消息收发
        ~[x] 骰子
        ~[x] 石头剪刀布
        ~[x] 大表情
      。[x] 昵称头像处理(通过回调实现)
App部分功能
· [x] 登录注册(包括业务逻辑和 IM 逻辑)
· [x] 匹配
      。[x] 提交匹配信息
      。[x] 拉取匹配信息
· [x] 聊天(这里直接加载 IM 模块儿)
· [x] 我的
      。[x] 个人信息展示
      。[x] 上传头像
      。[x] 设置昵称
      。[x] 设置签名
· [x] 设置
      。[x] 个人信息设置
      。[x] 通知提醒
      。[x] 聊天
      。[ ] 隐私(随业务部分一起完善)
      。[ ] 通用(随业务部分一起完善)
      。[ ] 帮助反馈(随业务部分一起完善)
      。[x] 关于
      。[x] 退出
· [ ] 社区
      。[ ] 发布
      。[ ] 评论
      。[ ] 收藏
      。[ ] 关注
发布功能
· [x] 多渠道打包
· [x] 签名配置
· [x] 开发与线上环境配置
· [x] 敏感信息保护
 
  #配置运行
1.首先复制config.default.gradle到config.gradle
2.配置下config.gradle环信appkey以及bugly统计Id
3.正式打包需要配置下签名信息,同时将签名文件放置在项目根目录
 
  #参与贡献
如果你有什么好的想法,或者好的实现,可以通过下边的步骤参与进来,让我们一起把这个项目做得更好,欢迎参与
1.Fork本仓库
2.新建feature_xxx分支 (单独创建一个实现你自己想法的分支)
3.提交代码
4.新建Pull Request
5.等待我们的Review & Merge
 
 #关联项目
服务器端由nodejs实现,地址见这里 VMServer
 
  #VMServer
是为Android开源项目VMMatch项目(中文名猿匹配)实现的服务端
 
  #简介
这个项目包含两部分
· 根目录:服务逻辑及API接口实现
· client目录:前端界面,和服务器端代码端放置在同一仓库下(暂未实现)
 
 #使用
简单介绍下运行环境及部署方法
1.安装nodejs开发时使用的是v10.16.0版本
2.需要安装mongodb并启动,开发使用版本4.0.10
3.下载项目到服务器,可以下载压缩包,或者用git clone命令
4.复制config_default.js到config.js,可根据自己需要修改配置文件
5.安装依赖npm install
6.全局安装pm2npm install pm2 -g 
7.运行 vmshell.sh
 




扫码备注【开源项目】邀你加入环信开源社群
 
转载自https://blog.melove.net/develop-open-source-im-match-and-server/ 
  查看全部
#前言
近期,环信热心开发者-穿裤衩闯天下使用环信IM开发了一款实时聊天应用,包含简单的服务器端,现在正式开源给小伙伴们。感兴趣的同学可以一起搞一下哦,详细介绍请往下看。

猿匹配_logo_副本.png


  上代码
服务器:VMServer
客户端:VMMatch
 
 #VMMatch
猿匹配 —— 国内首个程序猿非严肃婚恋交友应用,让我们一言不合就来场匹配吧
 
#介绍#
首先说下中文名:为什么叫这个名字呢,因为这是一个程序猿(媛)之间匹配交流的应用啊其实这是一个使用环信 IM 开发的一款开源聊天项目,涵盖了时下流行的一些聊天元素,同时已将 IM 功能封装为单独库,可以直接引用,方便使用
项目还处在初期阶段,还有许多功能需要实现,有兴趣的可以一起来
项目资源均来自于互联网,如果有侵权请联系我
 
 #下载体验
猿匹配 小米商店 审核中
猿匹配 Google Play
 
  #项目截图

1.png

2.png

3.png

4.png

5.png

6.png

  
 #开发环境
项目基本属于在最新的Android开发环境下开发,使用Java8的一些新特性,比如Lambda表达式,
然后项目已经适配Android6.x以上的动态权限适配,以及7.x的文件选择,和8.x的通知提醒等;
· Mac OS 10.14.4
· Android Studio 3.3.2
  #项目模块儿
本项目包含两部分:
一部分是项目主模块app,这部分主要包含了项目的业务逻辑,比如匹配、信息修改、设置等
另一部分是封装成library的vmim,这是为了方便大家引用到自己的项目中做的一步封装,不用再去复杂的复制代码和资源等,
只需要将vmim以module导入到自己的项目中就行了,具体使用方式参见项目app模块儿;
 
  #功能与 TODO
IM部分功能
· [x] 链接监听
· [x] 登录注册
· [x] 会话功能
      。[x] 置顶
      。[x] 标为未读
      。[x] 删除与清空
      。[x] 草稿功能
· [x] 消息功能
      。[x] 下拉加载更多
      。[x] 消息复制(仅文字类消息)
      。[x] 消息删除
      。[x] 文本+Emoji消息收发
      。[x] 大表情消息收发
      。[x] 图片消息
        ~[x] 查看大图
        ~[ ] 保存图片
      。[x] 语音消息
        ~[x] 语音录制
        ~[x] 语音播放(可暂停,波形待优化)
        ~[x] 听筒和扬声器播放切换
      。[x] 语音实时通话功能
      。[x] 视频实时通话功能
      。[x] 通话过程中的娱乐消息收发
        ~[x] 骰子
        ~[x] 石头剪刀布
        ~[x] 大表情
      。[x] 昵称头像处理(通过回调实现)
App部分功能
· [x] 登录注册(包括业务逻辑和 IM 逻辑)
· [x] 匹配
      。[x] 提交匹配信息
      。[x] 拉取匹配信息
· [x] 聊天(这里直接加载 IM 模块儿)
· [x] 我的
      。[x] 个人信息展示
      。[x] 上传头像
      。[x] 设置昵称
      。[x] 设置签名
· [x] 设置
      。[x] 个人信息设置
      。[x] 通知提醒
      。[x] 聊天
      。[ ] 隐私(随业务部分一起完善)
      。[ ] 通用(随业务部分一起完善)
      。[ ] 帮助反馈(随业务部分一起完善)
      。[x] 关于
      。[x] 退出
· [ ] 社区
      。[ ] 发布
      。[ ] 评论
      。[ ] 收藏
      。[ ] 关注
发布功能
· [x] 多渠道打包
· [x] 签名配置
· [x] 开发与线上环境配置
· [x] 敏感信息保护
 
  #配置运行
1.首先复制config.default.gradle到config.gradle
2.配置下config.gradle环信appkey以及bugly统计Id
3.正式打包需要配置下签名信息,同时将签名文件放置在项目根目录
 
  #参与贡献
如果你有什么好的想法,或者好的实现,可以通过下边的步骤参与进来,让我们一起把这个项目做得更好,欢迎参与
1.Fork本仓库
2.新建feature_xxx分支 (单独创建一个实现你自己想法的分支)
3.提交代码
4.新建Pull Request
5.等待我们的Review & Merge
 
 #关联项目
服务器端由nodejs实现,地址见这里 VMServer
 
  #VMServer
是为Android开源项目VMMatch项目(中文名猿匹配)实现的服务端
 
  #简介
这个项目包含两部分
· 根目录:服务逻辑及API接口实现
· client目录:前端界面,和服务器端代码端放置在同一仓库下(暂未实现)
 
 #使用
简单介绍下运行环境及部署方法
1.安装nodejs开发时使用的是v10.16.0版本
2.需要安装mongodb并启动,开发使用版本4.0.10
3.下载项目到服务器,可以下载压缩包,或者用git clone命令
4.复制config_default.js到config.js,可根据自己需要修改配置文件
5.安装依赖
npm install

6.全局安装pm2
npm install pm2 -g
 
7.运行 vmshell.sh
 
环信冬冬_副本.jpg

扫码备注【开源项目】邀你加入环信开源社群
 
转载自https://blog.melove.net/develop-open-source-im-match-and-server/ 
 
4
评论

在微信小程序里实现聊天室 聊天室 小程序

Tolazy 发表了文章 • 3001 次浏览 • 2019-04-19 17:49 • 来自相关话题

第一次搞小程序,老板让我实现一个聊天室功能,压力山大啊。
花了几天时间研究比较了一下方案,最后基于环信的小程序SDK 开发了一个聊天室。
 
准备工作
下载环信 小程序demo+sdkgit clone https://github.com/easemob/webim-weixin-xcx创建一个文件夹,将 demo 中的文件 comps、images、sdk、utils 拷贝到新的文件,文件目录说明



集成
登录环信没什么可说的,这里选择的是使用 username/password 登录,和demo中的一样,文件没有进行任何更改


在app.js 中注册的 WebIM.conn.listen, 然后在 登陆成功的回调 onOpened 设置的跳转页面,并将登陆的 username 赋给 myName,传到新的页面中使用


修改 roomlist.js 获取聊天室列表,是分页获取的,这里先偷个懒,获取了第一页 20 个聊天室


然后将listChatrooms() 分别在onLoad、onShow 内,更改下,将原有的 listGroups() 替换掉然后在roomlist.wxml 修改对应的 变量绑定名称





demo中的group.js 中,获取到的是当前登陆账号已加入的群组,咱们做的是聊天室功能,所以需要有一个加入的操作,找roomlist.js 中找到 into_room: function (event),然后填写加入聊天室的方法, 我是直接在当前这个里面加的跳转到聊天页面,并将当前登陆的IDmyName,聊天室IDgroupID,聊天室名称your 传给新页面


Ex:监听是否加入聊天室成功的回调是在 onPresence 中,type:memberJoinChatRoomSuccess,正常是监听这个回调跳转页面,有点麻烦就直接这样吧到会话页面后,需要修改一下对应的消息格式,在comps/chat/suit 目录下,将里面的文件对应的 js 文件根据文档给聊天室发送消息 格式进行修改,聊天室消息和群组消息不同,所以我目前是直接将getSendToParam()、isGroupChat() 注释,改成下面这样,demo 中下面还有代码的,这里就用 …… 代替了





就这样了,简单集成聊天室功能,demo中的UI 是开源的,可以根据自己的需求更改~下面是具体实现过程。代码也放在github 上了,有需要的兄弟自取。demo下载地址:https://github.com/lizgDonkey/room-xcx 查看全部
第一次搞小程序,老板让我实现一个聊天室功能,压力山大啊。
花了几天时间研究比较了一下方案,最后基于环信的小程序SDK 开发了一个聊天室。
 
准备工作
  1. 下载环信 小程序demo+sdk
    git clone https://github.com/easemob/webim-weixin-xcx
  2. 创建一个文件夹,将 demo 中的文件 comps、images、sdk、utils 拷贝到新的文件,文件目录说明
    ml.png

集成
  1. 登录环信没什么可说的,这里选择的是使用 username/password 登录,和demo中的一样,文件没有进行任何更改
    login.png
  2. 在app.js 中注册的 WebIM.conn.listen, 然后在 登陆成功的回调 onOpened 设置的跳转页面,并将登陆的 username 赋给 myName,传到新的页面中使用
    tz.png
  3. 修改 roomlist.js 获取聊天室列表,是分页获取的,这里先偷个懒,获取了第一页 20 个聊天室
    getroom.png
    然后将listChatrooms() 分别在onLoad、onShow 内,更改下,将原有的 listGroups() 替换掉
  4. 然后在roomlist.wxml 修改对应的 变量绑定名称
    listui.png
    list.png
  5. demo中的group.js 中,获取到的是当前登陆账号已加入的群组,咱们做的是聊天室功能,所以需要有一个加入的操作,找roomlist.js 中找到 into_room: function (event),然后填写加入聊天室的方法, 我是直接在当前这个里面加的跳转到聊天页面,并将当前登陆的IDmyName,聊天室IDgroupID,聊天室名称your 传给新页面
    joinrom.png
    Ex:监听是否加入聊天室成功的回调是在 onPresence 中,type:memberJoinChatRoomSuccess,正常是监听这个回调跳转页面,有点麻烦就直接这样吧
  6. 到会话页面后,需要修改一下对应的消息格式,在comps/chat/suit 目录下,将里面的文件对应的 js 文件根据文档给聊天室发送消息 格式进行修改,聊天室消息和群组消息不同,所以我目前是直接将getSendToParam()、isGroupChat() 注释,改成下面这样,demo 中下面还有代码的,这里就用 …… 代替了
    send.png
    chat.png
    就这样了,简单集成聊天室功能,demo中的UI 是开源的,可以根据自己的需求更改~下面是具体实现过程。代码也放在github 上了,有需要的兄弟自取。demo下载地址:https://github.com/lizgDonkey/room-xcx

4
评论

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

beyond 发表了文章 • 50223 次浏览 • 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
}














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

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

dujiepeng 发表了文章 • 22938 次浏览 • 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...小伙伴们还有什么想知道欢迎跟帖提出。
 
13
回复

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

xiaoyan2015 回复了问题 • 13 人关注 • 16684 次浏览 • 2019-03-14 13:52 • 来自相关话题

0
评论

iOS SDK 日志文件的导出 日志

kijieoeew 发表了文章 • 157 次浏览 • 2019-07-05 12:32 • 来自相关话题

环信SDK提供2.x和3.x两个版本。初始化SDK成功,会写入日志文件到本地。

日志文件路径如下:
2.x 已停止维护3.5.4之前(不含3.5.4) 沙箱Documents/HyphenateSDK/easemoblog 3.5.4之后(含3.5.4)    沙箱Library/Application Support/HyphenateSDK/easemobLog 

获取方法:

模拟器 
打印NSHomeDirectory()
      



复制路径,打开Finder前往
     



访问到沙箱目录
      




真机
打开Xcode连接设备,前往Xcode --> Window --> Devices and Simulators
      



进入Devices界面
     



选择Download Container之后会下载到本地一个.xcappdata文件。选中这个文件鼠标右键显示包内容。
     



访问到沙箱目录
      查看全部
环信SDK提供2.x和3.x两个版本。初始化SDK成功,会写入日志文件到本地。

日志文件路径如下:
  • 2.x 已停止维护
  • 3.5.4之前(不含3.5.4) 沙箱Documents/HyphenateSDK/easemoblog 
  • 3.5.4之后(含3.5.4)    沙箱Library/Application Support/HyphenateSDK/easemobLog 


获取方法:

模拟器 
  • 打印NSHomeDirectory()

      
模拟器1.png

  • 复制路径,打开Finder前往

     
模拟器2.png

  • 访问到沙箱目录

      
模拟器3_路径.png


真机
  • 打开Xcode连接设备,前往Xcode --> Window --> Devices and Simulators

      
真机1.png

  • 进入Devices界面

     
真机2.png

  • 选择Download Container之后会下载到本地一个.xcappdata文件。选中这个文件鼠标右键显示包内容。

     
真机3.png

  • 访问到沙箱目录

     
真机4_路径.png
0
评论

【突破运营瓶颈:解构小程序增长模型】 小程序开发

beyond 发表了文章 • 217 次浏览 • 2019-06-25 11:26 • 来自相关话题

即速应用小程序线下沙龙---成都、重庆站
----------------------------
【活动主题】
1、现状解析:BATT背后的小程序战略
2、运营思维:高留存高转化的隐藏逻辑
3、案例分享:引爆流量的推广套路与技巧
4、活动复盘:如何打造一场2天涨粉六万的活动
----------------------------
【免费报名链接】
6月29日成都站:
http://sina.lt/gqpE
6月30日重庆站:
http://sina.lt/gqpJ
----------------------------
活动咨询:18145862129(微信同号)





  查看全部
即速应用小程序线下沙龙---成都、重庆站
----------------------------
【活动主题】
1、现状解析:BATT背后的小程序战略
2、运营思维:高留存高转化的隐藏逻辑
3、案例分享:引爆流量的推广套路与技巧
4、活动复盘:如何打造一场2天涨粉六万的活动
----------------------------
【免费报名链接】
6月29日成都站:
http://sina.lt/gqpE
6月30日重庆站:
http://sina.lt/gqpJ
----------------------------
活动咨询:18145862129(微信同号)

微信图片_20190625111604.jpg

 
0
回复

环信小程序音频播放 音频播放

回复

用户3794213955 发起了问题 • 1 人关注 • 387 次浏览 • 2019-06-25 10:33 • 来自相关话题

0
评论

(客服云)iOS访客端接收图文消息不展示封面图片怎么办? 客服云 图文消息

kijieoeew 发表了文章 • 280 次浏览 • 2019-06-10 10:16 • 来自相关话题

将HDBubbleView.h+Article.m中的- (instancetype)initWithDictionary:(NSDictionary *)dic方法改成下面这样就可以了
- (instancetype)initWithDictionary:(NSDictionary *)dic {
self = [super init];
if (dic != nil) {
_type = HDCellTypeSub;
_title = [dic objectForKey:@"title"];
double createTime = [[NSDate date] timeIntervalSince1970] * 1000;
if ([dic objectForKey:@"createdTime"]) {
createTime = [[dic objectForKey:@"createdTime"] doubleValue];
}
_createTime = [self timeFormatter:createTime/1000];
_digest = [dic objectForKey:@"digest"];

// //封面展示缩略图
// NSString *thumbUrl = [dic objectForKey:@"thumbUrl"];
// if (thumbUrl) {
// if (thumbUrl && [thumbUrl hasPrefix:@"http"]) {
// _imageUrl = thumbUrl;
// }else {
// _imageUrl = [NSString stringWithFormat:@"%@%@",[HDClient.sharedClient kefuRestServer], thumbUrl];
// }
// }

// 封面展示原图
NSString *picUrl = [dic objectForKey:@"picurl"];
if (picUrl) {
if (picUrl && [picUrl hasPrefix:@"http"]) {
_imageUrl = picUrl;
}else {
_imageUrl = [NSString stringWithFormat:@"%@%@",[HDClient.sharedClient kefuRestServer], picUrl];
}
}

NSString *detailUrl = [dic objectForKey:@"url"];
if (detailUrl) {
if (detailUrl && [detailUrl hasPrefix:@"http"]) {
_url = detailUrl;
}else {
_url = [NSString stringWithFormat:@"%@%@",[HDClient.sharedClient kefuRestServer], detailUrl];
}
}
}
return self;
} 查看全部
HDBubbleView.h+Article.m中的- (instancetype)initWithDictionary:(NSDictionary *)dic方法改成下面这样就可以了
- (instancetype)initWithDictionary:(NSDictionary *)dic {
self = [super init];
if (dic != nil) {
_type = HDCellTypeSub;
_title = [dic objectForKey:@"title"];
double createTime = [[NSDate date] timeIntervalSince1970] * 1000;
if ([dic objectForKey:@"createdTime"]) {
createTime = [[dic objectForKey:@"createdTime"] doubleValue];
}
_createTime = [self timeFormatter:createTime/1000];
_digest = [dic objectForKey:@"digest"];

// //封面展示缩略图
// NSString *thumbUrl = [dic objectForKey:@"thumbUrl"];
// if (thumbUrl) {
// if (thumbUrl && [thumbUrl hasPrefix:@"http"]) {
// _imageUrl = thumbUrl;
// }else {
// _imageUrl = [NSString stringWithFormat:@"%@%@",[HDClient.sharedClient kefuRestServer], thumbUrl];
// }
// }

// 封面展示原图
NSString *picUrl = [dic objectForKey:@"picurl"];
if (picUrl) {
if (picUrl && [picUrl hasPrefix:@"http"]) {
_imageUrl = picUrl;
}else {
_imageUrl = [NSString stringWithFormat:@"%@%@",[HDClient.sharedClient kefuRestServer], picUrl];
}
}

NSString *detailUrl = [dic objectForKey:@"url"];
if (detailUrl) {
if (detailUrl && [detailUrl hasPrefix:@"http"]) {
_url = detailUrl;
}else {
_url = [NSString stringWithFormat:@"%@%@",[HDClient.sharedClient kefuRestServer], detailUrl];
}
}
}
return self;
}
0
评论

(客服云)企业版机器人如何设置转人工 客服云

kijieoeew 发表了文章 • 291 次浏览 • 2019-06-06 15:59 • 来自相关话题

注意:只购买了企业版机器人,不使用客服系统的同学,可忽略第一、二步。
 
一、管理员模式--智能机器人--机器人设置,选择【转人工设置】,这里可以设置“转人工时间段”、“限制转人工提示语”和“转人工指定技能组”。




 
二、还是这个页面,选择【基础设置】,然后点击【机器人管理】,跳转到机器人管理页面。
    有些同学点击后没反应,那有可能是被浏览器拦截了,手动释放即可。




 
三、来到机器人管理页面,找到机器人设置--转人工设置,先【添加转人工参数】,添加时“参数名”随便写,“参数值”必须是技能组的名称,否则无法转接到此技能组。
然后打开【转人工指令】的开关,配置“转人工指令”以及“参数”
注意:在这里设置了“转人工指令”及其“参数”,第1步的“转人工指定技能组”则失效,以这里为准。 查看全部
注意:只购买了企业版机器人,不使用客服系统的同学,可忽略第一、二步。
 
一、管理员模式--智能机器人--机器人设置,选择【转人工设置】,这里可以设置“转人工时间段”、“限制转人工提示语”和“转人工指定技能组”。
企业版机器人转人工设置1.png

 
二、还是这个页面,选择【基础设置】,然后点击【机器人管理】,跳转到机器人管理页面。
    有些同学点击后没反应,那有可能是被浏览器拦截了,手动释放即可。
企业版机器人转人工设置2.png

 
三、来到机器人管理页面,找到机器人设置--转人工设置,先【添加转人工参数】,添加时“参数名”随便写,“参数值”必须是技能组的名称,否则无法转接到此技能组。
然后打开【转人工指令】的开关,配置“转人工指令”以及“参数”
注意:在这里设置了“转人工指令”及其“参数”,第1步的“转人工指定技能组”则失效,以这里为准。
企业版机器人转人工设置3.png
0
回复

网上遇到ag平台网站不给出该怎么办? 环信_Android

回复

小周豪 发起了问题 • 1 人关注 • 563 次浏览 • 2019-05-30 16:25 • 来自相关话题

0
评论

重磅开源!业内首个 React Native 转微信小程序引擎 react native

sunshine123 发表了文章 • 439 次浏览 • 2019-05-29 10:27 • 来自相关话题

前言

Alita 是一套由京东 ARES 多端技术团队打造的 React Native 代码转换引擎工具。它对 React 语法有全新的处理方式,支持在运行时处理 React 语法,实现了 React Native 和微信小程序之间的主要组件对齐,可以用简洁、高效的方式把 React Native 代码转换成微信小程序代码。
Alita 不是一个新框架,不会有额外的学习成本,她只是一套转换引擎工具,可以把 React Native 扩展到微信小程序端,大大降低多终端上的业务开发成本。以后移动端开发者只需要掌握 React Native 技术栈,就可以轻松实现 Android、iOS、Windows、Web(已有开源项目支持)、微信小程序等多端渲染。
 
Alita 项目

开源地址: https://github.com/areslabs/alita
React Native 





 
微信小程序






Alita 具备哪些能力
Alita 的设计目标是要尽可能无损的转换 RN 应用,即使是已经存在的 RN 应用,我们也希望只做少量的修改就可以在微信小程序平台运行,所以这就要求 Alita 必须对 React 语法有足够的支持,包括 JSX 语法,React 生命周期等

JSX 语法

Alita 支持大部分 JSX 语法,这意味着什么呢?意味着你可以使用 React 自由的代码方式以及强大的组件化支持,意味着你可以延用自己的编程习惯,不需要对已有的 RN 代码进行过多修改。这主要得益于 Alita 是在运行时处理 JSX 语法,而不是现在社区上常见的编译时处理。

因此 Alita 没有诸如以下社区其他方案的限制:

JSX 只允许出现的组件的 render 方法中
不能通过 props 传递 JSX 片段或者返回 JSX 的函数
不支持在属性上传递函数

Alita 转换以下代码毫无压力:





生命周期

Alita 支持所有的 React 生命周期。微信小程序本身给组件提供了生命周期,但是这些生命周期在写法和调用上与 React 存在着一些的差异,另外 React 生命周期更加丰富。Alita 在支持 React 生命周期的时候,把它们分为了两类:

第一类: componentDidMount,componentDidUpdate,componentWillUnmount 这 3 个生命周期在微信小程序上有相应的触发时机,比如ready, detached,只需要在微信小程序相关回调触发的时候,调用 React 组件对应的方法即可。
另外一类,在微信小程序端没有直接对应的生命周期,对于这一类生命周期,主要是借助于 Alita 内部嵌入的 mini-react,触发相应的回调。通过这两种方式,Alita 实现了 React 生命周期的对齐。

此外,Alita 抹平了 RN 和微信小程序之间的事件及样式差异,能够无损得将 RN事件和样式传递到微信小程序中。

RN 基本组件和 API

RN 提供了很多基本的组件和 API,这些组件加上 React 开发方式,共同构成了 RN 应用。Alita 除了要对 React 语法进行处理,还必须在预先在微信小程序平台对齐出一套与 RN 等效的组件和 API。比如在 RN 端,请求网络的方式是通过 fetch 方式,但是微信小程序本身并不存在 fetch 方法,就这要求 Alita 必须基于微信小程序的网络 API,在微信小程序上实现一个 fetch 方法。 同样的以 RN 组件 FlatList 为例,当 Alita 把 RN 应用转化为微信小程序代码之后,FlatList 在微信小程序平台并不存在,需要预先在微信小程序平台实现小程序版本的 FlatList 。这个预先处理的过程,我们称之为对齐,对齐的过程包括组件,组件属性,API 等。





Redux

Redux 是 JavaScript 状态容器,提供可预测化的状态管理,并且易于测试,是当前 React 技术栈流行的数据层管理方案。得益于 Alita 运行阶段处理 React 逻辑的设计,Alita 支持将使用 Redux 的 RN 应用转换成微信小程序。

动画

动画是每一个 app 不可或缺的能力,RN 和微信小程序的动画实现差异很大,RN 的动画能力要强于微信小程序,想要完全把 RN 的动画转化至微信小程序的是不可能的。为此我们封装了一套动画组件库,这一套动画组件库涵盖了所有微信小程序的动画能力,所有使用此动画库开发的动画,都可以无损转化到小程序端。
React Native





微信小程序





Alita 原理简介

那么 Alita 是如何将 RN 转换运行在微信小程序上的呢?我们不打算在这篇文章深入剖析,简单从编译阶段和运行阶段来说明。

编译阶段:我们通过静态分析 RN 源码,将其转换为微信小程序可以识别的代码,首先我们会将 JSX 语法转换为微信小程序的 wxml 模块语法,RN 组件在这个阶段会被转换为微信小程序自定义组件,一般会产生微信小程序需要的 4 个文件 wxml, js,json 和 wxss。 此外,我们会保留一份 babel 转译之后的 RN 源码,这份代码里面所有的 JSX 都已经由 React.createElement 替换,运行阶段,会使用这个能被微信小程序的 JavaScript 运行环境识别的源码。

运行阶段:Alita 内部嵌入了一个 mini-react,这个 mini-react 在运行阶段会运行上文所说的转译后的 RN 源码,与 React 一样,递归(React Fiber 之后,不再是递给的方式)的处理组件树,调用组件的 render 方法,调用组件生命周期,计算 context 等。另外 React 在运行的过程中有一个重要的 reconciliation 算法(即 virtual-dom),mini-react 同样提供了简化版本的 reconciliation 来决定组件的销毁与复用。mini-react 执行完之后,最终会输出一个描述视图的数据结构,这份数据结构提供了微信小程序渲染所需要的所有数据。微信小程序通过桥接模块与 mini-react 通信,获取到这一份数据,通过 setData 的方式设置到微信小程序模版上,从而渲染出视图。





Alita 组件库

在项目开发中,仅仅使用 RN 基本组件和 API,是很难满足需要的。我们在使用 Alita 的过程中,积累了很多常用的三端组件,包括ScrollTabView,ViewPager,SegmentedControl等等,我们正在剥离和梳理这些组件,很快会发布兼容三端的 Alita 组件库。此组件库也是我们日后的工作重点之一,我们将会不断优化和扩展新组件。

除了 Alita 组件库,我们还提供了扩展方式,开发者可以很方便的把本团队的基本 UI 组件库扩展到微信小程序端,然后通过 Alita 把使用了这些组件的 RN 应用运行在微信小程序平台。





结语

我们将不断拓展 Alita 的能力,支持更多端能力,如:百度小程序、头条小程序等,继续完善开发者体验,提高开发者效率,帮助更多开发者。

我们也在考察 Flutter 这一新的跨端方案和微信小程序融合转化的可行性。

我们十分重视开源社区的反馈和建议,会不断从中汲取养分,让 Alita 变得更加强大。

意见反馈

如果有任何的意见或者建议,欢迎在 Github 创建 issue,感谢你的支持和贡献。
  查看全部
前言

Alita 是一套由京东 ARES 多端技术团队打造的 React Native 代码转换引擎工具。它对 React 语法有全新的处理方式,支持在运行时处理 React 语法,实现了 React Native 和微信小程序之间的主要组件对齐,可以用简洁、高效的方式把 React Native 代码转换成微信小程序代码。
Alita 不是一个新框架,不会有额外的学习成本,她只是一套转换引擎工具,可以把 React Native 扩展到微信小程序端,大大降低多终端上的业务开发成本。以后移动端开发者只需要掌握 React Native 技术栈,就可以轻松实现 Android、iOS、Windows、Web(已有开源项目支持)、微信小程序等多端渲染。
 
Alita 项目

开源地址: https://github.com/areslabs/alita
React Native 

11.gif

 
微信小程序

1.gif


Alita 具备哪些能力
Alita 的设计目标是要尽可能无损的转换 RN 应用,即使是已经存在的 RN 应用,我们也希望只做少量的修改就可以在微信小程序平台运行,所以这就要求 Alita 必须对 React 语法有足够的支持,包括 JSX 语法,React 生命周期等

JSX 语法

Alita 支持大部分 JSX 语法,这意味着什么呢?意味着你可以使用 React 自由的代码方式以及强大的组件化支持,意味着你可以延用自己的编程习惯,不需要对已有的 RN 代码进行过多修改。这主要得益于 Alita 是在运行时处理 JSX 语法,而不是现在社区上常见的编译时处理。

因此 Alita 没有诸如以下社区其他方案的限制:

JSX 只允许出现的组件的 render 方法中
不能通过 props 传递 JSX 片段或者返回 JSX 的函数
不支持在属性上传递函数

Alita 转换以下代码毫无压力:

2.jpg

生命周期

Alita 支持所有的 React 生命周期。微信小程序本身给组件提供了生命周期,但是这些生命周期在写法和调用上与 React 存在着一些的差异,另外 React 生命周期更加丰富。Alita 在支持 React 生命周期的时候,把它们分为了两类:

第一类: componentDidMount,componentDidUpdate,componentWillUnmount 这 3 个生命周期在微信小程序上有相应的触发时机,比如ready, detached,只需要在微信小程序相关回调触发的时候,调用 React 组件对应的方法即可。
另外一类,在微信小程序端没有直接对应的生命周期,对于这一类生命周期,主要是借助于 Alita 内部嵌入的 mini-react,触发相应的回调。通过这两种方式,Alita 实现了 React 生命周期的对齐。

此外,Alita 抹平了 RN 和微信小程序之间的事件及样式差异,能够无损得将 RN事件和样式传递到微信小程序中。

RN 基本组件和 API

RN 提供了很多基本的组件和 API,这些组件加上 React 开发方式,共同构成了 RN 应用。Alita 除了要对 React 语法进行处理,还必须在预先在微信小程序平台对齐出一套与 RN 等效的组件和 API。比如在 RN 端,请求网络的方式是通过 fetch 方式,但是微信小程序本身并不存在 fetch 方法,就这要求 Alita 必须基于微信小程序的网络 API,在微信小程序上实现一个 fetch 方法。 同样的以 RN 组件 FlatList 为例,当 Alita 把 RN 应用转化为微信小程序代码之后,FlatList 在微信小程序平台并不存在,需要预先在微信小程序平台实现小程序版本的 FlatList 。这个预先处理的过程,我们称之为对齐,对齐的过程包括组件,组件属性,API 等。

3.jpg

Redux

Redux 是 JavaScript 状态容器,提供可预测化的状态管理,并且易于测试,是当前 React 技术栈流行的数据层管理方案。得益于 Alita 运行阶段处理 React 逻辑的设计,Alita 支持将使用 Redux 的 RN 应用转换成微信小程序。

动画

动画是每一个 app 不可或缺的能力,RN 和微信小程序的动画实现差异很大,RN 的动画能力要强于微信小程序,想要完全把 RN 的动画转化至微信小程序的是不可能的。为此我们封装了一套动画组件库,这一套动画组件库涵盖了所有微信小程序的动画能力,所有使用此动画库开发的动画,都可以无损转化到小程序端。
React Native

5.gif

微信小程序

6.gif

Alita 原理简介

那么 Alita 是如何将 RN 转换运行在微信小程序上的呢?我们不打算在这篇文章深入剖析,简单从编译阶段和运行阶段来说明。

编译阶段:我们通过静态分析 RN 源码,将其转换为微信小程序可以识别的代码,首先我们会将 JSX 语法转换为微信小程序的 wxml 模块语法,RN 组件在这个阶段会被转换为微信小程序自定义组件,一般会产生微信小程序需要的 4 个文件 wxml, js,json 和 wxss。 此外,我们会保留一份 babel 转译之后的 RN 源码,这份代码里面所有的 JSX 都已经由 React.createElement 替换,运行阶段,会使用这个能被微信小程序的 JavaScript 运行环境识别的源码。

运行阶段:Alita 内部嵌入了一个 mini-react,这个 mini-react 在运行阶段会运行上文所说的转译后的 RN 源码,与 React 一样,递归(React Fiber 之后,不再是递给的方式)的处理组件树,调用组件的 render 方法,调用组件生命周期,计算 context 等。另外 React 在运行的过程中有一个重要的 reconciliation 算法(即 virtual-dom),mini-react 同样提供了简化版本的 reconciliation 来决定组件的销毁与复用。mini-react 执行完之后,最终会输出一个描述视图的数据结构,这份数据结构提供了微信小程序渲染所需要的所有数据。微信小程序通过桥接模块与 mini-react 通信,获取到这一份数据,通过 setData 的方式设置到微信小程序模版上,从而渲染出视图。

7.jpg

Alita 组件库

在项目开发中,仅仅使用 RN 基本组件和 API,是很难满足需要的。我们在使用 Alita 的过程中,积累了很多常用的三端组件,包括ScrollTabView,ViewPager,SegmentedControl等等,我们正在剥离和梳理这些组件,很快会发布兼容三端的 Alita 组件库。此组件库也是我们日后的工作重点之一,我们将会不断优化和扩展新组件。

除了 Alita 组件库,我们还提供了扩展方式,开发者可以很方便的把本团队的基本 UI 组件库扩展到微信小程序端,然后通过 Alita 把使用了这些组件的 RN 应用运行在微信小程序平台。

8.jpg

结语

我们将不断拓展 Alita 的能力,支持更多端能力,如:百度小程序、头条小程序等,继续完善开发者体验,提高开发者效率,帮助更多开发者。

我们也在考察 Flutter 这一新的跨端方案和微信小程序融合转化的可行性。

我们十分重视开源社区的反馈和建议,会不断从中汲取养分,让 Alita 变得更加强大。

意见反馈

如果有任何的意见或者建议,欢迎在 Github 创建 issue,感谢你的支持和贡献。
 
0
评论

GitHub 开源跨平台神器 Electron 实践 Electron 实践

beyond 发表了文章 • 382 次浏览 • 2019-05-22 14:14 • 来自相关话题

认识 Electron

Electron是由GitHub开发,用HTML、CSS 和 JavaScript来构建跨平台桌面应用程序的一个开源库。Electron通过将Chromium和Node.js合并到同一个运行时环境中,并将其打包为Mac、Windows和Linux系统下的应用。Electron于2013年作为构建GitHub上可编程的文本编辑器Atom的框架而被开发出来。

这不意味着Electron是绑定了GUI库的JavaScript。相反,Electron使用Web页面作为它的GUI,所以你能把它看作成一个被JavaScript控制的,精简版的Chromium浏览器。

Electron的版本更新很频繁,基本保持在1周发布一个小版本,每季度发布一个大版本。除了稳定版外还有Beta版和Nightly(最新功能试用版),Chromium更新时,Electron也会跟着更新。

为什么选择Electron

如今的桌面应用软件基本都需要跨平台运行,类似于MFC、Duilib等技术都无法满足需求。当今的跨平台桌面应用软件开发以使用QT,Electron较多。

QT跨平台开发

Qt是一个跨平台C++图形用户界面应用程序开发框架。它既可以开发GUI程序,也可用于开发非GUI程序,比如控制台工具和服务器。作为使用C++语言开发的框架,他的优缺点十分明显。

优点:

运行效率高;

架构健壮,性能强大。

缺点:

开发周期长;

需要开发者具有C++编程能力;

QT是一款收费软件,如果不想缴费购买License,又想用QT开发商业(闭源)程序,必须遵守LGPL协议,开源使用了LGPL库的源代码。

Electron桌面软件开发

Electron最早用于开发GitHub上的可编程文本编辑器Atom,它是一个借助Node.js和Chromium, 利用HTML/CSS/JavaScript语言创建桌面应用的框架。与之类似的还有NW.js, 但是NW.js社区发展基本处于停滞状态,更新也较慢。

优点:

使用JavaScript语言作为开发语言,方便前端开发者轻松开发桌面应用,原C++/Java语言开发者,也可以很快入手开发;

方便调试,提供了浏览器的开发者工具,轻松断点调试;

丰富的Web前端UI资源,可以快速制作绚丽的界面;

快速构建,迭代开发。最复杂的底层浏览器部分Electron已经帮你搞定,你只需要负责上层界面及业务逻辑的开发。Electron还提供了热更新功能,只需加载更新模块,会自动帮你检查更新并后台下载;

崩溃日志报告。轻松收集崩溃日志,定位错误代码;

C++插件扩展;

代码开源。Electron是GitHub上的开源项目,开发者有疑问可以在GitHub社区(https://github.com/electron/electron)上直接提issue,高级开发者可以修改Electron底层代码,订制自己的Elcetron。

缺点:

打包文件太大。Electron毕竟是一个浏览器,最小的应用安装包也要几十兆大小;

无法代码加密。和Web开发类似,使用者可以在开发者工具看到应用的客户端代码,商业软件需要代码加密的可以选择重要功能在服务端实现,桌面应用请求,或使用Node文件实现;

运行耗资源。浏览器通病,Electron应用也是多进程系统,启动几个Electron应用还好,如果太多会造成机器卡顿;

不支持XP系统,Node.js并不支持XP系统。

综上,如果你想快速的开发出炫酷的桌面应用,而又对系统限制不大,建议你选择Electron,如果你是一个前端开发人员,又想制作桌面应用,建议你选择Electron。

创建一个简单的应用

环境安装

Electron应用本质上是一个Node.js应用程序,需要安装Node.js,到官网(http://Node.js.cn/download/)安装即可。安装完后,在命令行窗口中分别输入node -v和npm -v来查看Node和NPM的版本。

初始化应用
与Node.js模块相同,应用的入口为package.json 文件,该文件可以在一个文件夹下使用npm init命令,按照提示填充各项信息生成。 一个最基本的Electron 应用一般来说会有如下的目录结构:





 main.js是主进程,完成窗口的创建,url或html文件的加载。GitHub上提供了一个简单的Electron应用https://github.com/electron/el ... t.git,可供学习参考。

使用C++插件扩展功能
对于复杂的业务逻辑,可以开发成C++插件Node,C++插件主要完成一些复杂的逻辑功能,供Electron调用。Electron对于C++生成的Node插件引用功能来自于Node.js,可以使用require() 函数加载到工程中,像普通的模块一样使用。JavaScript 与C++ 库之间接口使用V8引擎,如下图所示:





 插件开发环境

C++插件的开发需要安装node-gyp、Python 2.76,Windows下开发还要安装Visual Studio。
每个插件都有一个工程文件binging.gyp,配置了源文件、include路径及链接库,目标文件,使用的编译器等,格式如下:





 
C++与JavaScript通过V8交互执行的整体过程如下图所示:





 
C++可以使用Napi接口,模块的加载使用宏NODEAPIMODULE(hello, Init),导出的JavaScript接口在Init中定义,示例如下:





 
编译C++插件使用命令如下:





 
生成的C++插件为node文件,如hello.node 在JavaScript中调用C++插件直接使用require函数,代码hello.js如下:





 JavaScript就可以调用C++的接口了,执行命令node hello.js,输出"world"。

C++中调用JavaScript传递的回调函数需要使用libuv库,libuv实现了Node.js的事件循环、工作线程、以及平台所有的的异步操作的C库。 具体参考示例代码https://github.com/nodejs/node-addon-examples

Electron打包

Electron应用打包可以使用electron-builder和electron-packager,推荐使用electron-builder,打包命令为npm run builder,可以使用参数配置生成的安装包的操作系统。

环信IM桌面端

环信的IM桌面端SDK提供了JavaScript接口,并且使用Electron框架开发的示例Demo,可以让任何一个前端人员在极短时间内搭建出一款同时在Mac、Windows上运行的即时通讯软件,拥有单聊、群聊和聊天室功能,支持文字、表情、图片、音视频等消息格式,开发时间短、界面美观,可以为开发者提供方便快捷的桌面端即时通讯解决方案。

下载地址:http://www.easemob.com/download/im
集成说明:http://docs-im.easemob.com/im/pc/intro/integration

作者:李小明,现就职于环信,高级软件开发工程师,负责IM桌面端软件的研发,以C++、Node.js为开发语言,从事多年桌面软件开发经验,对行业前沿技术永远不懈追求。 查看全部
认识 Electron

Electron是由GitHub开发,用HTML、CSS 和 JavaScript来构建跨平台桌面应用程序的一个开源库。Electron通过将Chromium和Node.js合并到同一个运行时环境中,并将其打包为Mac、Windows和Linux系统下的应用。Electron于2013年作为构建GitHub上可编程的文本编辑器Atom的框架而被开发出来。

这不意味着Electron是绑定了GUI库的JavaScript。相反,Electron使用Web页面作为它的GUI,所以你能把它看作成一个被JavaScript控制的,精简版的Chromium浏览器。

Electron的版本更新很频繁,基本保持在1周发布一个小版本,每季度发布一个大版本。除了稳定版外还有Beta版和Nightly(最新功能试用版),Chromium更新时,Electron也会跟着更新。

为什么选择Electron

如今的桌面应用软件基本都需要跨平台运行,类似于MFC、Duilib等技术都无法满足需求。当今的跨平台桌面应用软件开发以使用QT,Electron较多。

QT跨平台开发

Qt是一个跨平台C++图形用户界面应用程序开发框架。它既可以开发GUI程序,也可用于开发非GUI程序,比如控制台工具和服务器。作为使用C++语言开发的框架,他的优缺点十分明显。

优点:

运行效率高;

架构健壮,性能强大。

缺点:

开发周期长;

需要开发者具有C++编程能力;

QT是一款收费软件,如果不想缴费购买License,又想用QT开发商业(闭源)程序,必须遵守LGPL协议,开源使用了LGPL库的源代码。

Electron桌面软件开发

Electron最早用于开发GitHub上的可编程文本编辑器Atom,它是一个借助Node.js和Chromium, 利用HTML/CSS/JavaScript语言创建桌面应用的框架。与之类似的还有NW.js, 但是NW.js社区发展基本处于停滞状态,更新也较慢。

优点:

使用JavaScript语言作为开发语言,方便前端开发者轻松开发桌面应用,原C++/Java语言开发者,也可以很快入手开发;

方便调试,提供了浏览器的开发者工具,轻松断点调试;

丰富的Web前端UI资源,可以快速制作绚丽的界面;

快速构建,迭代开发。最复杂的底层浏览器部分Electron已经帮你搞定,你只需要负责上层界面及业务逻辑的开发。Electron还提供了热更新功能,只需加载更新模块,会自动帮你检查更新并后台下载;

崩溃日志报告。轻松收集崩溃日志,定位错误代码;

C++插件扩展;

代码开源。Electron是GitHub上的开源项目,开发者有疑问可以在GitHub社区(https://github.com/electron/electron)上直接提issue,高级开发者可以修改Electron底层代码,订制自己的Elcetron。

缺点:

打包文件太大。Electron毕竟是一个浏览器,最小的应用安装包也要几十兆大小;

无法代码加密。和Web开发类似,使用者可以在开发者工具看到应用的客户端代码,商业软件需要代码加密的可以选择重要功能在服务端实现,桌面应用请求,或使用Node文件实现;

运行耗资源。浏览器通病,Electron应用也是多进程系统,启动几个Electron应用还好,如果太多会造成机器卡顿;

不支持XP系统,Node.js并不支持XP系统。

综上,如果你想快速的开发出炫酷的桌面应用,而又对系统限制不大,建议你选择Electron,如果你是一个前端开发人员,又想制作桌面应用,建议你选择Electron。

创建一个简单的应用

环境安装

Electron应用本质上是一个Node.js应用程序,需要安装Node.js,到官网(http://Node.js.cn/download/)安装即可。安装完后,在命令行窗口中分别输入node -v和npm -v来查看Node和NPM的版本。

初始化应用
与Node.js模块相同,应用的入口为package.json 文件,该文件可以在一个文件夹下使用npm init命令,按照提示填充各项信息生成。 一个最基本的Electron 应用一般来说会有如下的目录结构:

1.png

 main.js是主进程,完成窗口的创建,url或html文件的加载。GitHub上提供了一个简单的Electron应用https://github.com/electron/el ... t.git,可供学习参考。

使用C++插件扩展功能
对于复杂的业务逻辑,可以开发成C++插件Node,C++插件主要完成一些复杂的逻辑功能,供Electron调用。Electron对于C++生成的Node插件引用功能来自于Node.js,可以使用require() 函数加载到工程中,像普通的模块一样使用。JavaScript 与C++ 库之间接口使用V8引擎,如下图所示:

2.jpg

 插件开发环境

C++插件的开发需要安装node-gyp、Python 2.76,Windows下开发还要安装Visual Studio。
每个插件都有一个工程文件binging.gyp,配置了源文件、include路径及链接库,目标文件,使用的编译器等,格式如下:

3.png

 
C++与JavaScript通过V8交互执行的整体过程如下图所示:

4.jpg

 
C++可以使用Napi接口,模块的加载使用宏NODEAPIMODULE(hello, Init),导出的JavaScript接口在Init中定义,示例如下:

5.png

 
编译C++插件使用命令如下:

6.png

 
生成的C++插件为node文件,如hello.node 在JavaScript中调用C++插件直接使用require函数,代码hello.js如下:

7.png

 JavaScript就可以调用C++的接口了,执行命令node hello.js,输出"world"。

C++中调用JavaScript传递的回调函数需要使用libuv库,libuv实现了Node.js的事件循环、工作线程、以及平台所有的的异步操作的C库。 具体参考示例代码https://github.com/nodejs/node-addon-examples

Electron打包

Electron应用打包可以使用electron-builder和electron-packager,推荐使用electron-builder,打包命令为npm run builder,可以使用参数配置生成的安装包的操作系统。

环信IM桌面端

环信的IM桌面端SDK提供了JavaScript接口,并且使用Electron框架开发的示例Demo,可以让任何一个前端人员在极短时间内搭建出一款同时在Mac、Windows上运行的即时通讯软件,拥有单聊、群聊和聊天室功能,支持文字、表情、图片、音视频等消息格式,开发时间短、界面美观,可以为开发者提供方便快捷的桌面端即时通讯解决方案。

下载地址:http://www.easemob.com/download/im
集成说明:http://docs-im.easemob.com/im/pc/intro/integration

作者:李小明,现就职于环信,高级软件开发工程师,负责IM桌面端软件的研发,以C++、Node.js为开发语言,从事多年桌面软件开发经验,对行业前沿技术永远不懈追求。
0
回复

一对一直播app不知道怎样开发?这些功能你有了吗? 直播平台开发 直播

回复

q2466131704 发起了问题 • 1 人关注 • 605 次浏览 • 2019-05-14 14:13 • 来自相关话题

0
评论

收藏了~阿里巴巴程序员常用的 15 款开发者工具 程序员 开发者工具

beyond 发表了文章 • 316 次浏览 • 2019-05-10 11:16 • 来自相关话题

从人工到自动化,从重复到创新,技术演进的历程中,伴随着开发者工具类产品的发展。

阿里巴巴将自身在各类业务场景下的技术积淀,通过开源、云上实现或工具等形式对外开放,本文将精选了一些阿里巴巴的开发者工具,希望能帮助开发者们提高开发效率、更优雅的写代码。

由于开发者涉及的技术领域众多,笔者仅从自己熟悉的领域,以后端开发者的视角盘点平时可能用得到的工具。每个工具按照以下几点进行介绍:

工具名称和简介

使用场景

使用教程

获取方式

一、Java 线上诊断工具 Arthas

Arthas 阿里巴巴 2018 年 9 月开源的一款 Java 线上诊断工具。

工具的使用场景:

这个类从哪个 jar 包加载的?为什么会报各种类相关的 Exception?

我改的代码为什么没有执行到?难道是我没 commit?分支搞错了?

遇到问题无法在线上 debug,难道只能通过加日志再重新发布吗?

线上遇到某个用户的数据处理有问题,但线上同样无法 debug,线下无法重现!

是否有一个全局视角来查看系统的运行状况?

有什么办法可以监控到 JVM 的实时运行状态?

Arthas 支持 JDK 6+,支持 Linux/Mac/Windows,采用命令行交互模式,同时提供丰富的 Tab 自动补全功能,进一步方便进行问题的定位和诊断。

使用教程:

基础教程:

https://alibaba.github.io/arth ... asics

进阶教程:

https://alibaba.github.io/arth ... anced

获取方式:(免费)

开源地址:

https://github.com/alibaba/arthas

二、IDE 插件 Cloud Toolkit

Cloud Toolkit是一款 IDE 插件,可以帮助开发者更高效地开发、测试、诊断并部署应用。通过 Cloud Toolkit,开发者能够方便地将本地应用一键部署到任意机器(本地或云端),并内置 Arthas 诊断、高效执行终端命令和 SQL 等,提供 IntelliJ IDEA 版,Eclipse 版,PyCharm 版和 Maven 版。

工具的使用场景:

每次修改完代码后,是否正在经历反复地打包?

在 Maven 、Git 以及其他运维脚本和工具的之间频繁切换?

采用 SCP 工具上传?使用 XShell 或 SecureCRT 登陆服务器?替换部署包?重启?

文件上传到服务器指定目录,在各种 FTP、SCP 工具之间频繁切换 ?

使用教程:

IntelliJ IDEA 版:

https://help.aliyun.com/document_detail/98762.html

Eclipse 版:

https://help.aliyun.com/document_detail/29970.html

PyCharm 版:

https://help.aliyun.com/docume ... .html

Maven 版:

https://help.aliyun.com/docume ... .html

获取方式:(免费) 工具地址:

https://www.aliyun.com/product/cloudtoolkit

三、混沌实验注入工具 ChaosBlade

ChaosBlade是一款遵循混沌工程实验原理,提供丰富故障场景实现,帮助分布式系统提升容错性和可恢复性的混沌工程工具,可实现底层故障的注入,提供了延迟、异常、返回特定值、修改参数值、重复调用和 try-catch 块异常等异常场景。

工具的使用场景:

微服务的容错能力不易衡量?

容器编排配置是否合理无法验证?

PaaS 层健壮性的测试工作无从入手?

使用教程:

https://github.com/chaosblade-io/chaosblade/wiki/ 新手指南

获取方式:(免费)

开源地址:

https://github.com/chaosblade-io/chaosblade/wiki/ 新手指南

四、Java 代码规约扫描插件

该插件用于检测 Java 代码中存在的不规范的位置,并给予提示。规约插件是采用 Kotlin 语言开发。

使用教程:

IDEA 插件使用文档:

https://github.com/alibaba/p3c/wiki/IDEA 插件使用文档

Eclipse 插件使用文档:

https://github.com/alibaba/p3c/wiki/Eclipse 插件使用文档

获取方式:(免费)

开源地址:

https://github.com/alibaba/p3c

五、应用实时监控工具 ARMS

ARMS是一款 APM 类的监控工具,提供前端、应用、自定义监控 3 类监控选项,可快速构建实时的应用性能和业务监控能力。

工具的使用场景:

晚上 10 点收到 37 条报警信息,你却无从下手?

当我们发现问题的时候,客户 / 业务方已经发起投诉?

每个月花几十万买服务器,却无法保障用户体验?

使用教程:

前端监控接入:

https://help.aliyun.com/documentdetail/106086.html

应用监控接入:

https://help.aliyun.com/documentdetail/63796.html

自定义监控:

https://help.aliyun.com/document_detail/47474.html

获取方式:(收费)

工具地址:

https://www.aliyun.com/product/arms

六、静态开源站点搭建工具 Docsite

Docsite一款集官网、文档、博客和社区为一体的静态开源站点的解决方案,具有简单易上手、上手不撒手的特质,同时支持 react 和静态渲染、PC 端和移动端、支持中英文国际化、SEO、markdown 文档、全局站点搜索、站点风格自定义、页面自定义等功能。

使用教程:

https://docsite.js.org/zh-cn/d ... .html

获取方式:(免费)

项目地址:

https://github.com/txd-team/docsite

七、Android 平台上的秒级编译方案 Freeline

Freeline 可以充分利用缓存文件,在几秒钟内迅速地对代码的改动进行编译并部署到设备上,有效地减少了日常开发中的大量重新编译与安装的耗时。Freeline 最快捷的使用方法就是直接安装 Android Studio 插件。

使用教程:

https://github.com/alibaba/fre ... zh.md

获取方式:(免费)

项目地址:

https://github.com/alibaba/freeline

八、性能测试工具 PTS

PTS可以模拟大量用户访问业务的场景,任务随时发起,免去搭建和维护成本,支持 JMeter 脚本转化为 PTS 压测,同样支持原生 JMeter 引擎进行压测。

使用教程:

https://help.aliyun.com/document_detail/70290.html

获取方式:(收费)

工具地址:

https://www.aliyun.com/product/pts

九、云效开发者工具 KT

KT 可以简化在 Kubernetes 下进行联调测试的复杂度,提高基于 Kubernetes 的研发效率。

使用教程:

https://yq.aliyun.com/articles/690519

获取方式:(免费)

工具地址:

https://yq.aliyun.com/download/3393

十、架构可视化工具 AHAS

AHAS为 K8s 等容器环境提供了架构可视化的功能,同时,具有故障注入式高可用能力评测和一键流控降级等功能,可以快速低成本的提升应用可用性。

工具的使用场景:

服务化改造过程中,想精确的了解资源实例的构成和交互情况,实现架构的可视化?

想引入真实的故障场景和演练模型?

低门槛获得流控、降级功能?

使用教程:

https://help.aliyun.com/document_detail/90323.html

获取方式:(免费)

工具地址:

https://www.aliyun.com/product/ahas

十一、数据处理工具 EasyExcel

EasyExcel 是一个用来对 Java 进行解析、生成 Excel 的框架,它重写了 poi 对 07 版 Excel 的解析,原本一个 3M 的 Excel 用 POI sax 需要 100M 左右内存,EasyExcel 可降低到 KB 级别,并且再大的 excel 也不会出现内存溢出的情况。03 版依赖 POI 的 sax 模式。在上层做了模型转换的封装,让使用者更加简单方便。

使用教程:

https://github.com/alibaba/eas ... rt.md

获取方式:(开源)

https://github.com/alibaba/easyexcel

十二、iOS 类工具 HandyJSON

HandyJSON 是一个用于 Swift 语言中的 JSON 序列化 / 反序列化库。

与其他流行的 Swift JSON 库相比,HandyJSON 的特点是,它支持纯 Swift 类,使用也简单。它反序列化时 (把 JSON 转换为 Model) 不要求 Model 从 NSObject 继承 (因为它不是基于 KVC 机制),也不要求你为 Model 定义一个 Mapping 函数。只要你定义好 Model 类,声明它服从 HandyJSON 协议,HandyJSON 就能自行以各个属性的属性名为 Key,从 JSON 串中解析值。

使用教程:

https://github.com/alibaba/Han ... cn.md

获取方式:(开源)

https://github.com/alibaba/HandyJSON

十三、云上资源和应用部署工具 EDAS Serverless

EDAS Serverless一款基于 Kubernetes,面向应用和微服务的 Serverless 平台。用户无需管理和维护集群与服务器,即可通过镜像、WAR 包和 JAR 包,快速创建原生支持 Kubernetes 的容器应用,同时支持 Spring Cloud 和 Dubbo 等主流微服务框架。

使用教程:

https://help.aliyun.com/docume ... .html

获取方式:(公测期间免费)

https://help.aliyun.com/document_detail/97792.html

十四、数据库连接池 Druid

Druid 是 Java 语言下的数据库连接池,它能够提供强大的监控和扩展功能。

使用教程:

https://github.com/alibaba/druid/wiki/ 常见问题

获取方式:(开源)

http://central.maven.org/maven2/com/alibaba/druid/

十五、Java 工具集 Dragonwell

Alibaba Dragonwell 是阿里巴巴内部 OpenJDK 定制版 AJDK 的开源版本, AJDK 为在线电商,金融,物流做了结合业务场景的优化,运行在超大规模的,100,000+ 服务器的阿里巴巴数据中心。 Alibaba Dragonwell 与 Java SE 标准兼容,目前仅支持 Linux/x86_64 平台。

使用教程:

https://github.com/alibaba/dragonwell8/wiki/ 阿里巴巴 Dragonwell8 用户指南

获取方式:(开源)

https://github.com/alibaba/dragonwell8


上一篇: Java首度承认PK失败,愿永久服软Python!
  查看全部
从人工到自动化,从重复到创新,技术演进的历程中,伴随着开发者工具类产品的发展。

阿里巴巴将自身在各类业务场景下的技术积淀,通过开源、云上实现或工具等形式对外开放,本文将精选了一些阿里巴巴的开发者工具,希望能帮助开发者们提高开发效率、更优雅的写代码。

由于开发者涉及的技术领域众多,笔者仅从自己熟悉的领域,以后端开发者的视角盘点平时可能用得到的工具。每个工具按照以下几点进行介绍:

工具名称和简介

使用场景

使用教程

获取方式

一、Java 线上诊断工具 Arthas

Arthas 阿里巴巴 2018 年 9 月开源的一款 Java 线上诊断工具。

工具的使用场景:

这个类从哪个 jar 包加载的?为什么会报各种类相关的 Exception?

我改的代码为什么没有执行到?难道是我没 commit?分支搞错了?

遇到问题无法在线上 debug,难道只能通过加日志再重新发布吗?

线上遇到某个用户的数据处理有问题,但线上同样无法 debug,线下无法重现!

是否有一个全局视角来查看系统的运行状况?

有什么办法可以监控到 JVM 的实时运行状态?

Arthas 支持 JDK 6+,支持 Linux/Mac/Windows,采用命令行交互模式,同时提供丰富的 Tab 自动补全功能,进一步方便进行问题的定位和诊断。

使用教程:

基础教程:

https://alibaba.github.io/arth ... asics

进阶教程:

https://alibaba.github.io/arth ... anced

获取方式:(免费)

开源地址:

https://github.com/alibaba/arthas

二、IDE 插件 Cloud Toolkit

Cloud Toolkit是一款 IDE 插件,可以帮助开发者更高效地开发、测试、诊断并部署应用。通过 Cloud Toolkit,开发者能够方便地将本地应用一键部署到任意机器(本地或云端),并内置 Arthas 诊断、高效执行终端命令和 SQL 等,提供 IntelliJ IDEA 版,Eclipse 版,PyCharm 版和 Maven 版。

工具的使用场景:

每次修改完代码后,是否正在经历反复地打包?

在 Maven 、Git 以及其他运维脚本和工具的之间频繁切换?

采用 SCP 工具上传?使用 XShell 或 SecureCRT 登陆服务器?替换部署包?重启?

文件上传到服务器指定目录,在各种 FTP、SCP 工具之间频繁切换 ?

使用教程:

IntelliJ IDEA 版:

https://help.aliyun.com/document_detail/98762.html

Eclipse 版:

https://help.aliyun.com/document_detail/29970.html

PyCharm 版:

https://help.aliyun.com/docume ... .html

Maven 版:

https://help.aliyun.com/docume ... .html

获取方式:(免费) 工具地址:

https://www.aliyun.com/product/cloudtoolkit

三、混沌实验注入工具 ChaosBlade

ChaosBlade是一款遵循混沌工程实验原理,提供丰富故障场景实现,帮助分布式系统提升容错性和可恢复性的混沌工程工具,可实现底层故障的注入,提供了延迟、异常、返回特定值、修改参数值、重复调用和 try-catch 块异常等异常场景。

工具的使用场景:

微服务的容错能力不易衡量?

容器编排配置是否合理无法验证?

PaaS 层健壮性的测试工作无从入手?

使用教程:

https://github.com/chaosblade-io/chaosblade/wiki/ 新手指南

获取方式:(免费)

开源地址:

https://github.com/chaosblade-io/chaosblade/wiki/ 新手指南

四、Java 代码规约扫描插件

该插件用于检测 Java 代码中存在的不规范的位置,并给予提示。规约插件是采用 Kotlin 语言开发。

使用教程:

IDEA 插件使用文档:

https://github.com/alibaba/p3c/wiki/IDEA 插件使用文档

Eclipse 插件使用文档:

https://github.com/alibaba/p3c/wiki/Eclipse 插件使用文档

获取方式:(免费)

开源地址:

https://github.com/alibaba/p3c

五、应用实时监控工具 ARMS

ARMS是一款 APM 类的监控工具,提供前端、应用、自定义监控 3 类监控选项,可快速构建实时的应用性能和业务监控能力。

工具的使用场景:

晚上 10 点收到 37 条报警信息,你却无从下手?

当我们发现问题的时候,客户 / 业务方已经发起投诉?

每个月花几十万买服务器,却无法保障用户体验?

使用教程:

前端监控接入:

https://help.aliyun.com/documentdetail/106086.html

应用监控接入:

https://help.aliyun.com/documentdetail/63796.html

自定义监控:

https://help.aliyun.com/document_detail/47474.html

获取方式:(收费)

工具地址:

https://www.aliyun.com/product/arms

六、静态开源站点搭建工具 Docsite

Docsite一款集官网、文档、博客和社区为一体的静态开源站点的解决方案,具有简单易上手、上手不撒手的特质,同时支持 react 和静态渲染、PC 端和移动端、支持中英文国际化、SEO、markdown 文档、全局站点搜索、站点风格自定义、页面自定义等功能。

使用教程:

https://docsite.js.org/zh-cn/d ... .html

获取方式:(免费)

项目地址:

https://github.com/txd-team/docsite

七、Android 平台上的秒级编译方案 Freeline

Freeline 可以充分利用缓存文件,在几秒钟内迅速地对代码的改动进行编译并部署到设备上,有效地减少了日常开发中的大量重新编译与安装的耗时。Freeline 最快捷的使用方法就是直接安装 Android Studio 插件。

使用教程:

https://github.com/alibaba/fre ... zh.md

获取方式:(免费)

项目地址:

https://github.com/alibaba/freeline

八、性能测试工具 PTS

PTS可以模拟大量用户访问业务的场景,任务随时发起,免去搭建和维护成本,支持 JMeter 脚本转化为 PTS 压测,同样支持原生 JMeter 引擎进行压测。

使用教程:

https://help.aliyun.com/document_detail/70290.html

获取方式:(收费)

工具地址:

https://www.aliyun.com/product/pts

九、云效开发者工具 KT

KT 可以简化在 Kubernetes 下进行联调测试的复杂度,提高基于 Kubernetes 的研发效率。

使用教程:

https://yq.aliyun.com/articles/690519

获取方式:(免费)

工具地址:

https://yq.aliyun.com/download/3393

十、架构可视化工具 AHAS

AHAS为 K8s 等容器环境提供了架构可视化的功能,同时,具有故障注入式高可用能力评测和一键流控降级等功能,可以快速低成本的提升应用可用性。

工具的使用场景:

服务化改造过程中,想精确的了解资源实例的构成和交互情况,实现架构的可视化?

想引入真实的故障场景和演练模型?

低门槛获得流控、降级功能?

使用教程:

https://help.aliyun.com/document_detail/90323.html

获取方式:(免费)

工具地址:

https://www.aliyun.com/product/ahas

十一、数据处理工具 EasyExcel

EasyExcel 是一个用来对 Java 进行解析、生成 Excel 的框架,它重写了 poi 对 07 版 Excel 的解析,原本一个 3M 的 Excel 用 POI sax 需要 100M 左右内存,EasyExcel 可降低到 KB 级别,并且再大的 excel 也不会出现内存溢出的情况。03 版依赖 POI 的 sax 模式。在上层做了模型转换的封装,让使用者更加简单方便。

使用教程:

https://github.com/alibaba/eas ... rt.md

获取方式:(开源)

https://github.com/alibaba/easyexcel

十二、iOS 类工具 HandyJSON

HandyJSON 是一个用于 Swift 语言中的 JSON 序列化 / 反序列化库。

与其他流行的 Swift JSON 库相比,HandyJSON 的特点是,它支持纯 Swift 类,使用也简单。它反序列化时 (把 JSON 转换为 Model) 不要求 Model 从 NSObject 继承 (因为它不是基于 KVC 机制),也不要求你为 Model 定义一个 Mapping 函数。只要你定义好 Model 类,声明它服从 HandyJSON 协议,HandyJSON 就能自行以各个属性的属性名为 Key,从 JSON 串中解析值。

使用教程:

https://github.com/alibaba/Han ... cn.md

获取方式:(开源)

https://github.com/alibaba/HandyJSON

十三、云上资源和应用部署工具 EDAS Serverless

EDAS Serverless一款基于 Kubernetes,面向应用和微服务的 Serverless 平台。用户无需管理和维护集群与服务器,即可通过镜像、WAR 包和 JAR 包,快速创建原生支持 Kubernetes 的容器应用,同时支持 Spring Cloud 和 Dubbo 等主流微服务框架。

使用教程:

https://help.aliyun.com/docume ... .html

获取方式:(公测期间免费)

https://help.aliyun.com/document_detail/97792.html

十四、数据库连接池 Druid

Druid 是 Java 语言下的数据库连接池,它能够提供强大的监控和扩展功能。

使用教程:

https://github.com/alibaba/druid/wiki/ 常见问题

获取方式:(开源)

http://central.maven.org/maven2/com/alibaba/druid/

十五、Java 工具集 Dragonwell

Alibaba Dragonwell 是阿里巴巴内部 OpenJDK 定制版 AJDK 的开源版本, AJDK 为在线电商,金融,物流做了结合业务场景的优化,运行在超大规模的,100,000+ 服务器的阿里巴巴数据中心。 Alibaba Dragonwell 与 Java SE 标准兼容,目前仅支持 Linux/x86_64 平台。

使用教程:

https://github.com/alibaba/dragonwell8/wiki/ 阿里巴巴 Dragonwell8 用户指南

获取方式:(开源)

https://github.com/alibaba/dragonwell8


上一篇: Java首度承认PK失败,愿永久服软Python!
 
0
回复

直播:新一代实时音视频底层技术与应用实践 直播 公开课

回复

beyond 发起了问题 • 1 人关注 • 568 次浏览 • 2019-05-09 18:58 • 来自相关话题

0
回复

开发直播软件必须要用直播系统源码才行 直播平台开发 直播

回复

q2466131704 发起了问题 • 1 人关注 • 557 次浏览 • 2019-05-09 16:40 • 来自相关话题

0
评论

史上最完整的官方Oracle OCP中文文教材,快来下载吧!! 下载

beyond 发表了文章 • 489 次浏览 • 2019-05-09 16:18 • 来自相关话题

内含文件:
1、Oracle Database 11g:SQL 基础 学生指南第1 册 
2、Oracle Database 11g:SQL 基础 学生指南第2 册 
3、Oracle Database 11g:数据库管理- 课堂练习I 学生指南第1 册
4、Oracle Database 11g:数据库管理- 课堂练习II 学生指南第1 册 
5、Oracle Database 11g:数据库管理- 课堂练习I 学生指南第2 册 
6、Oracle Database 11g:数据库管理- 课堂练习II 学生指南第2 册 
7、Oracle Da等等 查看全部
内含文件:
1、Oracle Database 11g:SQL 基础 学生指南第1 册 
2、Oracle Database 11g:SQL 基础 学生指南第2 册 
3、Oracle Database 11g:数据库管理- 课堂练习I 学生指南第1 册
4、Oracle Database 11g:数据库管理- 课堂练习II 学生指南第1 册 
5、Oracle Database 11g:数据库管理- 课堂练习I 学生指南第2 册 
6、Oracle Database 11g:数据库管理- 课堂练习II 学生指南第2 册 
7、Oracle Da等等
0
评论

vue仿微信网页端聊天室|仿微信客户端vue版 vue聊天室 vue仿微信web端 vueWebChat聊天 vue聊天IM

xiaoyan2015 发表了文章 • 921 次浏览 • 2019-05-06 11:39 • 来自相关话题

基于Vue2.5.6+Vuex+vue-router+vue-gemini-scrollbar+swiper+elementUI等技术开发的仿微信web端聊天室,实现了发送消息、表情(动图),图片、视频预览,仿微信右键菜单、网页截图可直接粘贴至编辑框发送。
https://www.cnblogs.com/xiaoyan2017/p/10793728.html
 

































































 
/*
* 页面地址路由js
*/
import Vue from 'vue'
import Router from 'vue-router'
import store from '../vuex'

// 通过改写router.go方法,当new Router 实例就包含back方法
Router.prototype.back = function(){
window.history.go(-1)
}

Vue.use(Router)

const router = new Router({
routes: [
// 登录、注册
{
path: '/login',
component: resolve => require(['../views/auth/login'], resolve),
meta: { hideSideBar: true },
},
{
path: '/register',
component: resolve => require(['../views/auth/register'], resolve),
meta: { hideSideBar: true },
},

// 首页、通讯录、动态圈
{
path: '/',
redirect: '/chat',
component: resolve => require(['../views/index'], resolve),
meta: { requireAuth: true },
},
{
path: '/contact',
redirect: '/contact/new-friends',
component: resolve => require(['../views/contact'], resolve),
meta: { requireAuth: true },
},
{
path: '/contact/new-friends',
component: resolve => require(['../views/contact/new-friends'], resolve),
meta: { requireAuth: true },
},
{
path: '/contact/uinfo',
component: resolve => require(['../views/contact/uinfo'], resolve),
},
{
path: '/qzone',
component: resolve => require(['../views/qzone'], resolve),
},
{
path: '/qzone/write',
component: resolve => require(['../views/qzone/write'], resolve),
meta: { requireAuth: true },
},
{
path: '/my',
component: resolve => require(['../views/my'], resolve),
meta: { requireAuth: true },
},

// 聊天页面
{
path: '/chat',
component: resolve => require(['../views/chat/group-chat'], resolve),
meta: { requireAuth: true }
},
{
path: '/chat/single-chat',
component: resolve => require(['../views/chat/single-chat'], resolve),
meta: { requireAuth: true }
},
{
path: '/chat/group-info',
component: resolve => require(['../views/chat/group-info'], resolve),
meta: { requireAuth: true }
}

]
});

// 注册全局钩子(拦截登录状态)
router.beforeEach((to, from, next) => {
const token = store.state.token
// 判断该路由地址是否需要登录权限
if(to.meta.requireAuth){
// 判断token是否存在
if(token){
next()
}else{
next()
// 未登录授权
wcPop({
content: '还未登录授权!', anim: 'shake', style: 'background:#e03b30;color:#fff;', time: 2,
end: function(){
next({ path: '/login' })
}
});
}
}else{
next()
}
})

export default routerimport Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

import {mm} from '../common.js'

export default new Vuex.Store({
state: {
user: window.sessionStorage.getItem('user'),
token: window.sessionStorage.getItem('token'), //登录标识
onlineStatus: { status: 'online', text: '在线' }, //用户在线状态 【 online:在线、 offline:离开、 busy:忙碌、 invisible:隐身】
},
mutations: {
// 将token存储到sessionStorage
SET_TOKEN (state, data){
state.token = data;
window.sessionStorage.setItem('token', data);
},
// 获取用户名
SET_USER (state, data){
state.user = data;
window.sessionStorage.setItem('user', data);
},
// 退出
LOGOUT (state){
state.user = null;
state.token = null;
window.sessionStorage.removeItem('user');
window.sessionStorage.removeItem('token');
},
},
getters:{}
})

// 这种写法也ok
// export default () => {
// return new Vuex.Store({
// state: {},
// mutations: {},
// actions: {},
// })
// }




欢迎大家一起交流、学习  Q:282310962  wx:xy190310
  查看全部
基于Vue2.5.6+Vuex+vue-router+vue-gemini-scrollbar+swiper+elementUI等技术开发的仿微信web端聊天室,实现了发送消息、表情(动图),图片、视频预览,仿微信右键菜单、网页截图可直接粘贴至编辑框发送。
https://www.cnblogs.com/xiaoyan2017/p/10793728.html
 

009360截图20190429230828577.png


002360截图20190429225404663.png


003360截图20190429225544303.png


004360截图20190429225824919.png


005360截图20190429225945884.png


006360截图20190429230254807.png


007360截图20190429230405160.png


008360截图20190429230519310.png


012360截图20190429231530721.png


013360截图20190429231625431.png


014360截图20190429231721255.png


015360截图20190429231737056.png


016360截图20190429231834918.png

 
/*
* 页面地址路由js
*/
import Vue from 'vue'
import Router from 'vue-router'
import store from '../vuex'

// 通过改写router.go方法,当new Router 实例就包含back方法
Router.prototype.back = function(){
window.history.go(-1)
}

Vue.use(Router)

const router = new Router({
routes: [
// 登录、注册
{
path: '/login',
component: resolve => require(['../views/auth/login'], resolve),
meta: { hideSideBar: true },
},
{
path: '/register',
component: resolve => require(['../views/auth/register'], resolve),
meta: { hideSideBar: true },
},

// 首页、通讯录、动态圈
{
path: '/',
redirect: '/chat',
component: resolve => require(['../views/index'], resolve),
meta: { requireAuth: true },
},
{
path: '/contact',
redirect: '/contact/new-friends',
component: resolve => require(['../views/contact'], resolve),
meta: { requireAuth: true },
},
{
path: '/contact/new-friends',
component: resolve => require(['../views/contact/new-friends'], resolve),
meta: { requireAuth: true },
},
{
path: '/contact/uinfo',
component: resolve => require(['../views/contact/uinfo'], resolve),
},
{
path: '/qzone',
component: resolve => require(['../views/qzone'], resolve),
},
{
path: '/qzone/write',
component: resolve => require(['../views/qzone/write'], resolve),
meta: { requireAuth: true },
},
{
path: '/my',
component: resolve => require(['../views/my'], resolve),
meta: { requireAuth: true },
},

// 聊天页面
{
path: '/chat',
component: resolve => require(['../views/chat/group-chat'], resolve),
meta: { requireAuth: true }
},
{
path: '/chat/single-chat',
component: resolve => require(['../views/chat/single-chat'], resolve),
meta: { requireAuth: true }
},
{
path: '/chat/group-info',
component: resolve => require(['../views/chat/group-info'], resolve),
meta: { requireAuth: true }
}

]
});

// 注册全局钩子(拦截登录状态)
router.beforeEach((to, from, next) => {
const token = store.state.token
// 判断该路由地址是否需要登录权限
if(to.meta.requireAuth){
// 判断token是否存在
if(token){
next()
}else{
next()
// 未登录授权
wcPop({
content: '还未登录授权!', anim: 'shake', style: 'background:#e03b30;color:#fff;', time: 2,
end: function(){
next({ path: '/login' })
}
});
}
}else{
next()
}
})

export default router
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

import {mm} from '../common.js'

export default new Vuex.Store({
state: {
user: window.sessionStorage.getItem('user'),
token: window.sessionStorage.getItem('token'), //登录标识
onlineStatus: { status: 'online', text: '在线' }, //用户在线状态 【 online:在线、 offline:离开、 busy:忙碌、 invisible:隐身】
},
mutations: {
// 将token存储到sessionStorage
SET_TOKEN (state, data){
state.token = data;
window.sessionStorage.setItem('token', data);
},
// 获取用户名
SET_USER (state, data){
state.user = data;
window.sessionStorage.setItem('user', data);
},
// 退出
LOGOUT (state){
state.user = null;
state.token = null;
window.sessionStorage.removeItem('user');
window.sessionStorage.removeItem('token');
},
},
getters:{}
})

// 这种写法也ok
// export default () => {
// return new Vuex.Store({
// state: {},
// mutations: {},
// actions: {},
// })
// }

20180817002157557.jpg

欢迎大家一起交流、学习  Q:282310962  wx:xy190310
 
0
评论

一对一软件怎样开发?需要注意什么? 一对一软件开发 软件开发 直播系统

q2466131704 发表了文章 • 289 次浏览 • 2019-05-05 13:49 • 来自相关话题

一对一软件怎样开发才能解决现代人的社交恐惧症?熟人社交,目前已经成为绝大多数人内心十分抗拒的社交方式,就连发个微信朋友圈都需要屏蔽各种七大姑八大姨,还有小学初中高中同学,而一对一陌生人社交的方式可以有效解决这个问题。那么,应该怎样进行一对一软件开发呢?需要注意什么?
一对一软件开发需要哪些功能?
1.主播列表
主要显示经过平台认证后的主播信息,对主播的信息进行简单的展示。一般情况下该页面显示在首页,即用户登录软件之后最先看到的页面。这一功能主要是让用户直观的看到当前平台上的主播,通常默认显示的是热门或推荐的主播,其次是附近的主播。




2.主播详情页
主要显示主播认证时上传的图片、头像、昵称、星级、收费价格等,上拉之后可跳转到主播的个人介绍、签名、形象标签和个人资料等。开发这个功能主要是为了让用户对当前查看的主播能有一个简单的了解,然后再进行视频或语音聊天。
3.动态
开发一对一软件最主要的目的就是解决熟人社交带来的压力,而动态功能对于社交属性的软件来说,是非常重要的。不仅能够增加平台的用户粘性,还能够从动态中与天南海北的线上好友进行互动。
4.短视频功能
自从抖音把短视频带火之后,人们开始喜欢用录制短视频的形式展现自己。在一对一软件开发中加入短视频,主播可以在自己的详情页面上传短视频,用户可以通过查看主播以往短视频,了解主播的日常工作生活,以及主播的平台活跃度。




一对一软件开发需要注意什么?
1.跨平台互通
基于当下移动端软件的受欢迎程度,所以在进行一对一软件开发时需要实现跨平台互通,即支持Android与ios端开播、观看及互通,后台web端与前端互联,也就是我们常说的三端互通。
2.源码是否开源
如果想要购买一套源码,那么首先需要确定的就是这套源码是否开源。开源的源码不仅拥有相关的独立版权,而且支持二次开发,后期在维护和修复bug时相对比较轻松。




3.程序的稳定性
为了保证后期开发出来的软件能够给用户带来良好的体验,在运行系统时需要具备一定的稳定性和流畅性,同时它的安全兼容性也要足够强。
以上内容就是关于一对一软件开发时需要开发的功能和需要注意的事情,要想真正的解决现阶段社会中存在的社交压力问题,需要找准用户的真实需求、产品定位等方面入手,至于编代码和程序是否问题就不需要我们操心了。
本文声明原创,转载请注明作者、出外及原文链接。 查看全部
一对一软件怎样开发才能解决现代人的社交恐惧症?熟人社交,目前已经成为绝大多数人内心十分抗拒的社交方式,就连发个微信朋友圈都需要屏蔽各种七大姑八大姨,还有小学初中高中同学,而一对一陌生人社交的方式可以有效解决这个问题。那么,应该怎样进行一对一软件开发呢?需要注意什么?
一对一软件开发需要哪些功能?
1.主播列表
主要显示经过平台认证后的主播信息,对主播的信息进行简单的展示。一般情况下该页面显示在首页,即用户登录软件之后最先看到的页面。这一功能主要是让用户直观的看到当前平台上的主播,通常默认显示的是热门或推荐的主播,其次是附近的主播。
一对一4.png

2.主播详情页
主要显示主播认证时上传的图片、头像、昵称、星级、收费价格等,上拉之后可跳转到主播的个人介绍、签名、形象标签和个人资料等。开发这个功能主要是为了让用户对当前查看的主播能有一个简单的了解,然后再进行视频或语音聊天。
3.动态
开发一对一软件最主要的目的就是解决熟人社交带来的压力,而动态功能对于社交属性的软件来说,是非常重要的。不仅能够增加平台的用户粘性,还能够从动态中与天南海北的线上好友进行互动。
4.短视频功能
自从抖音把短视频带火之后,人们开始喜欢用录制短视频的形式展现自己。在一对一软件开发中加入短视频,主播可以在自己的详情页面上传短视频,用户可以通过查看主播以往短视频,了解主播的日常工作生活,以及主播的平台活跃度。
短视频5.jpg

一对一软件开发需要注意什么?
1.跨平台互通
基于当下移动端软件的受欢迎程度,所以在进行一对一软件开发时需要实现跨平台互通,即支持Android与ios端开播、观看及互通,后台web端与前端互联,也就是我们常说的三端互通。
2.源码是否开源
如果想要购买一套源码,那么首先需要确定的就是这套源码是否开源。开源的源码不仅拥有相关的独立版权,而且支持二次开发,后期在维护和修复bug时相对比较轻松。
一对一6.png

3.程序的稳定性
为了保证后期开发出来的软件能够给用户带来良好的体验,在运行系统时需要具备一定的稳定性和流畅性,同时它的安全兼容性也要足够强。
以上内容就是关于一对一软件开发时需要开发的功能和需要注意的事情,要想真正的解决现阶段社会中存在的社交压力问题,需要找准用户的真实需求、产品定位等方面入手,至于编代码和程序是否问题就不需要我们操心了。
本文声明原创,转载请注明作者、出外及原文链接。
0
回复

我们开发的小伙伴最近在用flutter开发,想整合环信调试,是否支持呢? 环信_WebIM

回复

sunshine123 发起了问题 • 1 人关注 • 768 次浏览 • 2019-04-30 14:35 • 来自相关话题

0
评论

开发直播平台多少钱?没有技术团队怎么办? 直播平台开发 直播

q2466131704 发表了文章 • 473 次浏览 • 2019-04-29 16:39 • 来自相关话题

“开发直播平台多少钱?”
“没有技术团队怎么办?”
以上两个问题是绝大多数想要加入直播行业的人都非常关注的问题,所以本文就以这两个问题来简单探讨一下,希望能给大家提供一定的帮助。
开发一个直播平台需要多少钱?
首先,需要确定的是选择定制开发还是购买一套源码进行开发;其次,需要选择专业的直播软件开发公司;最后,确定开发费用。
其实目前最简单直接的方法就是购买一套成品在线直播源码来进行搭建部署,实现快速上线运营。一般从源码服务商那里购买的直播源码都是开源的,支持二次开发,还可以直接搭建部署上线运营。这种方式不仅性价比较高,而且初期费用基本上只有源码本身的费用,当然,如果有额外的开发需要单独按照开发工期计算费用。但整体算下来,比起自己组建团队进行开发,无论是时间成本还是人力成本上都要划算的多。
没有技术团队怎么办?
绝大多数想做直播APP的人都没有配备相应的技术团队,那么他们就会考虑到一个问题,是不是没有技术团队就没办法做直播APP了?其实并非如此,现在市面上专业的软件开发公司除了提供直播源码以外,还会提供一系列的服务,主要就是为了解决客户没有技术团队的问题。举个简单的例子,我们购买一套直播源码之后,如果想要在现有的基础上添加几个功能,那么就把功能需求整理成为一份文档给开发公司,然后他们会负责将功能开发完成好之后交付给我们,后期还可以免费搭建部署实现上架运营。也就是说,就算没有技术团队,只需要花费一套源码和相关功能开发的费用就可以得到一个成品直播APP,不仅省时省力,还节省了自己组建技术团队的相关人力费用。
其实说来说去,还是找专业的直播软件开发公司更合适。因为他们大都是长期专注于直播系统开发的公司,在技术和功能等方面的实现都具备一定的经验和实力,并且对于直播场景中经常出现的问题也有对应的解决方案,所以,有开发直播平台意向的人不妨去正规、专业的公司咨询一下关于开发费用和技术等方面的问题,这样一来不仅程序的质量得到了强有力的保证,还能享受到相应的服务。
本文声明原创,转载请注明原文链接及出处。 查看全部
“开发直播平台多少钱?”
“没有技术团队怎么办?”
以上两个问题是绝大多数想要加入直播行业的人都非常关注的问题,所以本文就以这两个问题来简单探讨一下,希望能给大家提供一定的帮助。
开发一个直播平台需要多少钱?
首先,需要确定的是选择定制开发还是购买一套源码进行开发;其次,需要选择专业的直播软件开发公司;最后,确定开发费用。
其实目前最简单直接的方法就是购买一套成品在线直播源码来进行搭建部署,实现快速上线运营。一般从源码服务商那里购买的直播源码都是开源的,支持二次开发,还可以直接搭建部署上线运营。这种方式不仅性价比较高,而且初期费用基本上只有源码本身的费用,当然,如果有额外的开发需要单独按照开发工期计算费用。但整体算下来,比起自己组建团队进行开发,无论是时间成本还是人力成本上都要划算的多。
没有技术团队怎么办?
绝大多数想做直播APP的人都没有配备相应的技术团队,那么他们就会考虑到一个问题,是不是没有技术团队就没办法做直播APP了?其实并非如此,现在市面上专业的软件开发公司除了提供直播源码以外,还会提供一系列的服务,主要就是为了解决客户没有技术团队的问题。举个简单的例子,我们购买一套直播源码之后,如果想要在现有的基础上添加几个功能,那么就把功能需求整理成为一份文档给开发公司,然后他们会负责将功能开发完成好之后交付给我们,后期还可以免费搭建部署实现上架运营。也就是说,就算没有技术团队,只需要花费一套源码和相关功能开发的费用就可以得到一个成品直播APP,不仅省时省力,还节省了自己组建技术团队的相关人力费用。
其实说来说去,还是找专业的直播软件开发公司更合适。因为他们大都是长期专注于直播系统开发的公司,在技术和功能等方面的实现都具备一定的经验和实力,并且对于直播场景中经常出现的问题也有对应的解决方案,所以,有开发直播平台意向的人不妨去正规、专业的公司咨询一下关于开发费用和技术等方面的问题,这样一来不仅程序的质量得到了强有力的保证,还能享受到相应的服务。
本文声明原创,转载请注明原文链接及出处。
0
评论

找优质的直播软件开发公司不用担心系统架构问题 直播平台开发 直播 直播系统 直播软件开发

q2466131704 发表了文章 • 304 次浏览 • 2019-04-28 09:22 • 来自相关话题

文章标题中提到的系统架构问题,在直播软件开发过程中也是非常重要的一部分。为什么这么说呢?我们举个简单的例子,一个施工队盖楼肯定先要把整体的框架用钢筋扎好,然后再进行下一步的工作。开发直播软件也是一样,先把整体的架构设计好罗列出来,再把其中的功能挨个添加进去。
目前市面上的直播软件开发公司都有专人负责系统架构的设计和实现,他们会根据用户需求进行调整,以满足各种应用场景,在这里给大家分享三种常见的直播架构。
1.简单的直播架构
在已有的CDN基础上,再自行搭建一个信令服务器,这样就可以完成服务层的搭建工作了。用户向信令服务器发送共享音视频指令后,再通过相机或摄像头采集数据,编码之后通过直播中常用的RTMP协议将这个流推到CDN。然后接收端向信令服务器发送指令,获取音视频流的名称,再从CDN中拉取该流,经过解码之后渲染在屏幕上,用户就可以观看直播了。建议:在选择CDN服务商时可以选择多家进行对比,比如阿里云和腾讯云等都是国内比较大的服务商。当然,也可以把这件事情交给直播软件开发公司,由他们联系长期合作的服务商提供服务。




2.实时交互的直播架构
为了满足直播交互性强的特性,在设计架构时需要增加自有网络。在音视频数据上传到自有网络之后,还需要通过专门的服务将数据流转成RTMP流推到CDN,对于大多数不参与实时互动的用户来说,他们可以从CDN获取音视频数据了。这种架构既能满足直播用户的实时互动需求,也可以满足其他用户只观看直播不互动的需求,在直播软件开发项目中也是比较常见的一种架构设计。




3.解决高并发的直播架构
可能大家经常看到“直播”“高并发”这些词汇出现,但是对于直播中的高并发并不了解。我们可以这样理解,如果只有1w人观看直播,不是同时进入直播间就没问题,但如果这1w人是在同一时刻进入直播间,如果在直播软件开发过程中没考虑到并发量的问题,那么服务器就会直接崩溃,导致无法观看。所以说,为了解决直播的高负载和并发问题,需要增加资源管理服务器,从而实时监控各个服务的资源情况。




绝大多数人都认为开发直播软件并不需要找专业的开发公司,但实际上来看,找专业的直播软件开发公司还是非常必要的,就像文章中系统架构、CDN服务商和高并发等问题,都可以交给他们负责。比起自己从设计直播架构开始来说,要好多了。希望本篇文章能给大家提供一定的帮助。
本文声明原创,转载请注明出处及链接。 查看全部
文章标题中提到的系统架构问题,在直播软件开发过程中也是非常重要的一部分。为什么这么说呢?我们举个简单的例子,一个施工队盖楼肯定先要把整体的框架用钢筋扎好,然后再进行下一步的工作。开发直播软件也是一样,先把整体的架构设计好罗列出来,再把其中的功能挨个添加进去。
目前市面上的直播软件开发公司都有专人负责系统架构的设计和实现,他们会根据用户需求进行调整,以满足各种应用场景,在这里给大家分享三种常见的直播架构。
1.简单的直播架构
在已有的CDN基础上,再自行搭建一个信令服务器,这样就可以完成服务层的搭建工作了。用户向信令服务器发送共享音视频指令后,再通过相机或摄像头采集数据,编码之后通过直播中常用的RTMP协议将这个流推到CDN。然后接收端向信令服务器发送指令,获取音视频流的名称,再从CDN中拉取该流,经过解码之后渲染在屏幕上,用户就可以观看直播了。建议:在选择CDN服务商时可以选择多家进行对比,比如阿里云和腾讯云等都是国内比较大的服务商。当然,也可以把这件事情交给直播软件开发公司,由他们联系长期合作的服务商提供服务。
1.jpg

2.实时交互的直播架构
为了满足直播交互性强的特性,在设计架构时需要增加自有网络。在音视频数据上传到自有网络之后,还需要通过专门的服务将数据流转成RTMP流推到CDN,对于大多数不参与实时互动的用户来说,他们可以从CDN获取音视频数据了。这种架构既能满足直播用户的实时互动需求,也可以满足其他用户只观看直播不互动的需求,在直播软件开发项目中也是比较常见的一种架构设计。
2.jpg

3.解决高并发的直播架构
可能大家经常看到“直播”“高并发”这些词汇出现,但是对于直播中的高并发并不了解。我们可以这样理解,如果只有1w人观看直播,不是同时进入直播间就没问题,但如果这1w人是在同一时刻进入直播间,如果在直播软件开发过程中没考虑到并发量的问题,那么服务器就会直接崩溃,导致无法观看。所以说,为了解决直播的高负载和并发问题,需要增加资源管理服务器,从而实时监控各个服务的资源情况。
3.jpg

绝大多数人都认为开发直播软件并不需要找专业的开发公司,但实际上来看,找专业的直播软件开发公司还是非常必要的,就像文章中系统架构、CDN服务商和高并发等问题,都可以交给他们负责。比起自己从设计直播架构开始来说,要好多了。希望本篇文章能给大家提供一定的帮助。
本文声明原创,转载请注明出处及链接。
0
评论

直播软件开发业务需要考虑自适应的问题吗? 直播平台开发 直播 直播软件开发

q2466131704 发表了文章 • 323 次浏览 • 2019-04-27 09:28 • 来自相关话题

大家虽然经常观看直播,但是实际上对直播的流程并不是非常了解。视频直播的流程可以简单分为:采集、处理、编码和封装、推流(到服务器)、分发、播放。其中,在直播软件开发中需要注意的就是推流端的实现问题,如果流推不出去,用户就无法正常观看直播。目前市面上有很多服务商,购买源码时还需要看看他们的程序在自适应方面做的好不好。
1.帧率和码率的自适应
如果直播推流出现了问题,最容易出现的一个问题就是卡顿。假如我们在观看直播时网络环境较差,那么就可以将帧率或者是码率降低一点,音视频流就可以正常推出去。在码率自适应的时候,是可以直接反馈到编码器的,然后动态调整自己的码率,使得传出来的视频码率下降,而帧率的控制相对来说比较简单,在此就不多作赘述了。
2.软硬自适应
大部分人反馈比较多的就是,在观看直播的时候手机会出现发热现象,其实这就涉及到了在直播软件开发过程中,软硬编码的方式选择问题。比如硬件编码,它的优点就是不会导致手机发热,但是音视频比较南通不,而且兼容性不太好。软件编码的话,码率低并且画质好,它也是导致手机发热的“罪魁祸首”。
3.算法自适应
对于推流端来说,它最主要的任务就是将更好的直播画质给推出来,要想使得直播画质变得更好,可以采用H.265编码,举个简单的例子就是,H.264能推出来480P的画质,那么经过H.265之后就能推出来720P的画质。在直播这种交互性强的应用场景,直播画质是否清晰也是评价软件是否优质的标准之一。不仅是主播,现在大多数用户对于画质方面的要求非常严格,假如说用户花钱观看一个主播,但是始终无法看到高清状态下的主播,用户的产品体验就会变得非常糟糕,直播平台就有可能会流失掉一个用户。所以说,选择适合直播应用场景的编码标准也是非常重要的。

在直播应用场景中,自适应并不算是非常复杂的问题。如果想要购买一套程序,但是又不确定程序的质量应该怎么办呢?是否需要考虑自适应的问题呢?事实上,现在的直播软件开发商在购买程序之前,会先提供产品演示供我们下载体验,如果觉得可以再进行下一步的开发或者购买流程,当然这只是针对正规商家,其他渠道来源的程序是否稳定我们就无从得知了。最后,还是建议大家从正规渠道购买程序吧,这样不仅质量有保证,还更加省心。
本文声明原创,转载请注明出处。 查看全部
大家虽然经常观看直播,但是实际上对直播的流程并不是非常了解。视频直播的流程可以简单分为:采集、处理、编码和封装、推流(到服务器)、分发、播放。其中,在直播软件开发中需要注意的就是推流端的实现问题,如果流推不出去,用户就无法正常观看直播。目前市面上有很多服务商,购买源码时还需要看看他们的程序在自适应方面做的好不好。
1.帧率和码率的自适应
如果直播推流出现了问题,最容易出现的一个问题就是卡顿。假如我们在观看直播时网络环境较差,那么就可以将帧率或者是码率降低一点,音视频流就可以正常推出去。在码率自适应的时候,是可以直接反馈到编码器的,然后动态调整自己的码率,使得传出来的视频码率下降,而帧率的控制相对来说比较简单,在此就不多作赘述了。
2.软硬自适应
大部分人反馈比较多的就是,在观看直播的时候手机会出现发热现象,其实这就涉及到了在直播软件开发过程中,软硬编码的方式选择问题。比如硬件编码,它的优点就是不会导致手机发热,但是音视频比较南通不,而且兼容性不太好。软件编码的话,码率低并且画质好,它也是导致手机发热的“罪魁祸首”。
3.算法自适应
对于推流端来说,它最主要的任务就是将更好的直播画质给推出来,要想使得直播画质变得更好,可以采用H.265编码,举个简单的例子就是,H.264能推出来480P的画质,那么经过H.265之后就能推出来720P的画质。在直播这种交互性强的应用场景,直播画质是否清晰也是评价软件是否优质的标准之一。不仅是主播,现在大多数用户对于画质方面的要求非常严格,假如说用户花钱观看一个主播,但是始终无法看到高清状态下的主播,用户的产品体验就会变得非常糟糕,直播平台就有可能会流失掉一个用户。所以说,选择适合直播应用场景的编码标准也是非常重要的。

在直播应用场景中,自适应并不算是非常复杂的问题。如果想要购买一套程序,但是又不确定程序的质量应该怎么办呢?是否需要考虑自适应的问题呢?事实上,现在的直播软件开发商在购买程序之前,会先提供产品演示供我们下载体验,如果觉得可以再进行下一步的开发或者购买流程,当然这只是针对正规商家,其他渠道来源的程序是否稳定我们就无从得知了。最后,还是建议大家从正规渠道购买程序吧,这样不仅质量有保证,还更加省心。
本文声明原创,转载请注明出处。
0
评论

初试直播软件开发项目需要了解后台开发语言吗? 直播平台开发 直播软件开发 直播

q2466131704 发表了文章 • 373 次浏览 • 2019-04-25 14:51 • 来自相关话题

刷论坛的时候看到有位朋友发帖,大概意思就是自己想尝试直播软件开发项目,简单说就是做个直播软件,但发现有后台有两种不同的开发语言:java和php,所以才发帖求助帮他解答两个后台之间的区别。那么实际上,java后台和php后台到底有什么区别呢?
1.两种编程语言有什么区别?
先来说一下php,它最大的特点就是非常迅速,甚至都可以不用框架去写一个功能,只需要几行代码就能搞定了。但java就不一样了,它需要先想一下用怎样的框架,然后再选择配置各种数据库、过滤器等。




2.java和php在技术层面有何区别?
php汲取了java和c以及perl等语言的所有优点,专注于互联网领域,在web领域几乎没有语言可以和php相比。而java只是面向对象开发,虽然功能强、分支多,但它所具备的优势往往也是它的劣势。
3.java和php在市场份额方面有何区别?
Java的语言相对比较老,经过了多年时间的发展,在C/S和B/S领域占据一定的地位,但是随着社会需求的不断变化,java的市场在逐渐减少。而php的市场份额只需要看web领域就足够了,因为web领域php的市场超过了80%,剩下的就是向asp、C#、python等,大部分企业都在使用php,Facebook和新浪微博也在使用php。相比较之下,php的市场份额比java要多。




4.哪一种更适合直播软件开发业务?
对于开发直播软件来讲,我们需要考虑到一个问题花费,这是大多数人都十分关注的。Java后台虽然稳定性、承载量等方面都比php要好,但是java后台开发起来费用高、开发周期长、后期的维护成本也很高,所以对于一些启动资金有限的人来说并不划算,但并不代表java后台就不能适用于直播业务。相比之下,php后台不但开发周期短,而且也不需要过高的费开发用,目前大多数软件开发公司都默认是php后台。需要避免的误区就是,java后台和php后台两种都可以选择,只不过php后台从各方面来看的话性价比更高一些。
以上就是java后台和php后台的区别,在此只作参考。对于初试直播软件开发项目的朋友来说,如果实在不知道选择哪种后台的话,不妨把这个棘手的问题交给开发商,让他们帮你制定相对应的直播解决方案,当然,选择正规的官方公司才是最靠谱的。如果大家对直播业务感兴趣,可以在下方与我互动。
本文声明原创,转载请注明出处。 查看全部
刷论坛的时候看到有位朋友发帖,大概意思就是自己想尝试直播软件开发项目,简单说就是做个直播软件,但发现有后台有两种不同的开发语言:java和php,所以才发帖求助帮他解答两个后台之间的区别。那么实际上,java后台和php后台到底有什么区别呢?
1.两种编程语言有什么区别?
先来说一下php,它最大的特点就是非常迅速,甚至都可以不用框架去写一个功能,只需要几行代码就能搞定了。但java就不一样了,它需要先想一下用怎样的框架,然后再选择配置各种数据库、过滤器等。
20160112174716_24356.jpg

2.java和php在技术层面有何区别?
php汲取了java和c以及perl等语言的所有优点,专注于互联网领域,在web领域几乎没有语言可以和php相比。而java只是面向对象开发,虽然功能强、分支多,但它所具备的优势往往也是它的劣势。
3.java和php在市场份额方面有何区别?
Java的语言相对比较老,经过了多年时间的发展,在C/S和B/S领域占据一定的地位,但是随着社会需求的不断变化,java的市场在逐渐减少。而php的市场份额只需要看web领域就足够了,因为web领域php的市场超过了80%,剩下的就是向asp、C#、python等,大部分企业都在使用php,Facebook和新浪微博也在使用php。相比较之下,php的市场份额比java要多。
t01515cca18405c61d9.jpg

4.哪一种更适合直播软件开发业务?
对于开发直播软件来讲,我们需要考虑到一个问题花费,这是大多数人都十分关注的。Java后台虽然稳定性、承载量等方面都比php要好,但是java后台开发起来费用高、开发周期长、后期的维护成本也很高,所以对于一些启动资金有限的人来说并不划算,但并不代表java后台就不能适用于直播业务。相比之下,php后台不但开发周期短,而且也不需要过高的费开发用,目前大多数软件开发公司都默认是php后台。需要避免的误区就是,java后台和php后台两种都可以选择,只不过php后台从各方面来看的话性价比更高一些。
以上就是java后台和php后台的区别,在此只作参考。对于初试直播软件开发项目的朋友来说,如果实在不知道选择哪种后台的话,不妨把这个棘手的问题交给开发商,让他们帮你制定相对应的直播解决方案,当然,选择正规的官方公司才是最靠谱的。如果大家对直播业务感兴趣,可以在下方与我互动。
本文声明原创,转载请注明出处。
0
评论

在线直播源码打造互动直播平台需要开发的功能 直播平台开发 直播 直播系统源码

q2466131704 发表了文章 • 411 次浏览 • 2019-04-23 16:39 • 来自相关话题

通常情况下,我们在购买一套在线直播源码之前,需要事先了解一下它都包含哪些功能。在直播应用场景下,其自身具备的互动性和实时性是非常显著的特点。要想满足直播的实时性和互动性,并且能够给用户带来优质的产品体验,就需要在功能层面上多下功夫。那么,要想打造一款互动直播平台需要开发哪些功能呢?
1.弹幕功能
直播中最基础且必不可少的就是弹幕功能了。不仅可以带动直播间内的活跃程度,还可以增进用户与主播之间的交流沟通,特别是游戏直播场景下,满屏的弹幕和发送弹幕已经成为直播平台靓丽的“风景线”。当然,在开发弹幕功能时还需要注意弹幕的自动审核,对于弹幕消息进行一定的过滤,从而保证平台的整体语言风气。





2.礼物功能
刷礼物,是直播中最直接也最实现的变现方式。用户以送礼物的形式表达自己对主播的喜爱,而主播也会为了获得更多的礼物努力输出令人感兴趣的直播内容,从而增加直播平台的用户黏性和活跃程度。当然,礼物的配置也需要进行一定的优化,比如支持PC、APP、H5的道具播放效果。
3.活动功能
大多数运营级直播平台都会利用各种各样的节日策划各种活动,以奖励为“噱头”吸引用户参与互动,从而增加平台的用户黏性。
4.任务功能
一些直播平台为了增强用户黏性,提高用户日活量,会在新用户注册之后提供任务指引,比如“观看3位主播的直播,并尝试送礼物1次”,以完成任务的形式发送奖励,打消用户的试玩心理。






5.靓号功能
这一功能主要是给喜欢个性并且有意义号码需求的提供的,就像有的人喜欢换简单好记的手机号,有的人并不介意手机号的排列顺序。
6.会员功能
为用户提供相应的特权服务,将会员分为多个不同的层次,刺激用户进行消费充值,并设定有效期,这也是直播平台能够变现的方式之一。
7.守护功能
大部分直播平台都会具备守护功能,给主播礼物打赏数量最高的会获得守护头像框,并排名在显眼的位置,还可以享受一定的特权服务。
8.游戏功能
小游戏对于互动性强的直播平台来说是必不可少的,主播可以在直播过程中与用户玩游戏进行互动,以游戏的方式增强用户黏性,从而给主播增加一定的观看人数,并且使用户能够感受到强烈的参与感。
所以说,要想打购买在线直播源码并打造一款互动直播平台的话,不仅需要对其质量进行考察,还需要了解其中所包含的功能是否能够调动用户的活跃性和积极性。只有这样,才能增加平台的用户流量,最终实现变现目的。文章结尾给大家提个建议,购买源码还是要找专业的源码服务商才行。
本文声明原创,转载请注明出处及作者。 查看全部
通常情况下,我们在购买一套在线直播源码之前,需要事先了解一下它都包含哪些功能。在直播应用场景下,其自身具备的互动性和实时性是非常显著的特点。要想满足直播的实时性和互动性,并且能够给用户带来优质的产品体验,就需要在功能层面上多下功夫。那么,要想打造一款互动直播平台需要开发哪些功能呢?
1.弹幕功能
直播中最基础且必不可少的就是弹幕功能了。不仅可以带动直播间内的活跃程度,还可以增进用户与主播之间的交流沟通,特别是游戏直播场景下,满屏的弹幕和发送弹幕已经成为直播平台靓丽的“风景线”。当然,在开发弹幕功能时还需要注意弹幕的自动审核,对于弹幕消息进行一定的过滤,从而保证平台的整体语言风气。

47291482820971.jpg

2.礼物功能
刷礼物,是直播中最直接也最实现的变现方式。用户以送礼物的形式表达自己对主播的喜爱,而主播也会为了获得更多的礼物努力输出令人感兴趣的直播内容,从而增加直播平台的用户黏性和活跃程度。当然,礼物的配置也需要进行一定的优化,比如支持PC、APP、H5的道具播放效果。
3.活动功能
大多数运营级直播平台都会利用各种各样的节日策划各种活动,以奖励为“噱头”吸引用户参与互动,从而增加平台的用户黏性。
4.任务功能
一些直播平台为了增强用户黏性,提高用户日活量,会在新用户注册之后提供任务指引,比如“观看3位主播的直播,并尝试送礼物1次”,以完成任务的形式发送奖励,打消用户的试玩心理。

14816215168966_副本.png


5.靓号功能
这一功能主要是给喜欢个性并且有意义号码需求的提供的,就像有的人喜欢换简单好记的手机号,有的人并不介意手机号的排列顺序。
6.会员功能
为用户提供相应的特权服务,将会员分为多个不同的层次,刺激用户进行消费充值,并设定有效期,这也是直播平台能够变现的方式之一。
7.守护功能
大部分直播平台都会具备守护功能,给主播礼物打赏数量最高的会获得守护头像框,并排名在显眼的位置,还可以享受一定的特权服务。
8.游戏功能
小游戏对于互动性强的直播平台来说是必不可少的,主播可以在直播过程中与用户玩游戏进行互动,以游戏的方式增强用户黏性,从而给主播增加一定的观看人数,并且使用户能够感受到强烈的参与感。
所以说,要想打购买在线直播源码并打造一款互动直播平台的话,不仅需要对其质量进行考察,还需要了解其中所包含的功能是否能够调动用户的活跃性和积极性。只有这样,才能增加平台的用户流量,最终实现变现目的。文章结尾给大家提个建议,购买源码还是要找专业的源码服务商才行。
本文声明原创,转载请注明出处及作者。
0
评论

直播平台开发搭建常见问题汇总 直播平台开发

q3557873521 发表了文章 • 307 次浏览 • 2019-04-23 16:00 • 来自相关话题

直播平台开发的重点在于功能设计,以及如何优化提升后期直播平台的用户直播体验,从整个直播平台开发到搭建部署、封装上架,有很多常见的问题是需要我们关注的。我们就来汇总整理下。
1.直播平台CDN是如何计费的?
三方CDN服务为直播平台内容的分发提供了可行性方案。但CDN费用如何计算经常困扰着运营方,尤其是刚刚接触直播平台开发项目的朋友。目前两种主流的CDN计费方式,一种是按照峰值计费,另一种则是按照流量计费。在后期的直播平台运营过程中,当在线用户较多时,建议采用峰值计费方式会更加经济实惠一些。
2.直播平台搭建部署需要准备哪些内容?
针对手机直播APP的搭建部署需要准备的内容主要有:APP名字,APP应用进场图,观看页图等,开通CDN服务,三方接口信息资料,合理的服务器配置,苹果App Store上架和安卓相关应用市场上架需要的内容资料等。
3.苹果开发者账号相关问题
申请苹果开发者账号,主要的目的是用于将应用上架到App Store供用户安装下载。目前苹果开发者账号主要有以下三种:
(1)企业开发者账号:企业账号开发的应用不能上架App Store,通常用于企业内部分发测试应用。申请费用299美元,现阶段来讲企业账号很难申请。需要提供公司的邓白氏编码。
(2)公司开发者账号:申请时需要填写公司的邓白氏编码,可以用来进行应用上架App Store,有条件的话尽量申请。
(3)个人开发者账号:个人开发者账号也可以进行上架,如果用作签名分发时会有设备数量限制,从字面意思看更适用于个人开发者,如果做APP运营推广,还是要申请公司账号。
4.打开直播APP源码用什么开发工具?
安卓端的开发工具:Android studio 
iOS端开发工具:xcode
5.服务器的系统该如何选择?
建议使用Linux 服务系统, CentOS 7.2 64位操作系统。通常直播平台搭建部署环境是支持LNMP或LAMP配置环境的。
6.什么是苹果UDID?
UDID是由子母和数字组成的40个字符串的序号,主要用来区分每一个唯一的iOS设备的标识,当使用个人签名进行应用分发下载时,需要提供设备的UDID给开发者。如果是企业签名分发下载则不需要UDID,而且没有设备数量限制。
7.直播平台开发广泛使用的流媒体协议有哪些? 
比较常见的如UDP私有协议,使用最为广泛的是RTMP协议,在手机网页端观看视频直播则更多地采用HLS传输协议。这些协议各有优劣势,适用的场景也各不相同。
8.直播平台中的 定位功能,跟附近的人功能有何区别?
绝大多数直播平台都具有“定位”功能和“附近的人”功能,二者是不同的。定位功能主要用于直播的个人信息中,显示主播的位置;附近的人功能,则是在主播列表中,用来显示主播和用户之间的距离。
以上这些问题都是大家在直播平台开发搭建运营时经常遇到的,搞清楚这些问题后,会使得整个开发过程更加顺畅。 查看全部
直播平台开发的重点在于功能设计,以及如何优化提升后期直播平台的用户直播体验,从整个直播平台开发到搭建部署、封装上架,有很多常见的问题是需要我们关注的。我们就来汇总整理下。
1.直播平台CDN是如何计费的?
三方CDN服务为直播平台内容的分发提供了可行性方案。但CDN费用如何计算经常困扰着运营方,尤其是刚刚接触直播平台开发项目的朋友。目前两种主流的CDN计费方式,一种是按照峰值计费,另一种则是按照流量计费。在后期的直播平台运营过程中,当在线用户较多时,建议采用峰值计费方式会更加经济实惠一些。
2.直播平台搭建部署需要准备哪些内容?
针对手机直播APP的搭建部署需要准备的内容主要有:APP名字,APP应用进场图,观看页图等,开通CDN服务,三方接口信息资料,合理的服务器配置,苹果App Store上架和安卓相关应用市场上架需要的内容资料等。
3.苹果开发者账号相关问题
申请苹果开发者账号,主要的目的是用于将应用上架到App Store供用户安装下载。目前苹果开发者账号主要有以下三种:
(1)企业开发者账号:企业账号开发的应用不能上架App Store,通常用于企业内部分发测试应用。申请费用299美元,现阶段来讲企业账号很难申请。需要提供公司的邓白氏编码。
(2)公司开发者账号:申请时需要填写公司的邓白氏编码,可以用来进行应用上架App Store,有条件的话尽量申请。
(3)个人开发者账号:个人开发者账号也可以进行上架,如果用作签名分发时会有设备数量限制,从字面意思看更适用于个人开发者,如果做APP运营推广,还是要申请公司账号。
4.打开直播APP源码用什么开发工具?
安卓端的开发工具:Android studio 
iOS端开发工具:xcode
5.服务器的系统该如何选择?
建议使用Linux 服务系统, CentOS 7.2 64位操作系统。通常直播平台搭建部署环境是支持LNMP或LAMP配置环境的。
6.什么是苹果UDID?
UDID是由子母和数字组成的40个字符串的序号,主要用来区分每一个唯一的iOS设备的标识,当使用个人签名进行应用分发下载时,需要提供设备的UDID给开发者。如果是企业签名分发下载则不需要UDID,而且没有设备数量限制。
7.直播平台开发广泛使用的流媒体协议有哪些? 
比较常见的如UDP私有协议,使用最为广泛的是RTMP协议,在手机网页端观看视频直播则更多地采用HLS传输协议。这些协议各有优劣势,适用的场景也各不相同。
8.直播平台中的 定位功能,跟附近的人功能有何区别?
绝大多数直播平台都具有“定位”功能和“附近的人”功能,二者是不同的。定位功能主要用于直播的个人信息中,显示主播的位置;附近的人功能,则是在主播列表中,用来显示主播和用户之间的距离。
以上这些问题都是大家在直播平台开发搭建运营时经常遇到的,搞清楚这些问题后,会使得整个开发过程更加顺畅。
0
评论

同一个网站,手机端跟电脑端显示不同是怎么实现的? 网站建设

jiyulin 发表了文章 • 326 次浏览 • 2019-04-23 12:49 • 来自相关话题

同一个网站,手机端跟电脑端不同是怎么实现的?

常见的方式有三种:

1,自适应网站

同一套代码,自动实现手机端和电脑端的布局自动调整。例如:openGPS.cn 网站现在大部分页面已经支持自适应展示,手机端电脑端都可以访问本站内容,正常阅读。自适应站点,往往是对CSS布局的重点考虑,本站使用的是BootStrap这个前端样式组件实现的自适应布局。

2,网站二级目录

这种是早期网站比较喜欢的做法,因为其实这是一个网站。早期网站往往是使用虚拟主机(也叫空间)发布,一个空间只能放一个网站,所以这种做法在早期特别流行。这种结构本质还是一个网站,但是针对手机电脑客户端单独做了往往对应的一套目录,例如:

电脑站点地址一般是:www.domain.com/xxxxxxx

手机站点地址往往是:www.domain.com/m/xxxxxxx

3,手机站点使用二级域名,电脑手机各一套2套站点代码


这种做法,工作量跟二级目录基本相似,严格来说代码量稍微多点。由于是2套代码,所以发布时候也得配备2套域名,不过要求两套站点连接同一个数据库来实现数据统一。例如:

电脑端网站域名是:www.domain.com

手机端网站域名是:m.domain.com




原文地址: https://www.opengps.cn/Blog/View.aspx?id=302 文章的更新编辑依此链接为准。欢迎关注源站原创文章!
  查看全部
同一个网站,手机端跟电脑端不同是怎么实现的?

常见的方式有三种:

1,自适应网站

同一套代码,自动实现手机端和电脑端的布局自动调整。例如:openGPS.cn 网站现在大部分页面已经支持自适应展示,手机端电脑端都可以访问本站内容,正常阅读。自适应站点,往往是对CSS布局的重点考虑,本站使用的是BootStrap这个前端样式组件实现的自适应布局。

2,网站二级目录

这种是早期网站比较喜欢的做法,因为其实这是一个网站。早期网站往往是使用虚拟主机(也叫空间)发布,一个空间只能放一个网站,所以这种做法在早期特别流行。这种结构本质还是一个网站,但是针对手机电脑客户端单独做了往往对应的一套目录,例如:

电脑站点地址一般是:www.domain.com/xxxxxxx

手机站点地址往往是:www.domain.com/m/xxxxxxx

3,手机站点使用二级域名,电脑手机各一套2套站点代码


这种做法,工作量跟二级目录基本相似,严格来说代码量稍微多点。由于是2套代码,所以发布时候也得配备2套域名,不过要求两套站点连接同一个数据库来实现数据统一。例如:

电脑端网站域名是:www.domain.com

手机端网站域名是:m.domain.com




原文地址: https://www.opengps.cn/Blog/View.aspx?id=302 文章的更新编辑依此链接为准。欢迎关注源站原创文章!
 
0
评论

(客服云)iOS访客端集成常见问题(非报错) 客服云

kijieoeew 发表了文章 • 573 次浏览 • 2019-04-08 10:27 • 来自相关话题

1、UI上很多地方显示英文,比如聊天页面的工具栏




把客服demo中配置的国际化文件添加到您自己的工程中。拖之前要打开国际化文件,全部选中这三个,再进行拖入。




 
2、进入聊天页面没有加载聊天记录
这种情况一般出现在只使用了 HDMessageViewController 没有使用 HDChatViewController 的时候
在HDMessageViewController 的 viewDidLoad 方法中, 将 [self tableViewDidTriggerHeaderRefresh]; 的注释打开,再在这之前
加上 self.showRefreshHeader = YES; 这句代码
 
3、发送表情却显示字符串




把下面这段代码添加到appdelegate中就可以了
[[HDEmotionEscape sharedInstance] setEaseEmotionEscapePattern:@"\\[[^\\[\\]]{1,3}\\]"];
[[HDEmotionEscape sharedInstance] setEaseEmotionEscapeDictionary:[HDConvertToCommonEmoticonsHelper emotionsDictionary]];
 
4、文本消息,收发双方的布局不一样,如图




参考一下截图修改即可





5、客服能收到访客的消息,访客收不到客服的消息
(1)客服和im同时使用的话,初始化sdk、登录、登出用的是im的api会出现这种情况。必须使用客服的api。
(2)IM sdk升级为客服sdk,不兼容导致的,这种情况可以线上发起会话咨询。
     
6、发送的消息,出现在聊天页面的左侧
一般是由于当前访客没有登录或者登录失败,断点仔细检查下。 查看全部
1、UI上很多地方显示英文,比如聊天页面的工具栏
显示英文1.png

把客服demo中配置的国际化文件添加到您自己的工程中。拖之前要打开国际化文件,全部选中这三个,再进行拖入。
显示英文2.png

 
2、进入聊天页面没有加载聊天记录
这种情况一般出现在只使用了 HDMessageViewController 没有使用 HDChatViewController 的时候
在HDMessageViewController 的 viewDidLoad 方法中, 将 [self tableViewDidTriggerHeaderRefresh]; 的注释打开,再在这之前
加上 self.showRefreshHeader = YES; 这句代码
 
3、发送表情却显示字符串
访客端表情符号.png

把下面这段代码添加到appdelegate中就可以了
[[HDEmotionEscape sharedInstance] setEaseEmotionEscapePattern:@"\\[[^\\[\\]]{1,3}\\]"];
[[HDEmotionEscape sharedInstance] setEaseEmotionEscapeDictionary:[HDConvertToCommonEmoticonsHelper emotionsDictionary]];
 
4、文本消息,收发双方的布局不一样,如图
文本消息布局错误1.png

参考一下截图修改即可
文本消息布局错误2.png


5、客服能收到访客的消息,访客收不到客服的消息
(1)客服和im同时使用的话,初始化sdk、登录、登出用的是im的api会出现这种情况。必须使用客服的api。
(2)IM sdk升级为客服sdk,不兼容导致的,这种情况可以线上发起会话咨询。
     
6、发送的消息,出现在聊天页面的左侧
一般是由于当前访客没有登录或者登录失败,断点仔细检查下。
0
评论

(客服云)iOS访客端集成常见报错(总有一款适合你) 客服云 报错集锦 iOS访客端

kijieoeew 发表了文章 • 852 次浏览 • 2019-04-02 17:02 • 来自相关话题

注意:向自己工程中添加环信SDK和UI文件的时候,不要直接向xcode中拖拽添加,先把SDK和UI文件粘贴到自己工程的finder目录中,再从finder中向xcode中拖拽添加,避免出现找不到SDK或者UI文件的情况。
 
1、如果工程中引入的是不带音视频版本的sdk:HyphenateLite.framework和HelpDeskLite.framework,#import <HelpDeskLite/HelpDeskLite.h> 头文件报错的话,那么把HDMessage.h中的#import <Hyphenate/Hyphenate.h>改成#import <HyphenateLite/HyphenateLite.h>即可(HDMessage.h 用xcode全局搜索不到,需要到sdk里面去找)。
 
2、很多同学在首次“导入SDK”或“更新SDK重新导入SDK”后,Xcode运行报以下的error:
dyld: Library not loaded: @rpath/Hyphenate.framework/Hyphenate
  Referenced from: /Users/shenchong/Library/Developer/CoreSimulator/Devices/C768FE68-6E79-40C8-8AD1-FFFC434D51A9/data/Containers/Bundle/Application/41EA9A48-4DD5-4AA4-AB3F-139CFE036532/CallBackTest.app/CallBackTest
  Reason: image not found
       这个原因是工程未加载到 framework,正确的处理方式是在TARGETS → General → Embedded Binaries 中添加HelpDesk.framework和Hyphenate.framework依赖库,且 Linked Frameworks and Libraries中依赖库的Status必须是Required。




 
3、运行之后,自变量为nil,这就有可能是因为上面所说的依赖库的status设置为了Optional,需要改成Required。




 
4、打包后上传到appstore报错
(1)ERROR ITMS-90535: "Unexpected CFBundleExecutable Key. The bundle at 'Payload/toy.app/HelpDeskUIResource.bundle' does not contain a bundle executable. If this bundle intentionally does not contain an executable, consider removing the CFBundleExecutable key from its Info.plist and using a CFBundlePackageType of BNDL. If this bundle is part of a third-party framework, consider contacting the developer of the framework for an update to address this issue."
方法:把HelpDeskUIResource.bundle里的Info.plist删掉就即可。




(2)This bundle is invalid. The value for key CFBundleShortVersionString ‘1.2.2.1’in the Info.plist must be a period-separated list of at most three non-negative integers. 




把sdk里的plist文件的版本号改成3位数即可




(3)Invalid Mach-O Format.The Mach-O in bundle “SMYG.app/Frameworks/Hyphenate.framework” isn’t consistent with the Mach-O in the main bundle.The main bundle Mach-O contains armv7(bitcode) and arm64(bitcode),while the nested bundle Mach-O contains armv7(machine code) and arm64(machine code).Verify that all of the targets for a platform have a consistent value for the ENABLE_BITCODE build setting.”




将TARGETS-Build Settings-Enable Bitcode改为NO




(4)还有很多同学打包失败,看不出什么原因




那么可以先看看有没有按照文档剔除x86_64 i386两个平台
文档链接:http://docs.easemob.com/cs/300visitoraccess/iossdk#%E4%B8%8A%E4%BC%A0appstore%E4%BB%A5%E5%8F%8A%E6%89%93%E5%8C%85ipa%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9
 
5、那么剔除x86_64 i386时会遇到can't open input file的错误,这是因为cd的路径错误,把“/HelpDesk.framework”删掉。是cd到framework所在的路径,不是cd到framework




 
6、下图中的报错,需要在pch文件添加如下判断,环信的和自己的头文件都引入到#ifdef内部
   #ifdef __OBJC__
   #endif








 
7、集成环信HelpDeskUI的时候,由于HelpDeskUI内部使用了第三方库,如果与开发者第三方库产生冲突,可将HelpDeskUI中冲突的第三方库删除,如果第三方库中的接口有升级的部分,请酌情进行升级。




 
8、集成1.2.2版本demo中的HelpDeskUI,Masonry报错:Passing ‘CGFloat’(aka ‘double’) to parameter of incompatible type ‘__strong id’
需要在pch中添加#define MAS_SHORTHAND_GLOBALS
注意:要在#import "Masonry.h"之前添加此宏定义 查看全部
注意:向自己工程中添加环信SDK和UI文件的时候,不要直接向xcode中拖拽添加,先把SDK和UI文件粘贴到自己工程的finder目录中,再从finder中向xcode中拖拽添加,避免出现找不到SDK或者UI文件的情况。
 
1、如果工程中引入的是不带音视频版本的sdk:HyphenateLite.framework和HelpDeskLite.framework,#import <HelpDeskLite/HelpDeskLite.h> 头文件报错的话,那么把HDMessage.h中的#import <Hyphenate/Hyphenate.h>改成#import <HyphenateLite/HyphenateLite.h>即可(HDMessage.h 用xcode全局搜索不到,需要到sdk里面去找)。
 
2、很多同学在首次“导入SDK”或“更新SDK重新导入SDK”后,Xcode运行报以下的error:
dyld: Library not loaded: @rpath/Hyphenate.framework/Hyphenate
  Referenced from: /Users/shenchong/Library/Developer/CoreSimulator/Devices/C768FE68-6E79-40C8-8AD1-FFFC434D51A9/data/Containers/Bundle/Application/41EA9A48-4DD5-4AA4-AB3F-139CFE036532/CallBackTest.app/CallBackTest
  Reason: image not found
       这个原因是工程未加载到 framework,正确的处理方式是在TARGETS → General → Embedded Binaries 中添加HelpDesk.framework和Hyphenate.framework依赖库,且 Linked Frameworks and Libraries中依赖库的Status必须是Required。
1访客端_image_not_found.png

 
3、运行之后,自变量为nil,这就有可能是因为上面所说的依赖库的status设置为了Optional,需要改成Required。
2访客端自变量为nil.png

 
4、打包后上传到appstore报错
(1)ERROR ITMS-90535: "Unexpected CFBundleExecutable Key. The bundle at 'Payload/toy.app/HelpDeskUIResource.bundle' does not contain a bundle executable. If this bundle intentionally does not contain an executable, consider removing the CFBundleExecutable key from its Info.plist and using a CFBundlePackageType of BNDL. If this bundle is part of a third-party framework, consider contacting the developer of the framework for an update to address this issue."
方法:把HelpDeskUIResource.bundle里的Info.plist删掉就即可。
3访客端打包90535.png

(2)This bundle is invalid. The value for key CFBundleShortVersionString ‘1.2.2.1’in the Info.plist must be a period-separated list of at most three non-negative integers. 
4访客端打包90060.png

把sdk里的plist文件的版本号改成3位数即可
5访客端打包1.2_.2_.1位置_.png

(3)Invalid Mach-O Format.The Mach-O in bundle “SMYG.app/Frameworks/Hyphenate.framework” isn’t consistent with the Mach-O in the main bundle.The main bundle Mach-O contains armv7(bitcode) and arm64(bitcode),while the nested bundle Mach-O contains armv7(machine code) and arm64(machine code).Verify that all of the targets for a platform have a consistent value for the ENABLE_BITCODE build setting.”
6访客端打包90636.png

将TARGETS-Build Settings-Enable Bitcode改为NO
7访客端打包bitcode改为NO.png

(4)还有很多同学打包失败,看不出什么原因
8访客端打包需剔除.png

那么可以先看看有没有按照文档剔除x86_64 i386两个平台
文档链接:http://docs.easemob.com/cs/300visitoraccess/iossdk#%E4%B8%8A%E4%BC%A0appstore%E4%BB%A5%E5%8F%8A%E6%89%93%E5%8C%85ipa%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9
 
5、那么剔除x86_64 i386时会遇到can't open input file的错误,这是因为cd的路径错误,把“/HelpDesk.framework”删掉。是cd到framework所在的路径,不是cd到framework
9访客端剔除cd错误.png

 
6、下图中的报错,需要在pch文件添加如下判断,环信的和自己的头文件都引入到#ifdef内部
   #ifdef __OBJC__
   #endif
10pch加判断1.png

11pch加判断2.png

 
7、集成环信HelpDeskUI的时候,由于HelpDeskUI内部使用了第三方库,如果与开发者第三方库产生冲突,可将HelpDeskUI中冲突的第三方库删除,如果第三方库中的接口有升级的部分,请酌情进行升级。
12第三方库冲突.png

 
8、集成1.2.2版本demo中的HelpDeskUI,Masonry报错:Passing ‘CGFloat’(aka ‘double’) to parameter of incompatible type ‘__strong id’
需要在pch中添加#define MAS_SHORTHAND_GLOBALS
注意:要在#import "Masonry.h"之前添加此宏定义
13访客端Masonry报错.png