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

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

备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘