How to use Pusher with Django?

I am trying to build an app using pusher and django. I went through few of the links like https://github.com/pusher/django-pusherable, but it lacked an example and thus was difficult to understand! Can anyone please help in here? And also what are channels in here and thus how to create a follow-following system with feeds(activity streams)? Thanks!

Solution

Pusher allows you to easily implement a publish/subscribe pattern for messaging (also called pub/sub for short).

In this pattern, there are a number of channels. Each channel is like a radio station's frequency. A publisher puts messages on a channel, and any subscribers (listeners) that are listening to that channel will receive the message.

The publisher does not know how many people are listening to a particular channel, it just sends the message. It is up to the subscribers to listen to the channels that they are interested in.

Practically speaking, a channel is usually contains an event type; so subscribers can decide what to do with the data depending on the event type. This is sometimes also called a message class.

For example, stock updates can be a channel. The publisher (your backend script) will push a message to this channel whenever there is a change in stock; any and all clients listening on this channel will get that message.

Read more about channels at the API guide for channels.

Pusher takes care of managing the channels and giving you the tools to write listeners.

In your example each user would have their own activity stream channel. Followers (these can be users) can subscribe to listen on the channel of the user they are interested in.

Your system simply publishes updates for all channels.

In code, this would work like this (example from the pusher docs) - from the publisher (backend) side:

from pusher import Pusher
pusher.trigger(u'test-channel', u'my-event', {u'message': u'hello world'})

From the consumer (client) side:

var channel = pusher.subscribe('test-channel');
channel.bind('my-event', function(data) {
  alert('An event was triggered with message: ' + data.message);
});

Once that is clear, lets move to django.

The django-pusherable module just makes it easy to create channels by decorating your views.

Each view that is decorated will automatically have a channel created for the object being accessed in the view. Each object gets its own channel, named modelclass_pk, so if your model is called Book, and you just created your first book, the channel will be called Book_1.

from pusherable.mixins import PusherDetailMixin, PusherUpdateMixin

class BookDetail(PusherDetailMixin, DetailView):
    model = Book

class BookUpdate(PusherUpdateMixin, UpdateView):
    model = Book

This takes care of the backend (pushing messages).

On the front end (client, reading messages), there are a few template tags provided for you. These tags just import the necessary javascript and help subscribe you to the correct events.

There are two default events for each model, update and view.

Now, suppose you want to know whenever the book with id 1 is updated, and automatically update the page, in your templates you would write the following. obj is the the object for book:

{% load pusherable_tags %}
{% pusherable_script %}
{% pusherable_subscribe 'update' obj %}

<script>
    function pusherable_notify(event, data) {
        console.log(data.user + "has begun to " + event + " " + data.model);
    }
</script>

In your backend, you would call this view with a specific book:

def book_update(request):
    obj = get_object_or_404(Book, pk=1)
    return render(request, 'update.html', {'obj': obj})

Now open that view in a new browser tab.

In another browser tab, or in the django shell - update the book with id 1, and you'll notice the javascript console will automatically log your changes.

How can I use it if I have 2 classes in my database like say,one for question and one for options, after creating one question it should appear in the feeds of its followers and along with options, Do I have to push the options also? How to do this?

Pusher does not care what your database classes are, or what your database relationships are. You have to figure this out yourself.

Pusher's job is limited to making the "live update" happen on the browser without the user having to refresh the page.

Plus how to create relationships, i.e when an user follows another how to subscribe to it and show related feeds?

I think you don't quite understand what is Pusher's role in all this.

Pusher doesn't care about your database and it has no knowledge about your relationships in the database, what object relates to what and who is following whom.

All pusher does is makes so that one page on the browser will automatically update without the user having to refresh.

The logic to "follow" another user should already be created in your application. That is, you must have a view that allows a user to follow someone else. Once they follow someone, a record will be created/updated in the database. This action will trigger Pusher to publish a message for that database object. Now, whoever is listening on that channel will receive that message, and then can do whatever they want with it.

Here is the order of events/development:

First, create your application as normal. It should have all the features that you expect. If this is a social network, people should be able to follow others and refresh their profile page to see any updates from their followers.
The system should already "know" what is an update and what content is stored for each entity. So, if you are creating "users" and "followers", there should already be the forms, screens, logic, database tables, etc. to make sure that content can be added, updated, by the correct users.
Once you have all that in place correctly and working as you like, now you bring in Pusher; and then you decide which "event" do you want to have automatically updated in the browser.

Suppose the event is "whenever a user adds new content to the site, all their followers should be notified". So you would then do the following:

Go to the view that is executed when a user posts new content.
Update that view as described above, inheriting from PusherUpdateMixin
Go to the template that is shown for users where all their followers are shown. In this template code, add the tags described above to include the pusher javascript api.
Next, in the same template, you will have code that lists all the users this user is following, in that logic code, you can then add a div which will be updated "automatically" whenever that user posts an update.