Forem: samuel ogundipe

How to build a photo feed using Django and Pusher

samuel ogundipe — Tue, 09 Jan 2018 17:53:24 +0000

Today, we will make a real-time photo feed framework utilizing Django and Pusher. This is like a mini Instagram, but without the comments and filter functionality.

A basic understanding of Django and jQuery is needed to follow this tutorial.

This post was originally published on Pusher's blog here

Setting up Django

First, we need to install the Django library if we don’t already have it.

To install Django, we run:

pip install django

After installing Django, it’s time to create our project.

Open up a terminal and create a new project using the following command:

django-admin startproject photofeed

In the above command, we created a new project called photofeed. The next step will be to create an app inside our new project. To do that, let’s run the following commands:

//change directory into the pusher_message directory 
cd photofeed 
//create a new app where all our logic would live 
django-admin startapp feed

Once we’re done setting up the new app, Django needs to know about our new application.

To do this, we will go into our feed\settings.py and add the message app to our installed apps as seen below:

INSTALLED_APPS = [
        'django.contrib.admin',
        'django.contrib.auth',
        'django.contrib.contenttypes',
        'django.contrib.sessions',
        'django.contrib.messages',
        'django.contrib.staticfiles',
        'feed'
    ]

After doing the above, it’s time to run the application and see if all went well.

In our terminal shell, we run:

python manage.py runserver

If we navigate our browser to http://localhost:8000, we should see the following:

Set up an App on Pusher

At this point, Django is ready and set up. We need to set up Pusher next, as well as grab our app credentials.

If you haven’t already, sign up to a free Pusher account and create a new app, then copy your secret, application key and application id.

The next step is to install the required libraries:

pip install pusher

In the above bash command, we installed one package, Pusher.

– Pusher: This is the official Pusher library for Python. We will be using this library to trigger and send our messages to the Pusher HTTP API

Creating Our Application

First, let us create a model class, which will generate our database structure.

Let’s open up feed\models.py and replace with the following:

    from django.db import models

    # Create your models here.
    class Feed(models.Model):
        description = models.CharField(max_length=255, blank=True)
        document = models.FileField(upload_to='static/documents/')

In the above block of code, we defined a model called Feed. The Feed table will consist of the following fields:

A field to store the description of the photo
A field to store the photo

In the above code, while declaring our document field, we have included an upload_to attribute, which we set to static/documents. Please note that this path is relative to the path of the DJANGO MEDIA ROOT, which we will set now.

While in this article, we will be setting the MEDIA_ROOT to the static folder in our feed app, so it can get served as a static file. To do that, let us move to our photofeed/settings.py and add the code below to our file, immediately after the STATIC_URL declaration.

MEDIA_ROOT = os.path.join(BASE_DIR, 'feed/')

Running Migrations

We need to make migrations and run them, so our database table can get created. To do that, let us run the following in our terminal:

python manage.py makemigrations 
python manage.py migrate

Creating Our Views

Our views refer to the file/files that hold up the logic behind the application, often referred to as the Controller.

Let us open up our views.py in our feed folder and replace with the following:

    from django.shortcuts import render, HttpResponse
    from django.http import JsonResponse
    from .forms import *
    from pusher import Pusher
    import json

    #instantiate pusher
    pusher = Pusher(app_id=u'XXX_APP_ID', key=u'XXX_APP_KEY', secret=u'XXX_APP_SECRET', cluster=u'XXX_APP_CLUSTER')
    # Create your views here.
    # function that serves the welcome page
    def index(request):
        # get all current photos ordered by the latest
        all_documents = Feed.objects.all().order_by('-id')
        # return the index.html template, passing in all the feeds
        return render(request, 'index.html', {'all_documents': all_documents})

    #function that authenticates the private channel 
    def pusher_authentication(request):
        channel = request.GET.get('channel_name', None)
        socket_id = request.GET.get('socket_id', None)
        auth = pusher.authenticate(
          channel = channel,
          socket_id = socket_id
        )

        return JsonResponse(json.dumps(auth), safe=False)
    #function that triggers the pusher request
    def push_feed(request):
        # check if the method is post
        if request.method == 'POST':
            # try form validation
            form = DocumentForm(request.POST, request.FILES)
            if form.is_valid():
                f = form.save()
                # trigger a pusher request after saving the new feed element 
                pusher.trigger(u'a_channel', u'an_event', {u'description': f.description, u'document': f.document.url})
                return HttpResponse('ok')
            else:
                # return a form not valid error
                return HttpResponse('form not valid')
        else:
           # return error, type isnt post
           return HttpResponse('error, please try again')

In the code above, we have defined two main functions which are:

index
pusher_authentication_
push_feed

In the index function, we fetch all the available photos in the database. The photos are then rendered in the view. This enables a new user to see all previous feeds that are available.

In the pusher_authentication function, we verify that the current user can access our private channel.

In the push_feed function, we check if it is a POST request, then we try validating our form before saving it into the database. (The form used in this method named DocumentForm is not available yet. We will be creating it soon.) After the form validation, we then place our call to the Pusher library for real-time interaction.

Creating The Form Class

A Django Form handles taking user input, validating it, and turning it into Python objects. They also have some handy rendering methods.

Let us create a file called forms.py in our feed folder and add the following content to it:

    from django import forms
    from .models import Feed

    class DocumentForm(forms.ModelForm):
        class Meta:
            model = Feed
            fields = ('description', 'document', )

In the above code block, we have imported our Feed model and used it to create a form. This form will now handle the validation and upload of images to the right folder.

Populating The URL’s.py

Let us open up our photofeed\urls.py file and replace with the following:

    """photofeed URL Configuration

    The `urlpatterns` list routes URLs to views. For more information please see:
        https://docs.djangoproject.com/en/1.11/topics/http/urls/
    Examples:
    Function views
        1. Add an import:  from my_app import views
        2. Add a URL to urlpatterns:  url(r'^$', views.home, name='home')
    Class-based views
        1. Add an import:  from other_app.views import Home
        2. Add a URL to urlpatterns:  url(r'^$', Home.as_view(), name='home')
    Including another URLconf
        1. Import the include() function: from django.conf.urls import url, include
        2. Add a URL to urlpatterns:  url(r'^blog/', include('blog.urls'))
    """
    from django.conf.urls import url
    from django.contrib import admin
    from feed.views import * 

    urlpatterns = [
        url(r'^$', index),
        url(r'^push_feed$', push_feed),
        url(r'^pusher_authentication', pusher_authentication),
        url(r'^admin/', admin.site.urls),
    ]

What has changed in this file? We have added 2 new routes to the file.

We have defined the entry point, and have assigned it to our index function. We also defined the push_feed URL and assigned it to our push_feed function. This will be responsible for pushing updates to Pusher in real-time. Finally, the pusher_authentication endpoint, which handles the authentication of our private channel.

Creating the HTML Files

Now we need to create the index.html file which we have referenced as the template for our index function.

Let us create a new folder in our feed folder called templates.

Next, we create a file called index.html in our templates folder and replace it with the code below:

    <html>
        <head>
            <title>Django Photo feed</title>
            <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
            <script src="//js.pusher.com/4.0/pusher.min.js"></script>
        </head>
        <body>

            <div class="container">
                <form  method="post" enctype="multipart/form-data" action="/push_feed" onsubmit="return feed_it()">
                <input type="hidden" id="csrf" name="csrf" value="{{ csrf_token }}"/>
                <div class="form-group">
                        <label for="usr">Image:</label>
                        <input type="file" id="document" name="document" class="form-control"  required>
                    </div>
                    <div class="form-group">
                        <label for="pwd">comment:</label>
                        <input type="text" id="description" name="description"  class="form-control"  required>
                    </div>
                    <div class="form-group">
                        <button type="submit" class="btn btn-success">Feed it</button>
                    </div>
                </form>
                <div class="row" id="feeds">
                    {% for doc in all_documents  %}
                    <span>
                        <h2>{{doc.description}}</h2>
                        <img  src="{{doc.document}}">
                    </span>
                    {% endfor %}
                </div>
            </div>
        </body>
    </html>

In this HTML snippet, note that we have included some required libraries such as:

Bootstrap CSS
jQuery JavaScript library
Pusher JavaScript library

Pusher Bindings And jQuery Snippet

That’s it! Now, once a photo gets uploaded, it also gets broadcast and we can listen using our channel to update the feed in real-time.

Below is our example jQuery snippet used to handle the file upload as well as Pusher’s real-time updates.

    <script>
     var files;

        // Add events
        $(document).ready(function() {
            $('input[type=file]').on('change', prepareUpload);
        })


        // Grab the files and set them to our variable
        function prepareUpload(event) {
            files = event.target.files;
        }

        function feed_it() {
            var data = new FormData();
            $.each(files, function(key, value) {
                data.append('document', value);
            });
            data.append('description', document.getElementById('description').value);

            data.append('csrfmiddlewaretoken', document.getElementById('csrf').value);
            $.post({
                url: '/push_feed',
                data: data,
                processData: false, // Don't process the files
                contentType: false, // Set content type to false as jQuery will tell the server it's a query string request
                success: function(data) {
                    if (data == "ok") {
                        alert('done');
                        document.getElementById('description').value = '';
                    }
                },
                error: function(error) {
                    alert('an error occured, please try again later')
                }
            });
            return false;
        }
        var pusher = new Pusher('XXX_APP_KEY', {
            encrypted: true,
            cluster: 'XXX_APP_CLUSTER',
            authTransport: 'jsonp',
            authEndpoint: '/pusher_authentication'
        });
        my_channel.bind("an_event", function(doc) {
            alert("message");
            var new_message = `<span>
                        <h2>` + doc.description + `</h2>
                        <img  src="` + doc.document + `">
                    </span>`;
            $('#feeds').prepend(new_message);
        });
    </script>

Below is an image of what we have built:

Conclusion

In this article, we have covered how to create a real-time photo feed using Django and Pusher as well as passing CSRF tokens in AJAX request using Django.

The code base to this tutorial is available in a public Github repository. You can download it for educational purposes.

Have a better way we could have built our application, reservations or comments, let us know in the comments. Remember sharing is learning.

Build a realtime commenting feature using .NET and Pusher

samuel ogundipe — Tue, 09 Jan 2018 17:50:24 +0000

Reloading pages to view new comments can bore and is also strenuous, given you don’t even know if the reply to your comment has come in yet or not. You keep reloading and keep wasting your data. To cut a long story short, users may abandon sites where they have to reload pages to see a new comment.

Today, we will build a mini-blog engine with live commentary features using .NET and Pusher.

To follow through with this tutorial, we will use MSSQL as our database engine. Please ensure that it is up and running.

To follow this tutorial, please ensure that you are familiar with the basics of:

Setting up a Pusher account and app

Pusher is a hosted service that makes it super-easy to add realtime data and functionality to web and mobile applications.

Pusher acts as a realtime layer between your servers and clients. Pusher maintains persistent connections to the clients – over Web-socket if possible and falling back to HTTP-based connectivity – so that as soon as your servers have new data they want to push to the clients they can do, via Pusher.

If you do not already have one, head over to Pusher and create a free account.

This post was originally published by the author on Pusher's blog here

Setting up the Asp.Net project in Visual Studio

The next thing we need to do is create a new Asp.Net MVC application.

To do so, let’s:

Open Visual Studio and select New Project from the sidebar
Under templates, select Visual C#
Next, select Web
In the middle section, select ASP.NET Web Application.
For this tutorial, I named the project: Real-Time-Commenting.
Now we are almost ready. The next step will be to install the official Pusher library for ASP.NET using the NuGet Package.

To do this, we go to tools on the top bar, click on NuGet Package Manager, on the drop-down we select Package Manager Console.

We will see the Package Manager Console at the bottom of our Visual Studio. Next, let’s install the package by running:

Install-Package PusherServer

Crafting our application

Now that our environment is set up and ready, let’s dive into writing code.

By default, Visual Studio creates three controllers for us. However, we will use the HomeController for the application logic.

The first thing we want to do is to define a model that stores the list of articles we have in the database. Let’s call this model BlogPost. So, let’s create a file called BlogPost.cs in our models folder, and add:

    using System;
    using System.Collections.Generic;
    using System.ComponentModel.DataAnnotations.Schema;
    using System.Linq;
    using System.Web;

    namespace Real_Time_Commenting.Models
    {
        public class BlogPost
        {
            public int BlogPostID { get; set; }

            public string Title { get; set; }

            [Column(TypeName = "ntext")]
            public string Body { get; set; }
        }
    }

In this code block, we have defined the model that holds our blog posts. The properties which we have defined here include:

The id of the post, called BlogPostID (usually the primary key)
The title of our post, called Title (Defined as a string)
The body of the post which we will be creating. Defined as a string

Next, let us create the model called Comment, which we had referenced earlier on. Let’s create a file called Comment.cs in our models folder and add:

    using System;
    using System.Collections.Generic;
    using System.ComponentModel.DataAnnotations.Schema;
    using System.Linq;
    using System.Web;

    namespace Real_Time_Commenting.Models
    {
        public class Comment
        {
            public int CommentID { get; set; }

            public string Name { get; set; }

            [Column(TypeName = "ntext")]
            public string Body { get; set; }

            public int BlogPostID { get; set; }
        }
    }

Looking at the code above, we notice that we have declared the following properties:

The ID of our comment called CommentID (Usually the primary key)
The name of the person commenting.
The body of the comment.
The ID of the post we are commenting on.

Now that we have defined our model, let’s reference it in our default database context called ApplicationDbContext. To do this, let’s open models\IdentityModels.cs file, then locate the class called ApplicationDbContext and add the following after the create function:

    public DbSet<BlogPost> BlogPost { get; set; }
    public DbSet<Comment> Comment { get; set; }

In the code block above, the DbSet class represents an entity set used for read, update, and delete operations.

Here, we have defined two entities, our BlogPost and Comment models. We will now have access to them from an instance of the ApplicationDbContext .

Connecting to our database

Although our model is set up, we still need to attach a database to our application. To do so, select the Server Explorer on the left-hand side of our Visual Studio, right click on Data Connections and add a database.

There are various databases that are lightweight and can fit into the application we are building, such as:

Microsoft access database
Sqlite Database
MSSQL Server

For this tutorial, I used the MSSQL Server.

Creating our controller

Now both our model and database are setup, let’s go ahead creating our index route. Open the HomeController and replace it with:

    using PusherServer;
    using Real_Time_Commenting.Models;
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Threading.Tasks;
    using System.Web;
    using System.Web.Mvc;

    namespace Real_Time_Commenting.Controllers
    {
        public class HomeController : Controller
        {
            ApplicationDbContext db = new ApplicationDbContext();
            public ActionResult Index()
            {
                return View(db.BlogPost.AsQueryable());
            }

            public ActionResult Create()
            {
                return View();
            }

            [HttpPost]
            public ActionResult Create(BlogPost post)
            {
                db.BlogPost.Add(post);
                db.SaveChanges();
                return RedirectToAction("Index");
            }

            public ActionResult Details(int? id)
            {
                return View(db.BlogPost.Find(id));
            }

            public ActionResult Comments(int? id)
            {
                var comments = db.Comment.Where(x => x.BlogPostID == id).ToArray();
                return Json(comments, JsonRequestBehavior.AllowGet);
            }

            [HttpPost]
            public async Task<ActionResult> Comment(Comment data)
            {
                db.Comment.Add(data);
                db.SaveChanges();
                var options = new PusherOptions();
                options.Cluster = "XXX_APP_CLUSTER";
                var pusher = new Pusher("XXX_APP_ID", "XXX_APP_KEY", "XXX_APP_SECRET", options);
                ITriggerResult result = await pusher.TriggerAsync("asp_channel", "asp_event", data);
                return Content("ok");
            }
        }
    }

In the code block above, we have defined six different functions :

The Index function, which shows a quick list of all our blog posts.
The Create function, which handles the addition of new BlogPosts for both GET and POST requests.
The Details function, which returns the full view of our post.
The Comments function, which returns a JSON data of all the comments for a particular post.
The Comment function, which handles the addition of a new comment and emitting the data to Pusher.

Before looking at our controller functions, we notice that there is an import of our DB context into our class with the line that says:

ApplicationDbContext db = new ApplicationDbContext();

This makes it possible to access the database model which we have defined in our ApplicationDbContext class.

In the Index function we return our View, passing in a list of all the posts we have in our database, which will be looped.

Next, In the Create function that handles our GET request, we simply return the view for creating a new post.

We move to the Create function that handles our POST request, which receives an argument called post of type BlogPost . In this function we add a new post into the database, after which we return a redirect to our Index function.

In our Details function, we return an instance of a particular post to our view which will be displayed. This view will also display the form which allows us to add comments.

In our Comments function, we return all the comments that belong to a particular post, the ID of which was supplied as JSON. This method will be called via an AJAX POST.

Finally, our Comment function handles adding the comments to the database, and sending the data to Pusher. We notice here that this function is an async method. This is because the Pusher library sends the data asynchronously, and we have to await its response.

Also, we need to replace XXX_APP_CLUSTER, XXX_APP_ID, XXX_APP_KEY and XXX_APP_SECRET with our app cluster, ID, key and secret which we got from Pusher earlier on.

Creating our view files

To complete our application we will need 3 different view files, which we will discuss below.

The index view

Let us replace the default content in the Index.cshtml file at Views\Home\Index.cshtml with:

 @model IEnumerable<Real_Time_Commenting.Models.BlogPost>

    @{
        ViewBag.Title = "Index";
    }

    <h2>Index</h2>

    <p>
        @Html.ActionLink("Create New", "Create")
    </p>
    <table class="table">
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Title)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Body)
            </th>
            <th></th>
        </tr>

    @foreach (var item in Model) {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Title)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Body)
            </td>
            <td>
                @Html.ActionLink("Details", "Details", new { id=item.BlogPostID }) |
            </td>
        </tr>
    }

    </table>

Looking at the HTML structure above, we notice we have defined a table which lists all our posts and links them to the details page.

The Create View

Here, we need to create a new file called Create.cshtml in the View\Home folder and paste the following into it:

@model Real_Time_Commenting.Models.BlogPost

    @{
        ViewBag.Title = "Create";
    }

    <h2>Create</h2>


    @using (Html.BeginForm()) 
    {
        @Html.AntiForgeryToken()

        <div class="form-horizontal">
            <h4>BlogPost</h4>
            <hr />
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            <div class="form-group">
                @Html.LabelFor(model => model.Title, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Title, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Title, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.Body, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Body, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Body, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Create" class="btn btn-default" />
                </div>
            </div>
        </div>
    }

    <div>
        @Html.ActionLink("Back to List", "Index")
    </div>

    @section Scripts {
        @Scripts.Render("~/bundles/jqueryval")
    }

In the HTML structure above we have three main inputs:

A text input element, which holds the title of the post.
A text input element, which holds the content of the post.
A button element, which is used to submit the new entry.

The Details View and Vue Bindings

This is the final View file we will be needing. This file also handles binding to Pusher events and updating the comments in realtime using Pusher and Vue.

Let us create a new file called Details.cshtml in our Views\Home folder and add the following content into it:

@model Real_Time_Commenting.Models.BlogPost

    @{
        ViewBag.Title = "Details";
    }

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.min.js"></script>
    <script src="//js.pusher.com/4.0/pusher.min.js"></script>
    <style>
        .user_name{
        font-size:14px;
        font-weight: bold;
    }
    .comments-list .media{
        border-bottom: 1px dotted #ccc;
    }
    </style>
    <h2>Details</h2>
    <div id="app">
        <div>
            <h4>BlogPost</h4>
            <hr />
            <dl class="dl-horizontal">
                <dt>
                    @Html.DisplayNameFor(model => model.Title)
                </dt>

                <dd>
                    @Html.DisplayFor(model => model.Title)
                </dd>

                <dt>
                    @Html.DisplayNameFor(model => model.Body)
                </dt>

                <dd>
                    @Html.DisplayFor(model => model.Body)
                </dd>

            </dl>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-md-8">
                    <div class="page-header">
                        <h1><small class="pull-right">{{comments.length}} comments</small> Comments </h1>
                    </div>
                    <div class="comments-list">
                        <div class="media" v-for="com in comments">
                            <div class="media-body">
                                <h4 class="media-heading user_name">{{com.Name}}</h4>
                                {{com.Body}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container">
            <br />
            <p>Your Comment</p>
            <form onsubmit="return false;">
                <input type="text" id="Name" placeholder="Your Name" v-model="comment.Name" class="form-control" />
                <textarea rows="3" placeholder="Your Comment" id="Body" v-model="comment.Body" class="form-control"></textarea>
                <button class="btn btn-success" v-on:click="submit_comment()">save</button>
            </form>
        </div>
    </div>
    <p>

        @Html.ActionLink("Back to List", "Index")
    </p>

In the above block of code, we have displayed the title and content of the current post, and the number of comments it has.

We have also created our comment form which comprises three main elements, which are:

Text input for the name of the person making the comment.
Textarea for the body of the comment.
Button to save the new comment into the database.

Notice that we have used Vue’s v-for directive to iterate and display the comments which are available.

Also, note we have included some required libraries such as:

axios JavaScript library
Vue js JavaScript library
Pusher JavaScript library

Pusher Bindings and Vue snippet

Below is our example Vue snippet used to handle the comment submission and Pusher’s realtime updates.

<script>
    var pusher = new Pusher('XXX_APP_KEY', {
        cluster: 'XXX_APP_CLUSTER'
    });
    var my_channel = pusher.subscribe('asp_channel');
    var app = new Vue({
        el: '#app',
        data: {
            comments: [],
            comment: {
                Name: '',
                Body: '',
                BlogPostID: @Model.BlogPostID
            }
        },
        created: function() {
            this.get_comments();
            this.listen();
        },
        methods: {
            get_comments: function() {
                axios.get('@Url.Action("Comments", "Home", new { id = @Model.BlogPostID }, protocol: Request.Url.Scheme)')
                    .then((response) => {

                        this.comments = response.data;

                    });

            },
            listen: function() {
                my_channel.bind("asp_event", (data) => {
                    if (data.BlogPostID == this.comment.BlogPostID) {
                        this.comments.push(data);
                    }

                })
            },
            submit_comment: function() {
                axios.post('@Url.Action("Comment", "Home", new {}, protocol: Request.Url.Scheme)', this.comment)
                    .then((response) => {
                        this.comment.Name = '';
                        this.comment.Body = '';
                        alert("Comment Submitted");

                    });
            }
        }
    });
    </script>

In the code block above, we have done two major activities, which are:

Uploading Comment Code

To process new comments from the client side to the server, the following steps were followed:

We attached a Vue event listener @click to our submit button which fires a method called submit_comment.
We defined a function called submit_comment which uses axios to make a POST request to our comment function.

Subscribing for Feed Additions on Server from other clients

After the comment has been sent to the server, a request is sent to Pusher to return an event with the new data we have broadcasted. To listen for these realtime events, we have:

Initialized a Pusher object while passing our app key and cluster.
Subscribed to our channel called asp_channel.
In the listen method in our Vue code, we declared a binding to our event called asp_event. In the callback function of this binding, we push the new data to our list of comments.

That’s it! Now, once a new comment is made, it also gets broadcast and we can listen using our channel to update the comments in realtime.

Conclusion

In this article, we have covered how to create a live comments feature using .NET and Pusher, and creating a mini blog engine in .NET.

The codebase to this tutorial is available in a public Github repository. You can download it for educational purposes.

Have any reservations or comments, let us know your feedback in the comments.

How to build a photo feed using .NET and Pusher

samuel ogundipe — Mon, 08 Jan 2018 19:07:40 +0000

Today, we will make a realtime photo feed using .NET and Pusher.

We will build a mini system that allows people to upload their images/photographs for everyone to view in realtime. It's like a mini-Instagram without the comment, like, and views aspect. Sounds cool? Let’s ride on.

To follow this tutorial, please ensure that you are familiar with the basics of:

C#, ASP.NET, MVC
jQuery

Setting up a Pusher account and app

Pusher is a hosted service that makes it super-easy to add realtime data and functionality to web and mobile applications.

Pusher sits as a realtime layer between your servers and your clients. Pusher maintains persistent connections to the clients – over Websockets if possible and falling back to HTTP-based connectivity – so that as soon as your servers have new data they want to push to the clients they can do so via Pusher.

We will register a new app on the dashboard. The only compulsory options are the app name and cluster. A cluster represents the physical location of the Pusher server that will handle your app’s requests. Also, select jQuery as the front-end technology and ASP.NET as the back-end tech for this tutorial. For other projects, you can choose as per your requirements.

Next, copy out your App ID, Key, and Secret from the App Keys section, as we will need them later on.

Setting up the Asp.Net project in Visual Studio

The next thing we need to do is create a new Asp.Net MVC application.

To do so, let’s:

Open Visual Studio and select new project from the sidebar
Under templates, select Visual C#
Next, select web
In the middle section, select ASP.NET MVC Web Application.

For this tutorial, I named the project: Real-time-photo-feed.

Now we are almost ready. The next step will be to install the official Pusher library for .Net using the NuGet Package.

To do this, we go to tools, via the menu on the top bar, click on NuGet Package Manager. On the drop-down, we select Package Manager Console.

We will see the Package Manager Console at the bottom of our Visual Studio. Next, let’s install the package by running:

Install-Package PusherServer

Alternatively, we can also install the Pusher library using the NuGet Package Manager UI. To do this, in the Solution Explorer, right-click either References or a project and select Manage NuGet Packages. The Browse tab displays available packages by popularity. Search for the Pusher package by typing in PusherServer into the search box on the top right. Select the Pusher package to display the package information on the right and to enable the Install button.

Crafting our application

Now that our environment is set up and ready, let’s dive into writing code.

By default, Visual Studio creates three controllers for us. However, we will use the HomeController for the application logic. The first thing we want to do is to define a model that stores the list of images we have in the database.

Under the models folder, let’s create a file named PhotoFeed.cs and add the following content:

using System; 
using System.Collections.Generic; 
using System.ComponentModel.DataAnnotations; 
using System.Linq; using System.Web; 
namespace Real_time_photo_feed.Models { 
    public class PhotoFeed { 
      [Key] 
      public int Id { get; set; } 
      [Required] 
      public string Comment { get; set; } 
      public string Imagepath { get; set; } 
    }
}

In the above block of code, we have declared a model called PhotoFeed with three main properties:

Id: This is the primary key of the model table.
Comment: The description of the image.
Imagepath: The path to the stored image.

Now we have defined our model, let’s reference it in our default database context called ApplicationDbContext. To do this, let’s open models\IdentityModels.cs file, then locate the class called ApplicationDbContext and add the following after the create function:

public DbSet<PhotoFeed> FeedModel { get; set; }

In the code block above, the DBSet class represents an entity set used for reading, updating, and deleting operations. The entity which we will use to do CRUD operations is the PhotoFeed model we created earlier, and we have given it the name FeedModel.

Connecting our database

Although our model is set up, we still need to attach a database to our application. To do so, select the Server Explorer on the left-hand side of our Visual Studio, right click on Data Connections, and add a database.

There are various databases that are lightweight and can fit into the application we are building, such as:

Microsoft access database
Sqlite Database
MSSQL Server
Firebird
VistaDb

For this tutorial, I used the MSSQL Server.

Creating our index route

Now both our model and database is set to work. Let’s go ahead and create our index route. Open the HomeController and replace it with the following code:

using PusherServer; 
using Real_time_photo_feed.Models; 
using System; 
using System.Collections.Generic; 
using System.IO; 
using System.Linq; 
using System.Threading.Tasks; 
using System.Web; using System.Web.Mvc; 
namespace Real_time_photo_feed.Controllers { 
    public class HomeController : Controller { 
        ApplicationDbContext db = new ApplicationDbContext(); 
        public ActionResult Index() { 
            var me = db.FeedModel.AsQueryable(); 
            return View(me); 
        } 
        [HttpPost] 
        public async Task<ActionResult> Index(PhotoFeed feed, HttpPostedFileBase upload) { 
            if (ModelState.IsValid) { 
                if (upload != null && upload.ContentLength > 0) { 
                    var FileName = System.IO.Path.GetFileName(upload.FileName); 
                    var newpath = Path.Combine(HttpContext.Server.MapPath("~/UploadedFiles"), FileName);      
                    upload.SaveAs(newpath); 
                PhotoFeed setdata = new PhotoFeed(); 
                setdata.Comment = feed.Comment; 
                setdata.Imagepath = "/UploadedFiles/"+FileName; 
                db.FeedModel.Add(setdata); 
                db.SaveChanges(); 
                var options = new PusherOptions(); 
                options.Cluster = "XXX_APP_CLUSTER"; 
                var pusher = new Pusher("XXX_APP_ID", "XXX_APP_KEY", "XXX_APP_SECRET", options); 
                ITriggerResult result = await pusher.TriggerAsync("a_channel", "an_event", setdata); 
                } 
            } 
            return Content("ok"); 
        } 
    } 
}

In the code block above, we have defined our Index function for both GET and POST requests.

Before looking at our GET and POST controller functions, we notice that there is an import of our db context into our class with the line that says:

ApplicationDbContext db = new ApplicationDbContext();

This makes it possible to access our database model which we have defined using the DbSet class in our ApplicationDbContext class.

In the GET function, we have returned the view with which we will handle the addition and realtime updating of our feed.

Notice that in the GET function, we pass a variable into the view function called me. This variable is a queryable version of our BlogFeed model. This will be passed to the view, which is later looped and rendered.

Observe that the POST method is set to be asynchronous. This is because the Pusher .NET library uses the await operator to wait for the asynchronous response from the data sent to Pusher.

In this function, we first add our new movie to the database, then we trigger an event. Once the event has been emitted, we then return an ok string.

However, please note that the code above would not handle any error if the image was saved in DB but not posted using Pusher. We might need to use a try and catch statement to handle failures posting to Pusher.

Creating our view files

Let’s open up our Views\Home\Index.cshtml and replace the content with the following:

@model IEnumerable < Real_time_photo_feed.Models.PhotoFeed > @{ Layout = null; } 
<html>
   <head>
      <title>
      ASP.NET Photo feed< /title> 
      <link href="https:/ / maxcdn.bootstrapcdn.com / bootstrap / 3.3.7/ css / bootstrap.min.css" rel="stylesheet" integrity="sha384- BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va + PmSTsz / K68vbdEjh4u" crossorigin="anonymous">
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> <script src="//js.pusher.com/4.0/pusher.min.js"></script> 
   </head>
   <body>
      <div class="container">
         <form method="post" enctype="multipart/form-data" action="/Home/Index" onsubmit="return feed_it()">
            <div class="form-group"> <label for="usr">Image:</label> <input type="file" id="upload" name="upload" class="form-control" required> </div>
            <div class="form-group"> <label for="pwd">comment:</label> <input type="text" id="Comment" name="Comment" class="form-control" required> </div>
            <div class="form-group"> <button type="submit" class="btn btn-success">Feed it</button> </div>
         </form>
         <div class="row" id="feeds">
            @foreach (var item in Model) { 
            <span>
               <h2>@item.Comment</h2>
               <img src="@item.Imagepath"> 
            </span>
            } 
         </div>
      </div>
   </body>
</html>

In the above block of code, we have created our form which comprises three main elements, which are:

Text input for the comment of the image.
File input for selecting the image we want to feed.
Button to save the new entry into the database.

Also, note we have included some required libraries such as:

Bootstrap CSS
jQuery JavaScript library
Pusher JavaScript library

Pusher Bindings And jQuery Snippet

Below is our example jQuery snippet used to handle the file upload and Pusher’s realtime updates.

<script>
 var files; // Add events 
 $(document).ready(function() {
         $('input[type=file]').on('change', prepareUpload);
     }) // Grab the files and set them to our variable 
 function prepareUpload(event) { files = event.target.files; }

 function feed_it() {
     var data = new FormData();
     $.each(files, function(key, value) { data.append('upload', value); });
     data.append('Comment', document.getElementById('Comment').value);
     $.post({
         url: '/Home/Index',
         data: data,
         processData: false, // Don't process the files 
         contentType: false, // Set content type to false as jQuery will tell the server it's a query string request 
         success: function(data) { if (data == "ok") { alert('done');
                 document.getElementById('Comment').value = ''; } },
         error: function(error) { alert('an error occured, please try again later') }
     });
     return false;
 }
 var pusher = new Pusher("XXX_APP_KEY", { cluster: "XXX_APP_CLUSTER" });
 var my_channel = pusher.subscribe('a_channel');
 my_channel.bind("an_event", function(doc) { var new_message = `<span> <h2>` + doc.Comment + `</h2> <img src="` + doc.Imagepath + `"> </span>`;
     $('#feeds').prepend(new_message); });
</script>

In the code block above, we notice we have done two major activities, which are:

Uploading Image Code

To process the upload of images from the client side to the server, the following steps were followed:

We attached an event listener to our file input button that stores our image into a variable called files.
We defined a function called feed_it which creates a new FormData, then appends our image and description to the form data. This function then makes an AJAX POST request to our index route.

Subscribing for Feed Additions on Server from other clients

After the image has been sent to the server, a request is sent to Pusher to return an event with the new data we have broadcasted. To listen for this realtime events, we have:

Initialized a Pusher object while passing our app key and cluster.
Subscribed to our channel called a_channel.
Declared a binding to our event called an_event. In the callback function of this binding, we have pre-pended the new data to our list of feeds.

That’s it! Now, once a photo gets uploaded, it also gets broadcast and we can listen using our channel to update the feed in realtime.

Below is an image of what we have built:

Conclusion

In this article, we have covered how to create a realtime photo feed using .NET and Pusher as well as handling file uploads in .NET.

The code base to this tutorial is available in a pu blic GitHub repository. You can download it for educational purposes.

Have a better way we could have built our application, reservations or comments? Let us know in the comments.

This post is originally published by the author here.

How to Build a Message Delivery Status in Django

samuel ogundipe — Mon, 08 Jan 2018 19:02:32 +0000

Today, we will make a realtime message delivery status framework with Django and Pusher. A basic understanding of Django and Vue is needed in order to follow this tutorial.

Setting up Django

First, we need to install the Python Django library if we don’t already have it.

To install Django, we run:

pip install django

After installing Django, it’s time to create our project. Open up a terminal and create a new project using the following command:

django-admin startproject pusher_message

In the above command, we created a new project called pusher_message. The next step will be to create an app inside our new project. To do that, let’s run the following commands:

//change directory into the pusher_message directory 
cd pusher_message 
//create a new app where all our logic would live 
django-admin startapp message

Once we are done setting up the new app, we need to tell Django about our new application, so we will go into our pusher_message\settings.py and add the message app to our installed apps as seen below:

INSTALLED_APPS = ['django.contrib.admin', 
                  'django.contrib.auth', 
                  'django.contrib.contenttypes', 
                  'django.contrib.sessions', 
                  'django.contrib.messages', 
                  'django.contrib.staticfiles', 
                  'message']

After doing the above, it’s time for us to run the application and see if all went well.

In our terminal shell, we run:

python manage.py runserver

If we navigate our browser to http://localhost:8000, we should see the following:

Set up an App on Pusher

At this point, Django is ready and set up. We now need to set up Pusher, as well as grab our app credentials.

We need to sign up on Pusher, create a new app, and also copy our secret application key and application id.

The next step is to install the required libraries:

pip install pusher

In the above bash command, we installed one package, pusher. This is the official Pusher library for Python, which we will be using to trigger and send our messages to Pusher.

Creating Our Application

First, let us create a model class, which will generate our database structure.

Let’s open up message\models.py and replace the content with the following:

from django.db import models 
from django.contrib.auth.models import User 
# Create your models here. 
class Conversation(models.Model): 
    user = models.ForeignKey(User, on_delete=models.CASCADE) 
    message = models.CharField(blank=True, null=True, max_length=225) 
    status = models.CharField(blank=True, null=True, max_length=225) 
    created_at = models.DateTimeField(auto_now=True)

In the above block of code, we defined a model called Conversation. The conversation table consists of the following fields:

A field to link the message to the user who created it
A field to store the message
A field to store the status of the message
A filed to store the date and time the message was created

Running Migrations

We need to make migrations and also run them so our database table can be created. To do that, let us run the following in our terminal:

python manage.py makemigrations python manage.py migrate

Creating Our Views.

In Django, the views do not necessarily refer to the HTML structure of our application. In fact, we can see it as our Controller, as referred to in some other frameworks.

Let us open up our views.py in our message folder and replace the content with the following:

from django.shortcuts import render 
from django.contrib.auth.decorators import login_required 
from django.views.decorators.csrf import csrf_exempt 
from pusher import Pusher 
from .models import * 
from django.http import JsonResponse, HttpResponse 
# instantiate pusher 
pusher = Pusher(app_id=u'XXX_APP_ID', key=u'XXX_APP_KEY', secret=u'XXX_APP_SECRET', cluster=u'XXX_APP_CLUSTER') 
# Create your views here. 
#add the login required decorator, so the method cannot be accessed withour login 
@login_required(login_url='login/') 
def index(request): 
    return render(request,"chat.html"); 
#use the csrf_exempt decorator to exempt this function from csrf checks 
@csrf_exempt 
def broadcast(request): 
    # collect the message from the post parameters, and save to the database 
    message = Conversation(message=request.POST.get('message', ''), status='', user=request.user); 
    message.save(); 
    # create an dictionary from the message instance so we can send only required details to pusher 
    message = {'name': message.user.username, 'status': message.status, 'message': message.message, 'id': message.id} 
    #trigger the message, channel and event to pusher 
    pusher.trigger(u'a_channel', u'an_event', message) 
    # return a json response of the broadcasted message 
    return JsonResponse(message, safe=False) 

#return all conversations in the database 
def conversations(request): 
    data = Conversation.objects.all() 
    # loop through the data and create a new list from them. Alternatively, we can serialize the whole object and send the serialized response 
    data = [{'name': person.user.username, 'status': person.status, 'message': person.message, 'id': person.id} for person in data] 
    # return a json response of the broadcasted messgae 
    return JsonResponse(data, safe=False) 

#use the csrf_exempt decorator to exempt this function from csrf checks 
@csrf_exempt 
def delivered(request, id): 
    message = Conversation.objects.get(pk=id); 
    # verify it is not the same user who sent the message that wants to trigger a delivered event 
    if request.user.id != message.user.id: 
        socket_id = request.POST.get('socket_id', '') message.status = 'Delivered'; message.save(); 
        message = {'name': message.user.username, 'status': message.status, 'message': message.message, 'id': message.id} 
        pusher.trigger(u'a_channel', u'delivered_message', message, socket_id) 
        return HttpResponse('ok'); 
    else: 
        return HttpResponse('Awaiting Delivery');

In the code above, we have defined four main functions which are:

index
broadcast
conversation
delivered

In the index function, we added the login required decorator, and we also passed the login URL argument which does not exist yet, as we will need to create it in the urls.py file. Also, we rendered a default template called chat.html that we will also create soon.

In the broadcast function, we retrieved the content of the message being sent, saved it into our database, and finally triggered a Pusher request passing in our message dictionary, as well as a channel and event name.

In the conversations function, we simply grab all conversations and return them as a JSON response.

Finally, we have the delivered function, which is the function that takes care of our message delivery status.

In this function, we get the conversation by the ID supplied to us. We then verify that the user who wants to trigger the delivered event isn’t the user who sent the message in the first place. Also, we pass in the socket_id so that Pusher does not broadcast the event back to the person who triggered it.

The socket_id stands as an identifier for the socket connection that triggered the event.

Populating The URL’s.py

Let us open up our pusher_message\urls.py file and replace with the following:

"""pusher_message URL Configuration The `urlpatterns` list routes URLs to views. 
For more information please see: https://docs.djangoproject.com/en/1.11/topics/http/urls/ 
Examples: Function views 
1. Add an import: from my_app import views 
2. Add a URL to urlpatterns: url(r'^$', views.home, name='home') 
Class-based views 
1. Add an import: from other_app.views import Home 
2. Add a URL to urlpatterns: url(r'^$', Home.as_view(), name='home') 
Including another URLconf 
1. Import the include() function: from django.conf.urls import url, include 
2. Add a URL to urlpatterns: url(r'^blog/', include('blog.urls')) 
""" 
from django.conf.urls import url 
from django.contrib import admin 
from django.contrib.auth import views 
from message.views import * 
urlpatterns = [url(r'^$', index), 
               url(r'^admin/', admin.site.urls), 
               url(r'^login/$', views.login, {'template_name': 'login.html'}), 
               url(r'^logout/$', views.logout, {'next_page': '/login'}), 
               url(r'^conversation$', broadcast), url(r'^conversations/$', conversations), 
               url(r'^conversations/(?P<id>[-\w]+)/delivered$',delivered) 
               ]

What has changed in this file? We have added six new routes to the file.

We have defined the entry point and assigned it to our index function. Next, we defined the login URL, which the login_required decorator would try to access to authenticate users.

We have used the default auth function to handle it but passed in our own custom template for login, which we will create soon.

Next, we defined the routes for the conversation message trigger, all conversations, and finally the delivered conversation.

Creating the HTML Files

Now we will need to create two HTML pages so our application can run smoothly. We have referenced two HTML pages in the course of building the application.

Let us create a new folder in our messages folder called templates.

Next, we create a file called login.html in our templates folder and replace it with the following:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
{% if form.errors %} 
<center>
   <p>Your username and password didn't match. Please try again.</p>
</center>
{% endif %} {% if next %} {% if user.is_authenticated %} 
<center>
   <p>Your account doesn't have access to this page. To proceed, please login with an account that has access.</p>
</center>
{% else %} 
<center>
   <p>Please login to see this page.</p>
</center>
{% endif %} {% endif %} 
<div class="container">
   <div class="row">
      <div class="col-md-4 col-md-offset-4">
         <div class="login-panel panel panel-default">
            <div class="panel-heading">
               <h3 class="panel-title">Please Sign In</h3>
            </div>
            <div class="panel-body">
               <form method="post" action="">
                  {% csrf_token %} 
                  <p class="bs-component"> 
                  <table>
                     <tr>
                        <td>{{ form.username.label_tag }}</td>
                        <td>{{ form.username }}</td>
                     </tr>
                     <tr>
                        <td>{{ form.password.label_tag }}</td>
                        <td>{{ form.password }}</td>
                     </tr>
                  </table>
                  </p> 
                  <p class="bs-component"> 
                  <center> <input class="btn btn-success btn-sm" type="submit" value="login" /> </center>
                  </p> <input type="hidden" name="next" value="{{ next }}" /> 
               </form>
            </div>
         </div>
      </div>
   </div>
</div>
Next, let us create the `chat.html` file and replace it with the following: 
<html>
   <head>
      <title> </title>
   </head>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.2/vue.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.1/axios.min.js"></script> <script src="//js.pusher.com/4.0/pusher.min.js"></script> 
   <style> .chat { list-style: none; margin: 0; padding: 0; } .chat li { margin-bottom: 10px; padding-bottom: 5px; border-bottom: 1px dotted #B3A9A9; } .chat li.left .chat-body { margin-left: 60px; } .chat li.right .chat-body { margin-right: 60px; } .chat li .chat-body p { margin: 0; color: #777777; } .panel .slidedown .glyphicon, .chat .glyphicon { margin-right: 5px; } .panel-body { overflow-y: scroll; height: 250px; } ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5; } ::-webkit-scrollbar { width: 12px; background-color: #F5F5F5; } ::-webkit-scrollbar-thumb { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #555; } </style>
   <body>
      <div class="container" id="app">
         <div class="row">
            <div class="col-md-12">
               <div class="panel panel-primary">
                  <div class="panel-heading"> <span class="glyphicon glyphicon-comment"></span> Chat </div>
                  <div class="panel-body">
                     <ul class="chat" id="chat" >
                        <li class="left clearfix" v-for="data in conversations">
                           <span class="chat-img pull-left" > <img :src="'http://placehold.it/50/55C1E7/fff&amp;text='+data.name" alt="User Avatar" class="img-circle"/> </span> 
                           <div class="chat-body clearfix">
                              <div class="header"> <strong class="primary-font" v-html="data.name"> </strong> <small class="pull-right text-muted" v-html="data.status"></small> </div>
                              <p v-html="data.message"> </p>
                           </div>
                        </li>
                     </ul>
                  </div>
                  <div class="panel-footer">
                     <div class="input-group"> <input id="btn-input" v-model="message" class="form-control input-sm" placeholder="Type your message here..." type="text"> <span class="input-group-btn"> <button class="btn btn-warning btn-sm" id="btn-chat" @click="sendMessage()"> Send</button> </span> </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </body>
</html>

Vue Component And Pusher Bindings

That’s it! Now, whenever a new message is delivered, it will be broadcast and we can listen, using our channel, to update the status in realtime. Below is our Example component written using Vue.js.

Please note: In the Vue component below, a new function called **queryParams** was defined to serialize our POST body so it can be sent as **x-www-form-urlencoded** to the server in place of as a **payload** . We did this because Django cannot handle requests coming in as **payload**.

<script> 
var pusher = new Pusher('XXX_APP_KEY', { cluster: 'XXX_APP_CLUSTER' });
var socketId = null;
pusher.connection.bind('connected', function () { socketId = pusher.connection.socket_id; });
var my_channel = pusher.subscribe('a_channel');
var config = { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } };
new Vue({
    el: "#app", data: { 'message': '', 'conversations': [] }, mounted() {
        this.getConversations();
        this.listen();
    }, methods: {
        sendMessage() { axios.post('/conversation', this.queryParams({ message: this.message }), config).then(response => { this.message = ''; }); }, getConversations() {
            axios.get('/conversations').then((response) => {
                this.conversations = response.data;
                this.readall();
            });
        },
        listen() {
            my_channel.bind("an_event", (data) => {
                this.conversations.push(data);
                axios.post('/conversations/' + data.id + '/delivered', this.queryParams({ socket_id: socketId }));
            }) my_channel.bind("delivered_message", (data) => { for (var i = 0; i < this.conversations.length; i++) { if (this.conversations[i].id == data.id) { this.conversations[i].status = data.status; } } })
        },
        readall() {
            for (var i = 0; i < this.conversations.length; i++) {
                if (this.conversations[i].status == 'Sent') {
                    axios.post('/conversations/' + this.conversations[i].id + '/delivered');
                }
            }
        },
        queryParams(source) {
            var array = [];
            for (var key in source) {
                array.push(encodeURIComponent(key) + "=" + encodeURIComponent(source[key]));
            }
            return array.join("&");
        }
    }
});
</script>

Below is the image demonstrating what we have built:

Conclusion

In this article, we have covered how to create a realtime message delivery status using Django and Pusher. We have gone through exempting certain functions from CSRF checks, as well as exempting the broadcaster from receiving an event they triggered.

The code is hosted on a public GitHub repository. You can download it for educational purposes.

Have a better way we could have built our application, reservations or comments? Let us know in the comments. Remember, sharing is learning.

This post is originally published by the author here.