Two decades ago, websites had such a simple flow of use. Web servers returned full HTML pages, and each user action required a new HTML page to be reloaded from the server. Later, Ajax joined the game and allowed dynamic updating of specific fragments of web pages via simple Javascript requests to the server. Google’s widespread use of Ajax with Gmail was just mind-boggling at the time. Today’s product requirements wouldn’t settle for even that.
PubNub is a very powerful yet easy-to-use cloud service for real-time applications and push notifications. With a few lines of code, you can extend your web and mobile applications with a fast and highly scalable solution for real-time notifications.
Cloudinary is a comprehensive cloud-based media management solution that automates and streamlines the entire media asset workflow, from upload to transformation to delivery across multiple CDNs.
PubNub allows you to send messages in real time to a channel to which several users can subscribe. Cloudinary image uploads can be done directly from a visitor’s browser or mobile app. The same goes for PubNub’s messaging subscription.
By combining both cloud services, you can easily create a high-end, real-time photo-sharing application.
The flow is pretty straightforward: use Cloudinary to allow your users to upload as many images as they want to the cloud, and then send a message through PubNub to notify all other relevant users about it. these new uploaded images.
Recipients can ask Cloudinary to generate a reduced and cropped version of the original image to match their specific device and get that image delivered efficiently for a better viewing experience .
All of this can be done without any complex coding, complex deployment configuration, or CPU load on your side. You can focus on your core application while Cloudinary and PubNub take care of all your communication channels and media management.
The chart below shows a live demo of a basic photo-sharing web application built with Cloudinary and PubNub. Try it out! Upload an image to Cloudinary directly from your browser, select a simple graphic effect to apply, and share the photo via PubNub message with all other users currently viewing this page. See this in action by opening two desktop or mobile browsers simultaneously. All viewers subscribe to a single PubNub channel directly from the browser, displaying dynamic thumbnails and full-size images as other viewers upload them.
A robust, highly scalable, high-quality channel availability and feature-rich real-time photo-sharing website or app, with just a few lines of code. Cool, right?
How does it work?
1. First we embed a file input field on the page. This field includes a server-side generated signature to authorize secure upload to Cloudinary from the browser using the Cloudinary jQuery plugin. The following Ruby code embeds a signed input field. For more details, see this post.
cl_image_upload_tag(:photo_id, :resource_type => :image, :transformation => incoming_transformation)
The :transformation in this example applies an inbound transformation before storing the image in the cloud. The specific incoming transformation we used limits the size of the image and adds a watermark.
This is the definition of the incoming transformation in this live demo:
incoming_transformation = [ { width : 1200, height: 1200, crop: ‘limit’}, { overlay: ‘logos_watermark’, width: 0.7, flags: ‘relative’, opacity: 40, gravity: ‘north’, y: 20 } ]
Also , custom styles for the input field and the drop area, as well as the loading progress bar are implemented using CSS and jQuery (see source code).
2. When the user clicks the Share button, an Ajax request with an identifier for the photo is sent to the server which securely posts a message to our shared PubNub channel.
The following Ruby code on the server side The server receives the message identifier and additional details and posts them to a PubNub Channel using the PubNub Ruby library:
preloaded = Cloudinary::Pre loadedFile.new(params[:photo_id]) pubnub = Pubnub.new( :publish_key => PUBNUB_PUBLISH_KEY, :subs cribe_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. The client-side code in the browser uses the PubNub Javascript library to subscribe to a PubNub channel to receive new messages.
var pubnub = PUBNUB.init({ subscribe_key: PUBNUB_SUBSCRIBE_KEY}); pubsubscribe({channel: PUBNUB_CHANNEL, callback: show_message});
When a message is received, it includes the photo ID, which is the public ID of the image uploaded to Cloudinary. The following Javascript code uses Cloudinary’s jQuery plugin to display a dynamically transformed face detection-based photo thumbnail via a CDN. Once the image is clicked, the originally uploaded image is displayed (with a watermark).
function show_message(message) { var link = $(‘‘). attr(‘href’, $.cloudinary.url(message.cloudinary_photo_id)). append($.cloudinary.image(message.cloudinary_photo_id, { width: 150, height: 100, clipping: “fill”, gravity: “face”, radius: 20, effect: “sepia”}); $(‘.stream ‘).prepend($(‘
‘).append(link)); }
In addition, a Javascript code retrieves the 5 recent posts that were posted before the page was loaded. This is done using PubNub History support.
pubnub.history({ channel : PUBNUB_CHANNEL, limit : 5, callback : function(history) { $.each(history, function() { show_message(this); })} }) ;
If you browse through the source code of this live demo, you’ll notice that the few lines of code listed in this blog post are actually just about all you need to create your own sharing website or app live photos.
PubNub’s service was created by developers who understood that developers should use a full-featured, scalable solution for real-time notifications instead of trying to ar create one for themselves. The same goes for Cloudinary’s service: developers should use a full function d and scalable image management, transformation and delivery service rather than waste precious time creating one themselves.
With both services Based on the cloud, you can build modern and complex applications quickly by focusing on the core business logic of your application. and stop worrying about media management and communication channels.
You can sign up for a free PubNub accountt and a free Cloudinary account >.
.