Building a realtime photo feed using Angular and Pusher

Building a realtime photo feed using #AngularJS and Pusher  via @pusher

  • More specifically, to build this realtime photo feed we will use the Pusher Realtime Reddit API to subscribe to new post in a specific subreddit and in realtime display each new post’s image.
  • Considering the features, a potential structure would be to create a new PhotoFeedComponent that will hold an array of images and display them, as well as a PusherService, whose responsibility would be to instantiate and hold a reference to an instance of Pusher.
  • Pusher service
    Angular CLI isn’t just good for scaffolding the application boilerplate; it can also generate new components, services and other Angular entities whenever you need.
  • // class PhotoFeedComponent implements OnInit {
    images: Arraystring = [];

    constructor(private pusherService: PusherService) {}


    }

    Finally, we can subscribe to a Pusher channel and start receiving images.

  • // class PhotoFeedComponent implements OnInit {
    images: Arraystring = [];

    ngOnInit() {

    channel.bind(‘new-listing’, (listing) = {
    const image = listing.url;
    this.images = [image, …this.images];
    });
    }
    }

    Note that sometimes there aren’t that many new posts, so it might take a minute or two between the new-listing events.

In this tutorial, we will build a simple web app that will display any images that are published on a subreddit through the Pusher Reddit API.

@wiwer77: Building a realtime photo feed using #AngularJS and Pusher via @pusher

This blog post was written under the Pusher Guest Writer program.

In this tutorial, we will build a simple web app that will display any images it receives using Pusher. More specifically, to build this realtime photo feed we will use the Pusher Realtime Reddit API to subscribe to new post in a specific subreddit and in realtime display each new post’s image. Let’s start by scaffolding our Angular web app.

We will be using Angular CLI, a command line tool maintained by Angular, to initialize our application.

First, you need to install Angular CLI globally on your machine. You can follow the official installation instructions on how to do that. Once you have installed Angular CLI, it is time to scaffold your application.

Navigate to a local directory where you want your application code to live, and within that directory, let’s run a CLI command to generate a new Angular application.

in your browser and you should see a message “app works!”.

Before we jump into writing code, let’s consider the structure of our application. Even though our application is small, we still want to use best practice.

, whose responsibility would be to instantiate and hold a reference to an instance of Pusher.

front end package as a dependency.

and bundle it up with the rest of the code.

with CLI.

‘s providers.

‘s responsibility will be to create a new instance of Pusher and make it available for anyone to get hold of.

property, which will hold the Pusher instance. Pusher instantiation will happen in the class’s constructor.

file, just add the following.

. So our Pusher instantiation logic evolves into:

property to do so.

will have an array of image URLs. In the view, we will loop over that array and display the individual images.

Let us start by generating the new component with CLI.

First of all, we should create a property where we will be storing the images. Since all we will be storing are image URLs, we can use an array of strings as the data type for our property.

The images array will be populated over time whenever a new image is received, so we start with a blank array.

class. As with any other dependency, we do that in the constructor.

, for example.

is run on component initialization, which is exactly when we want to subscribe.

method returns a channel that we store in a variable.

signifies a new post in a subreddit.

event.

event is received with the payload of the received event.

Now that we receive every new listing in a subreddit, we can extract images out of each post and add them to our images array. And since we want to do that on every new listing, we want to do it in the callback function.

directive.

of the HTML image tag.

and see the final result.

Building a realtime photo feed using Angular and Pusher

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.