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

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

VB如何动态更新数据报表 VB如何改变 NT 预设的打印机? VB如何改变 Windows 预设的打印机 VB如何关闭其他程序 VB如何过滤键盘录入 VB如何获得Windows95已经运行的时间 VB如何检测左右键同时按下? VB如何检查您的电脑是否打开 ActiveDesktop? VB如何将程序建立成“启动”文件夹的捷径? VB如何将程序建立成「启动」资料夹的捷径。 VB如何结束 Shell 所启动的程序? VB如何拦截键盘输入 如何判定VB调用的一个EXE程序已经结束. VB如何判断某一个Drive是否为光碟机? VB如何清空回收站? VB如何取得汉字的区位码 VB如何去优化你的VB程序 VB如何让点阵打印机每次印出一行? VB如何设计一个可中断循环的按钮。 VB如何实现VB程序登录密码加密 VB如何使程序不出现在任务列表中 VB如何使键盘、Mouse失效(JournalPlayBack Hook) VB如何使用 DBGrid VB如何突破 TextBox 32K 的限制? VB如何为执行程序加上参数? VB如何压缩较长的全路径文件名中的路径 (Path) 字串长度? VB如何在VB中实现密码的读取 如何在VB中使用命令行参数 VB如何在内存中的指定位置取数据? VB如何在已经存在的文本的textbox添加新的一行 VB如何在資料庫中存入單引號? 在1024*768的屏幕设置下,怎么样是网页在中间显示而不是在左上角显示呢?Thank you very much! 普通链接问题…… 如何把oracle数据文件转化成文本文件 怪问题,大问题,我的发邮件程序,为何停不下来了?每分钟退回我的信箱几十封信,我都快疯掉了 263电子邮件现在开始收费了,我们公司现在有两台空闲的服务器,100M共享带宽,兄弟们大家联合起来... 请教各位高手,如何把API函数coCreateGuid产生的GUID数据类型转化为string 统计性骚扰! 怎样用java 开发web service?请各位高手发表意见 本人一直对线上购物心存疑惑,请有经验者进来指点一下~~~ 关于memfile的例子改进的补充 请教链表的问题 别名问题 并口控制? 怎样用java 开发web service?请各位高手发表意见 SOS !!!在树型控件中怎样获得子树的内容!!!??? JAVABEAN与应用程序 当我准备在一个项目构造很多Class时,Class的分类可以通过放在嵌套名字空间中实现,或者通过多级的子Class来实现,两种方法有什么不同。 有什么办法知道一个新建的域用户是第一次登录到域中 请问在DB2里怎样取出一段VarChar型字段的长度? 局域网共享ISDN,IP的设定问题。 有什么办法知道一个新建的域用户是第一次登录到域中 如何用TC使编译后的文件为LIB? 烦!为什么我今天(以前挺正常的)发任何贴子,贴子里无论是什么内容都会出错:“无法显示 XML 页。。。”希望管理人员把解决的方法mail 那些软件可以查看可执行文件使用了哪些API? 眼睛瞎掉才能够活的更好? 急需asp语音聊天室源码!!! 用openssl生成多级CA证书有特殊的要求么? 帮忙,谁有CGI计数器源程序代码? 请问怎样把Tcaption类型转化为Pchar类型? java的网络编程 有谁知道RootNode的函数原型??? 哪里有中文版的delphi帮助或手册??? 比市场价低3000的全新的 康柏 2710 CWnd很少用,有些地方弄不明白。 我的Flash做了一个banner468*60,可是,放在网页上之后,超出了这个范围之内显示,怎么办,那样会很难看的???哪位能帮帮我呀?? 怎么样捕捉SQL-Server的错误 请解释:VC6环境的自动完成功能在什么情况下会不起作用??? 请问Delphi的控件只有bpl、dcu、res、frm,在BCB中怎么使用?谢谢! 怎么把數據寫入.dbf中!!!!!!!!!!!!! 为什么不能在WIN2K下运行?? help!! 哪位高能告诉我怎么做? 头文件怎么写? 有人知道split函数的详细用法吗,各个参数的意义? 真的有所谓的第四种情感吗????? 请问怎样在HTML的编程环境下,能直接读取到JPG和GIF图片文件的高度和宽度(用pixel表示)? 有没有与msxml4.0有关的基础性的文章? ---> 服务器端和客户端软件同时写一个数据项产生冲突,如何解决???急急急 <--- 为什么我的函数声明编译出错 com中如何创建非可视组件实例 有关程序员考试的问题,请大家帮帮忙!!谢谢! 请问小学判断题:5是质因数 对还是错?“5是质数”和“5是质因数”之间有区别么?另外,质因数的概念是出现在分解质因数中的,所以,5是质数,没错。5是25的质因数,也没错。但单独说 有一个三位数,在它的右边添一个0,所得的四位数比它多1323,求这个数是多少 质量为M的木箱受推力F作用,在水平地面上直线运动.木箱和地面间的动摩擦因数为μ,木箱收到地面支持力是木箱收到的滑动摩擦力是多少? 如图,AD为圆内接三角形ABC的外角角EAC的平分线,它与圆交于点D,F为BC上的点(1)求证:BD=DC(2)请你再补充一个条件使直线DF一定经过圆心,并补充说明. 1+111=? 看书上说物体在水平支持面上,在竖直方向只受重力和支持力,且物体处于平衡状态时,F=G.那么压力呢?怎么不是压力和支持力而是重力和支持力呢?重力和压力到底有什么区别?怎么不是压力和支 如图,AD是三角形ABC的外角角EAC的平分线,AD与三角形外接这个接着要怎么写? 试猜测根号2010个(111...1)-1005个(222...2)的结果 一个物体静止地放在水平支持面上,物体对支持面的压力就是物体所受重力.(请问这句话为什么不对?) 木块A、B分别重50N和60N,它们与水平地面之间的动摩擦因数均为0.24.夹在A、B之间的轻弹簧被压缩了2cm,弹簧的劲度系数为400N/m.系统置于水平地面上静止不动. (1)现用F=1N的水平拉力作用在 在三角形ABC中,角B=角C,AD平分外角角EAC,说明AD平行BC 1就是fx在点(x,f(x))处得曲线的切线方程为y=kx+b,其中斜率k代表什么?是不是等于fx的导数?b呢?2数学归纳法中我设n=k时成立,结果证明后得到n=k+2也成立,但没有证出n=k+1成立, 木块A、B分别重50N和60N,它们与水平地面之间的动摩擦因数均为0.25,夹在A、B之间的轻弹簧被压缩了2cm,弹 已知s=1+11+111+1111+···+111·······(一百个),那么S的最后四个数字构成的四位数是多少 正常数a,b和正变数x,y满足a+b=10,a/x + b/y=1 ,x+y最小值=18,求a ,b 的值 A﹑B两木块重分别为50N和70N,用细线绕过滑轮连接在一起并叠放在水平桌面上,A与B、B与桌面C之间的动摩擦因数μ均为0.3.当对滑轮以水平力F=30N时,A对B的摩擦力和B对C的摩擦力各是多大?方向如何 2道数学题八年级一次函数1.一次函数y=kx+b,当-3≤x≤1时,对应的函数值为-1≤y≤9,求k的值2.已知M(3,2),N(1,-1),点p在y轴上且PM+PN最短,求点P的坐标 〔2004-1〕+〔2003-2〕+〈2002-3〉+…+〔1003-1002〕 AB两木块均为60N,用细线绕过滑轮连接在一起并叠在水平桌面上A与B、B与桌面C之间的摩擦因素均为0.3,当对滑轮施以水平力F=30N则A、A对B的摩擦力为15N B、A对B的摩擦力为18NC、B对C的摩擦力为30N D 一道初二一次函数数学题,急!设函数y=x-2与y=1/x的图像的一个交点的横坐标为a,b,则1/a-1/b= 质量是10千克的木箱放在水平桌面上,用10牛的力推着他匀速直线运动,木箱收到的摩擦力为多少 已知:如图,在△ABC中,∠B=∠C,AD平分外角∠EAC,求证:AD‖BC. 某物流公司的快递车和货车同时从甲地出发,以各自的速度匀速向乙地行驶,快递车到达乙地后缷完物品再另装货物共用45分钟,立即按原路以另一速度匀速返回,直至与货物相遇.已知货车的速 摩擦力的问题 例题:4.有一质量为100 g 的木箱,在水品桌面上做匀速直线运动,所受的水平拉力是摩擦力的问题例题:4.有一质量为100 g 的木箱,在水品桌面上做匀速直线运动,所受的水平拉力是0 一个等腰梯形的面积是20平方分米,高是4米,上底是3米,下底币上底长多少米?打错了,不是币,是比! 后备空姐开始时候的那首英文歌感觉很有节奏 叫什么名字啊 一个重力为100N的物体放在水平地面上处于静止状态,当用60N的力竖直向上提它时,物体所受合力是多少?是0N,还是40N 希望给予过程 一个等腰梯形的面积是20平方米,高是8米,下底3米,上底3米,上底比下底短几米?我要列式!我把分都给你~ 准备考空姐,但英语完全不行,也没有基础,学起来难吗? 1.直线y=-x+3沿着x轴平移后经过点(2,-1),则平移后直线的解析式为____,直线沿x平移了____个单位.2.直线m与直线y=2x-3的交点横坐标为2,与直线y=-x-1交点的纵坐标为-1,求m的解析式(要过程) 如图所示,人重600N,木板重为400N,人与木板,木板与水平地面之间动摩擦因数为0.2.现在人用水平力拉绳,使他与木板一起向右 匀速运动,求:⑴ 人拉绳的力的大小; ⑵ 人的脚给木板的摩擦力的大小 1、这些空姐后天将回到北京.2、我们家下个月准备去罗马.译成英文 如图,已知,四边形ABCD中,CA平分角BCD,AC是BC与DC的比例中项,求证AB平方:AD平方=BC:CD 如图所示,人重600N,木板重为400N,人与木板,木板与水平 地面之间动摩擦因数为0.2.现在人用水平力拉绳,木板一起向右匀速运动,\x0d 则人拉绳的力是100N\x0d ——为什么不是200N\x0d图在这里: 紧急:做对重赏!如图,AD是角EAC的平分线,AD与三角形ABC的外接圆交与点D.求证:DB=DC在2009沪科版九年级数学65页第4题,紧急 第一题 人重600N,木板重为400N,人与木板,木板与水平 地面之间动摩擦因数为0.2.现在人用水平力拉绳随着木块一起向右匀速运动.为什么人和木块之间有摩擦力? 空中小姐的笑脸像天使用英语怎么说 一次函数数学题初二水平!帮帮忙! 空姐英语自我介绍我是一个活泼.开朗有上进心的女孩,身高170 休重54KG,我喜欢微笑对待身边所有的事情.微笑能给人友好的信息.空姐是我从小到大的梦想,我喜欢在蓝天下飞翔的感觉,在困难面 已知:如图,AD//BC,∠ABC=∠C,求证:AD平分∠EAC 二倍角的.cosπ/5乘cos2π/5的值?y=cosx/(1-sinx)的单调递增区间? 空姐英文怎么说我在飞机上要叫空姐,怎么叫stewardess和air hostess,哪个用得更多,更口语 地面上放一木箱,质量为40kg,用100N的力与水平方向成37°角推木箱(力斜向下),恰好使木箱匀速前进若用此力与水平方向成37°角想斜上方拉木箱(力斜向上),木箱的加速度多大 第二册上,33页的复习参考B,第7题如果关于x的不等式ax^2+bx+c “空姐”英文怎么说?flight attendant可以是男的也可以指女的,对么? 由2005个1组成的数1111···是否由因数41?为什么? 第二册上,32页的复习参考A,第三题已知abc是不全相等的正数求证(ab+a+b+1)(ab+ac++bc+c的平方)大于16abc第四题已知abc是不全相等的正数,求证 2乘以(a的立方+b的立方+c的立方)大于a的平方(b+c 一个等腰梯形的面积是20平方米,高是四米,下底3米,上底几米?与它等底等高并且下底相等的三角形面积是多少平方米? 如图所示,静止在水平地面上的木箱,受到一个方向不变的斜向上的拉力f作用.当这个力从零逐渐增大,在木箱离开地面前,它受到的摩擦力将 ( )a.逐渐增大b.逐渐减小c.先逐渐增大,后又减 重100N的木箱,在20N拉力的作用下,恰能沿水平平面做匀速直线运动.当该木箱在30N的水平拉力作用下,沿...重100N的木箱,在20N拉力的作用下,恰能沿水平平面做匀速直线运动.当该木箱在30N的水平拉 要做空姐英语至少要过几级 木箱质量为60KG,与水平地面间的动摩擦因数是0.2,一个与水平方向成37度,斜向上的力F作用在木箱上,使木箱在水平地面上匀速运动,求力F的大小 g取10 一个梯形.它的下底缩短4.5m,就变成一个正方形,且面积减少18㎡,原来梯形的面积是多少㎡? 空姐需要几级的英语啊? 我们用绳子系住木箱,手提着绳子向上提升木箱时,手受到拉力的作用,这个力的施力物体A绳子B木箱C地球D绳子和木箱 木箱重为G,与水平地面间的动摩擦因数为u,现用斜向上的力F拉木箱,使之沿水平面匀速前进,问F与水平方向的夹角a为何值时,拉力F最小?最小值是?别用反三角函数,我们没学过.用矢量三角形解, 判断题:2是一个质因数 ( ) 占1323占1323占1323 水平地面上放一质量为m的木箱,木箱和地面动摩擦因数为u,现在一个力F作用下运动,设F和水平面的夹角为a,在a由0增大到90度的过程中,木箱的速度保持不变.则下列选项正确的是:A、F先减小再
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘