说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

PubNub+Cloudinary:简单几步快速搭建实时图片分享应用

HTML文档下载 WORD文档下载 PDF文档下载
如今,人们希望通过Web、移动应用来进行实时性的交互式体验,而PubNub和Cloudinary的消息推送以及基于云端图片处理的功能就能满足人们的需求。那它们的工作流程是怎样的,具体又是怎么工作的呢?

如今,人们希望通过Web、移动应用来进行实时性的交互式体验,而PubNub和Cloudinary的消息推送以及基于云端图片处理的功能就能满足人们的需求。

PubNub是一个非常强大且易于使用的云服务,可进行实时的推送信息应用。而Cloudinary是一个基于云端的图片处理、管理、存储、美化于一体的平台,同时还集成了图片抓取功能,提供API接口。


它们的工作流程很简单:使用Cloudinary让用户在云端上传很多他们想上传的图片,然后通过PubNub发送消息,通知所有与其相关的用户。接收人可以通过Cloudinary来生成与他们特定设备比例相匹配的最初图片,有效的获得图片的最佳视觉体验。上述所有的一切都没有涉及到复杂的编码、调度配置或CPU负载。

具体是如何工作的呢?
 
首先,你可以从GitHub中浏览并复制所有的源代码。

1.首先在页面中嵌入文件输入字段。该字段包含一个在服务器端生成的签名,用来授权浏览器使用Cloudinary的jQuery插件安全上传图片到Cloudinary中。下面的Ruby代码嵌入了签名的输入字段。更多详细信息,请参阅这篇文章。

cl_image_upload_tag(:photo_id, :resource_type => :image,                    :transformation => incoming_transformation)

在云端存储图像之前,:transformation参数通过使用incoming_transformation来限制图像大小、并在图片上添加水印。

这是有关incoming_transformation的定义: 

incoming_transformation = [ { width: 1200, height: 1200, crop: 'limit'},                            { overlay: 'logos_watermark', width: 0.7,                               flags: 'relative', opacity: 40, gravity: 'north', y: 20 } ]

此外,自定义的输入字段和拖动区以及上传进度条都使用了CSS和jQuery(见源代码)来实现的。

 2.当用户单击Share按钮时,具有照片标识的Ajax请求被发送到服务器端,服务器安全地发布一条信息到我们的共享PubNub通道。

以下是服务器端Ruby代码接收标识符和其他的细节信息并发布到PubNub通道, 该通道使用的Ruby库:

preloaded = Cloudinary::PreloadedFile.new(params[:photo_id])         pubnub = Pubnub.new( :publish_key => PUBNUB_PUBLISH_KEY,                      :subscribe_key => PUBNUB_SUBSCRIBE_KEY )pubnub.publish({    :channel => PUBNUB_CHANNEL,    :message => {        cloudinary_photo_id: preloaded.identifier,        user: params[:user],        message: params[:message],        kind: params[:kind],        time: Time.now.utc.iso8601    },    :callback => lambda { |x| $stderr.puts("Shared #{preloaded.public_id}: #{x}") }})

3.客户端代码在浏览器中使用PubNub的Javascript库为新消息预订一个PubNub的通道

var pubnub = PUBNUB.init({ subscribe_key: PUBNUB_SUBSCRIBE_KEY});pubnub.subscribe({ channel : PUBNUB_CHANNEL,                   callback : show_message });

当接收到消息时,该消息中包含了照片上传到Cloudinary中的公共ID。以下是Javascript代码使用Cloudinary的jQuery插件,来显示一个动态转换、基于脸部检测通过CDN的照片缩略图。一旦单击图片,最初上传的图片(该图片含有水印)就会显示出来。

function show_message(message) {  var link = $('<a></a>').    attr('href', $.cloudinary.url(message.cloudinary_photo_id)).    append($.cloudinary.image(message.cloudinary_photo_id,                { width: 150, height: 100, crop: "fill",                 gravity: "face", radius: 20, effect: "sepia"});  $('.stream').prepend($('<li></li>').append(link));}

此外,Javascript代码可获取最近的5个消息,这些消息是在页面加载之前发布的。这是通过使用PubNub的History来是实现的。

pubnub.history({    channel  : PUBNUB_CHANNEL,    limit    : 5,    callback : function(history) { $.each(history, function() { show_message(this); })}});

文章来源:cloudinary.com

TreeView在电信综合统计管理系统中的应用-Delphi资料 VB6.0动态加载ActiveX控件漫谈-Delphi资料 捕捉来自 Thread 的异常-Delphi资料 定制Speedbar-Delphi资料 动态产生构件并相应事件-Delphi资料 对Borland可视部件的一处改进-Delphi资料 控件使用技巧-Delphi资料 改变VCL的行为--一个使用可视化元件的实例-Delphi资料 具有不同字体的列表框-Delphi资料 快速大量地更改控件内容-Delphi资料 快速动态创建MenuItem-Delphi资料 利用Delphi 5中调用Excel 97 利用Delphi的Tbitmap控件抓取屏幕图象 利用delphi美化你的菜单 面向组件的系统开发方法-Delphi资料 强大的树型编程控件TeeTree1.01-Delphi资料 确定MEMO控件中的当前行和列-Delphi资料 让字体左、右对齐-Delphi资料 如何给TListBox加上水平的滚动条?-Delphi资料 如何快速选择一个组件的父亲-Delphi资料 如何用Delphi编写自己的可视化控件 如何用VB创建控件-Delphi资料 生成程序组和项-Delphi资料 实现超级链接-Delphi资料 实战Delphi数据网格色彩特效 使dbgrid的某几笔资料变色-Delphi资料 树形图(Treeview)的使用概述-Delphi资料 透明FORM-Delphi资料 为列表框添光彩-Delphi资料 限制FORM的大小-Delphi资料 用Delphi开发分隔线组件 哪儿有visio2002共享版下载?破解了30天试用的。 快考试了,15天,我要速成C++。提点建议。我才学到for语句! 如何获得当前窗口的名字? socket套接字的锁定和重叠是什么意思?有什么区别?谢谢 各位高手请指教:一个页面跳转问题!!急急!!用输入数值跳转到相应页面: 关于server的设置问题!!急 用C#访问window.parent……,可以吗??? 真的没人知道????????? 我想学autocad,不知autocad能做矢量图吗??? 请问写检查内存泄漏的测试程序有什么好的方法吗?不用工具 Exchange5.5怎样才能屏蔽不相关的垃圾邮件? 有用C语言编的五子棋吗???? 请问大侠,谁会使用Rational Robot? 我做了一个监控程序,如何实现重新启动该程序??? 请问那位高手:如何用jdk开发自己的包!以供别人使用!! 50分求助,谢谢!~~在线等待! 请教 关于猴子分花生的问题 路漫漫其修远兮,征成熟软件开拓市场! 学习项目管理手记 vb能否做出象中国游戏在线中心这样的客户端? 关于COM调用的问题 jsp中有没有取前一天,后一天的数据的类,相当于数据库中的dateadd(dd,1,'')函数?? 我想做一个类似XP Form的模板,请问窗体改变尺寸的消息是什么?谢谢! 想用VC做三星手机N188里的音乐编辑器。 大家好:如何用Delphi报表打印信封,还要有邮政编码,就是像个信封。谢意! 请问那位高手:如何用jdk开发自己的包!以供别人使用!! DataGrid如何调整每列的高度? 在Vbscript中,我的这段代码有问题吗? 使用vc++写一个关于检测网络流量和硬盘读写速度的软件使用哪几个函数? 求救:我在GUI中用到了Jbuilder的xyLayout,怎样打包成为一个独立的应用程序 答者有分 dbGrid 高分!! 谁有jdk的帮助呀?或是我该在哪里下载? 中国队世界杯进攻名列倒数第一 数据库该学哪种语言??? =====在英文系统下,我用vc,为什么edit控件不能输入中文?==== 急!高分求助:水晶报表在Web上的打印问题 MaskEdBox控件的一个简单问题 凭证检索错误 层的显示位置问题? 数据库该学哪种语言??? 高手进来 TClientSocket和TServerSocket之间采用阻塞方式通信,讨论 大家请帮帮忙!一个关于数据库备份的问题!先谢了! 关于汉诺塔升级版。 TClientSocket和TServerSocket之间采用阻塞方式通信,讨论 如何将系统的短日期格式由yy-MM-dd改为yyyy-MM-dd 100分,再次求助,关于jsp中应用java bean的问题! 求助:如何在自己的程序里控制其它应用程序,主要实现对另一应用程序的鼠标定时自动单击 请求4个带"风"字的两个字的词语?1.比喻纠纷或乱子.2.比喻听过后不放在心上.3.比喻和悦的神色.4.比喻气势浩大的猛烈的冲击力量. 一个正方体所有棱长之和是6米,这个正方体的体积是( )立方米?一个长方体的长和宽都扩大四倍,高不变,体积就扩大( )倍。 如何做好自我保护作文600字左右 鸭子和兔子共30只,共有100条腿,鸭和兔各有多少只?不要列方程解,必须用算术法解,先答对的给分. 一个长方体水池长十五米,宽8米,深3米.在它的底面积和四周抹上水泥,如果每平方米抹水泥2.5千克,那么至少要用多少千克水? 19《月亮上的足迹》登月之前的全过程!(是登月之前的,不是登月的!) 小学一年级数学题青蛙、鱼、燕子、鹿、兔子、猫、鸭子、乌龟如何分类按以下5种分类1、有两只脚的:2、有四只脚的:3、能在水里游的:4、能在地上走的:5、能在空中飞的: sin2α=sin^2(α+π/4)-cos^2(α+π/4)=2sin^2(a+π/4)-1=1-2cos^2(α+π/4); cos2α=2sin(α+π/4)cos(αsin2α=sin^2(α+π/4)-cos^2(α+π/4)=2sin^2(a+π/4)-1=1-2cos^2(α+π/4)cos2α=2sin(α+π/4)cos(α+π/4)没有看懂……】 登月示意图怎么画明天就要交了,答的好还有分加 急求带然字词语(两个字的). 关于古埃及金字塔及木乃伊介绍关于这方面的知识,越多越好,知识面越广越好 埃及金字塔的由来?法老王的诅咒是真的么?是否金字塔里都有一具木乃伊?为什么埃及文明会被毁灭?木乃伊是否真的能千年不腐坏?狮身人面像是1万年前的事? 用带点的两个字再组几个词,谢谢! 有含盐10%的盐水120克,要使盐水的含盐率为25%,(你能想出两种不同的方法吗?) 什么是极坐标法? 樱桃的介绍我要有关樱桃的形,色,味,种类,产地,营养价值,详细点,要点我不知道的!详细详细!要看得懂啊! 把12克盐溶入120克水中,盐水的含盐率为10% ( ) 答了的谢谢. 关于月球,登月 探索太空的事例 樱桃的英语介绍 形容泉水的成语是什么?是说明泉水对万亩良田的作用,形容泉水的用处 例子:古时候,人们想飞到月亮上,现在有了登月火箭.古时候,人们想到海底采宝,现在有了( ).古时候,人们想( ),现在有了( ),将来会有( ) 市场上买一种水果,红色圆形,外形像樱桃但比樱桃大很多,直径约2厘米.味道很甜有微酸味,这是什么水果?不是提子,也不是车厘子,它比车厘子大很多,冬季市场上看见的.不是常见的大樱桃. 古巴比伦的地形 气候 植被 的特点 登月球,探索宇宙.是中国( )的梦想填一个恰当的成语,表示时间很长久.(或者古往今来、从古至今这两个行不行啊,哪个更好啊) 4只鸭和4只鸡一共卖228元,2只鸭和3只鸡一共要139元,每只鸡卖多少元?每只鸭呢? 有一个长方形水池长是20米,宽15米,如果在水池四周仅靠水池修一条宽为两米的路那么这条路的面积是多少平方米?求您帮助我一定会采纳, 水管进水出水问题有一蓄水池有9根水管,一根进水管,8根相同的出水管,进水管匀速注水,有人想打开出水管,使池内的水全部排光(这时池内已有一些水),如果8根出水管全部打开,需3个小时全 金字塔有哪些特点 一个长方形水池,长88米,宽48米,沿水池四周有一条宽度相等的路,这路的面积是1776平方米,求这条路的宽 1.一艘轮船的静水速度是每小时15千米,这艘船从出发地逆水行驶88千米需要11小时,这艘船返回出发地需要多少小时?2.甲,乙两码头相距144千米,一艘船从甲码头逆水行驶8小时到达乙码头,已知船 甲丙两管注水,乙丁两管排水,单开甲3小时注满,单开丙5小时注满,单开乙4小时排光,单开丁6小时排光,现水池空的,甲乙丙丁这个顺序轮着各开1小时,求几小时溢出.我算了,是24又9/10,可答案是28又1 已知2sinα=cosα,则cos2α+sin2α+1/cos^2 α的值是? 一项工程完成比时间提前4天完成.如果乙独做会超过时间6天,现在甲乙做4天,再由乙完成,求甲,乙工作效率. 世界上有没有白色的蟑螂? 盐和盐水的比是1比20,120克盐水含盐多少克? 一张面积为150厘米的木板做一个正方体的箱子,箱子的棱长是多少厘米? 弧长的计算公式长14米,宽7米,高2.5米,请问弧长多少?怎么计算?还请大家帮忙,急,谢谢! 四桶油,把乙的1/2给甲,再丙的1/3给乙,把丁的1/4给丙,这时四桶油都是30升,求每桶油(数学题) 在120克汉盐率为20%的盐水中,加入很多少克盐,使盐水的含盐率变为25%?用百分数那一单元的知识解答,不要方程 枫字组词 狗与狗或牛与牛或马与马或鸭与鸭兔与兔们是怎么交流的? 欧洲,亚洲,非洲,南美洲,北美洲,大洋洲的主要植被是什么 带枫字的词语有什么?可以是4字词!可以是3字的! 公鸡.猫.青蛙.牛.猪.鸭子.布谷鸟.狗怎么叫 一个圆柱的体积是50.24立方厘米底面直径是4厘米,高是多少 小明在“观察水的沸腾”实验中,当水温升到89度时,小刚开始计时,每 观察水的沸腾 (实验结论?)(实验中发现的问题和现象?) 一个圆柱的体积是50.24立方厘米低面直径是4厘米高是多少厘米 金字塔的特点,急用!关于五年级课文的 如何画出数学图形中的不规则阴影部分面积我的意思是:如何在文档中插入一个综合图形,其中有一部分得打上阴影,那么如何画出这个带有阴影的综合图形。用什么软件?还是word文档中的 大洋洲的岛屿可以分成3类:( )、( )、( ).其中新西兰南北2岛属于( )岛 用风组词(两个字的) 求阴影面积 一个圆柱的体积是50.24立方厘米,高是4厘米,它的底面直径是多少厘米不然明天我挨批你赔我精神损失费! 两个字的关于风的词语什么样的都行,只要是关于风的词语就行. 求一个内涵好的词语(两个字的) 一个圆柱的体积是31.4立方厘米,如果直径扩大为原来的4倍,高不变,这是圆柱的体积是()立方厘米. 含有"风"字词语(两个字) 一个正方体的棱长为0.5米,它的体积是多少立方米? 把他们串成一段描述古埃及的文字:尼罗河,金字塔,法老,木乃伊,太阳历,象形文字
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘