Run thread update when connecting to websocket to get missed posts if the

browser was closed

boards/static/js/thread_update.js

@@ -1,285 +1,339 b''
 /*
  @licstart  The following is the entire license notice for the
  JavaScript code in this page.
 
 
  Copyright (C) 2013  neko259
 
  The JavaScript code in this page is free software: you can
  redistribute it and/or modify it under the terms of the GNU
  General Public License (GNU GPL) as published by the Free Software
  Foundation, either version 3 of the License, or (at your option)
  any later version.  The code is distributed WITHOUT ANY WARRANTY;
  without even the implied warranty of MERCHANTABILITY or FITNESS
  FOR A PARTICULAR PURPOSE.  See the GNU GPL for more details.
 
  As additional permission under GNU GPL version 3 section 7, you
  may distribute non-source (e.g., minimized or compacted) forms of
  that code without the copy of the GNU GPL normally required by
  section 4, provided you include this license notice and a URL
  through which recipients can access the Corresponding Source.
 
  @licend  The above is the entire license notice
  for the JavaScript code in this page.
  */
 
 var wsUrl = 'ws://localhost:9090/connection/websocket';
 var wsUser = '';
 
 var loading = false;
 var lastUpdateTime = null;
 var unreadPosts = 0;
+var documentOriginalTitle = '';
 
 // Thread ID does not change, can be stored one time
 var threadId = $('div.thread').children('.post').first().attr('id');
 
 function connectWebsocket() {
     var metapanel = $('.metapanel')[0];
 
     var wsHost = metapanel.getAttribute('data-ws-host');
     var wsPort = metapanel.getAttribute('data-ws-port');
 
     if (wsHost.length > 0 && wsPort.length > 0)
     var centrifuge = new Centrifuge({
         "url": 'ws://' + wsHost + ':' + wsPort + "/connection/websocket",
         "project": metapanel.getAttribute('data-ws-project'),
         "user": wsUser,
         "timestamp": metapanel.getAttribute('data-last-update'),
         "token": metapanel.getAttribute('data-ws-token'),
         "debug": false
     });
 
     centrifuge.on('error', function(error_message) {
         console.log("Error connecting to websocket server.");
         return false;
     });
 
     centrifuge.on('connect', function() {
         var channelName = 'thread:' + threadId;
         centrifuge.subscribe(channelName, function(message) {
             var postHtml = message.data['html'];
             var isAdded = (message.data['diff_type'] === 'added');
 
             if (postHtml) {
                 updatePost(postHtml, isAdded);
             }
         });
 
+        // For the case we closed the browser and missed some updates
+        getThreadDiff();
         $('#autoupdate').text('[+]');
     });
 
     centrifuge.connect();
 
     return true;
 }
 
+/**
+ * Get diff of the posts from the current thread timestamp.
+ * This is required if the browser was closed and some post updates were
+ * missed.
+ */
+function getThreadDiff() {
+    var lastPost = threadPosts.last();
+    var threadId = threadPosts.first().attr('id');
+
+    var diffUrl = '/api/diff_thread/' + threadId + '/' + lastUpdateTime + '/';
+
+    lastUpdateTime = $('.metapanel').attr('data-last-update');
+
+    $.getJSON(diffUrl)
+        .success(function(data) {
+            var bottom = isPageBottom();
+            var addedPosts = data.added;
+
+            for (var i = 0; i < addedPosts.length; i++) {
+                var postText = addedPosts[i];
+                var post = $(postText);
+
+                updatePost(post, true)
+
+                lastPost = post;
+            }
+
+            var updatedPosts = data.updated;
+
+            for (var i = 0; i < updatedPosts.length; i++) {
+                var postText = updatedPosts[i];
+                var post = $(postText);
+
+                updatePost(post, false)
+            }
+
+            // TODO Process removed posts if any
+
+            lastUpdateTime = data.last_update;
+        })
+}
+
+/**
+ * Add or update the post on thml page.
+ */
 function updatePost(postHtml, isAdded) {
     // This needs to be set on start because the page is scrolled after posts
     // are added or updated
     var bottom = isPageBottom();
 
     var post = $(postHtml);
 
     var threadPosts = $('div.thread').children('.post');
 
     var lastUpdate = '';
 
     if (isAdded) {
         var lastPost = threadPosts.last();
 
         post.appendTo(lastPost.parent());
 
         updateBumplimitProgress(1);
         showNewPostsTitle(1);
 
         lastUpdate = post.children('.post-info').first()
             .children('.pub_time').first().text();
 
         if (bottom) {
             scrollToBottom();
         }
     } else {
         var postId = post.attr('id');
 
         var oldPost = $('div.thread').children('.post[id=' + postId + ']');
 
         oldPost.replaceWith(post);
     }
 
     processNewPost(post);
     updateMetadataPanel(lastUpdate)
 }
 
+/**
+ * Initiate a blinking animation on a node to show it was updated.
+ */
 function blink(node) {
     var blinkCount = 2;
 
     var nodeToAnimate = node;
     for (var i = 0; i < blinkCount; i++) {
         nodeToAnimate = nodeToAnimate.fadeTo('fast', 0.5).fadeTo('fast', 1.0);
     }
 }
 
 function isPageBottom() {
     var scroll = $(window).scrollTop() / ($(document).height()
         - $(window).height());
 
     return scroll == 1
 }
 
 function initAutoupdate() {
     return connectWebsocket();
 }
 
 function getReplyCount() {
     return $('.thread').children('.post').length
 }
 
 function getImageCount() {
     return $('.thread').find('img').length
 }
 
+/**
+ * Update post count, images count and last update time in the metadata
+ * panel.
+ */
 function updateMetadataPanel(lastUpdate) {
     var replyCountField = $('#reply-count');
     var imageCountField = $('#image-count');
 
     replyCountField.text(getReplyCount());
     imageCountField.text(getImageCount());
 
     if (lastUpdate !== '') {
         var lastUpdateField = $('#last-update');
         lastUpdateField.text(lastUpdate);
         blink(lastUpdateField);
     }
 
     blink(replyCountField);
     blink(imageCountField);
 }
 
 /**
  * Update bumplimit progress bar
  */
 function updateBumplimitProgress(postDelta) {
     var progressBar = $('#bumplimit_progress');
     if (progressBar) {
         var postsToLimitElement = $('#left_to_limit');
 
         var oldPostsToLimit = parseInt(postsToLimitElement.text());
         var postCount = getReplyCount();
         var bumplimit = postCount - postDelta + oldPostsToLimit;
 
         var newPostsToLimit = bumplimit - postCount;
         if (newPostsToLimit <= 0) {
             $('.bar-bg').remove();
             $('.thread').children('.post').addClass('dead_post');
         } else {
             postsToLimitElement.text(newPostsToLimit);
             progressBar.width((100 - postCount / bumplimit * 100.0) + '%');
         }
     }
 }
 
-var documentOriginalTitle = '';
 /**
  * Show 'new posts' text in the title if the document is not visible to a user
  */
 function showNewPostsTitle(newPostCount) {
     if (document.hidden) {
         if (documentOriginalTitle === '') {
             documentOriginalTitle = document.title;
         }
         unreadPosts = unreadPosts + newPostCount;
         document.title = '[' + unreadPosts + '] ' + documentOriginalTitle;
 
         document.addEventListener('visibilitychange', function() {
             if (documentOriginalTitle !== '') {
                 document.title = documentOriginalTitle;
                 documentOriginalTitle = '';
                 unreadPosts = 0;
             }
 
             document.removeEventListener('visibilitychange', null);
         });
     }
 }
 
 /**
  * Clear all entered values in the form fields
  */
 function resetForm(form) {
     form.find('input:text, input:password, input:file, select, textarea').val('');
     form.find('input:radio, input:checkbox')
              .removeAttr('checked').removeAttr('selected');
     $('.file_wrap').find('.file-thumb').remove();
 }
 
 /**
  * When the form is posted, this method will be run as a callback
  */
 function updateOnPost(response, statusText, xhr, form) {
     var json = $.parseJSON(response);
     var status = json.status;
 
     showAsErrors(form, '');
 
     if (status === 'ok') {
         resetForm(form);
     } else {
         var errors = json.errors;
         for (var i = 0; i < errors.length; i++) {
             var fieldErrors = errors[i];
 
             var error = fieldErrors.errors;
 
             showAsErrors(form, error);
         }
     }
 
     scrollToBottom();
 }
 
 /**
  * Show text in the errors row of the form.
  * @param form
  * @param text
  */
 function showAsErrors(form, text) {
     form.children('.form-errors').remove();
 
     if (text.length > 0) {
         var errorList = $('<div class="form-errors">' + text
             + '<div>');
         errorList.appendTo(form);
     }
 }
 
 /**
  * Run js methods that are usually run on the document, on the new post
  */
 function processNewPost(post) {
     addRefLinkPreview(post[0]);
     highlightCode(post);
     blink(post);
 }
 
 $(document).ready(function(){
     if ('WebSocket' in window) {
         if (initAutoupdate()) {
             // Post form data over AJAX
             var threadId = $('div.thread').children('.post').first().attr('id');
 
             var form = $('#form');
 
             var options = {
                 beforeSubmit: function(arr, $form, options) {
                     showAsErrors($('form'), gettext('Sending message...'));
                 },
                 success: updateOnPost,
                 url: '/api/add_post/' + threadId + '/'
             };
 
             form.ajaxForm(options);
 
             resetForm(form);
         }
     }
 });

boards/views/thread.py

@@ -1,159 +1,157 b''
 from django.core.urlresolvers import reverse
 from django.db import transaction
 from django.http import Http404
 from django.shortcuts import get_object_or_404, render, redirect
-from django.views.decorators.cache import never_cache, cache_control
 from django.views.generic.edit import FormMixin
 
 from boards import utils, settings
 from boards.forms import PostForm, PlainErrorList
 from boards.models import Post, Ban
 from boards.views.banned import BannedView
 from boards.views.base import BaseBoardView, CONTEXT_FORM
 from boards.views.posting_mixin import PostMixin
 import neboard
 
 TEMPLATE_GALLERY = 'boards/thread_gallery.html'
 TEMPLATE_NORMAL = 'boards/thread.html'
 
 CONTEXT_POSTS = 'posts'
 CONTEXT_OP = 'opening_post'
 CONTEXT_BUMPLIMIT_PRG = 'bumplimit_progress'
 CONTEXT_POSTS_LEFT = 'posts_left'
 CONTEXT_LASTUPDATE = "last_update"
 CONTEXT_MAX_REPLIES = 'max_replies'
 CONTEXT_THREAD = 'thread'
 CONTEXT_BUMPABLE = 'bumpable'
 CONTEXT_WS_TOKEN = 'ws_token'
 CONTEXT_WS_PROJECT = 'ws_project'
 CONTEXT_WS_HOST = 'ws_host'
 CONTEXT_WS_PORT = 'ws_port'
 
 FORM_TITLE = 'title'
 FORM_TEXT = 'text'
 FORM_IMAGE = 'image'
 
 MODE_GALLERY = 'gallery'
 MODE_NORMAL = 'normal'
 
 
 class ThreadView(BaseBoardView, PostMixin, FormMixin):
 
-    @cache_control(no_cache=True)
     def get(self, request, post_id, mode=MODE_NORMAL, form=None):
         try:
             opening_post = Post.objects.filter(id=post_id).only('thread_new')[0]
         except IndexError:
             raise Http404
 
         # If this is not OP, don't show it as it is
         if not opening_post or not opening_post.is_opening():
             raise Http404
 
         if not form:
             form = PostForm(error_class=PlainErrorList)
 
         thread_to_show = opening_post.get_thread()
 
         context = self.get_context_data(request=request)
 
         context[CONTEXT_FORM] = form
         context[CONTEXT_LASTUPDATE] = str(utils.datetime_to_epoch(
             thread_to_show.last_edit_time))
         context[CONTEXT_THREAD] = thread_to_show
         context[CONTEXT_MAX_REPLIES] = settings.MAX_POSTS_PER_THREAD
 
         if settings.WEBSOCKETS_ENABLED:
             context[CONTEXT_WS_TOKEN] = utils.get_websocket_token(
                 timestamp=context[CONTEXT_LASTUPDATE])
             context[CONTEXT_WS_PROJECT] = neboard.settings.CENTRIFUGE_PROJECT_ID
             context[CONTEXT_WS_HOST] = request.get_host().split(':')[0]
             context[CONTEXT_WS_PORT] = neboard.settings.CENTRIFUGE_PORT
 
         # TODO Move this to subclasses: NormalThreadView, GalleryThreadView etc
         if MODE_NORMAL == mode:
             bumpable = thread_to_show.can_bump()
             context[CONTEXT_BUMPABLE] = bumpable
             if bumpable:
                 left_posts = settings.MAX_POSTS_PER_THREAD \
                              - thread_to_show.get_reply_count()
                 context[CONTEXT_POSTS_LEFT] = left_posts
                 context[CONTEXT_BUMPLIMIT_PRG] = str(
                     float(left_posts) / settings.MAX_POSTS_PER_THREAD * 100)
 
             context[CONTEXT_OP] = opening_post
 
             document = TEMPLATE_NORMAL
         elif MODE_GALLERY == mode:
             context[CONTEXT_POSTS] = thread_to_show.get_replies_with_images(
                 view_fields_only=True)
 
             document = TEMPLATE_GALLERY
         else:
             raise Http404
 
         # TODO Use dict here
         return render(request, document, context_instance=context)
 
     def post(self, request, post_id, mode=MODE_NORMAL):
         opening_post = get_object_or_404(Post, id=post_id)
 
         # If this is not OP, don't show it as it is
         if not opening_post.is_opening():
             raise Http404
 
         if not opening_post.get_thread().archived:
             form = PostForm(request.POST, request.FILES,
                             error_class=PlainErrorList)
             form.session = request.session
 
             if form.is_valid():
                 return self.new_post(request, form, opening_post)
             if form.need_to_ban:
                 # Ban user because he is suspected to be a bot
                 self._ban_current_user(request)
 
             return self.get(request, post_id, mode, form)
 
     @transaction.atomic
     def new_post(self, request, form, opening_post=None, html_response=True):
         """Add a new post (in thread or as a reply)."""
 
         ip = utils.get_client_ip(request)
         is_banned = Ban.objects.filter(ip=ip).exists()
 
         if is_banned:
             if html_response:
                 return redirect(BannedView().as_view())
             else:
                 return None
 
         data = form.cleaned_data
 
         title = data[FORM_TITLE]
         text = data[FORM_TEXT]
 
         text = self._remove_invalid_links(text)
 
         if FORM_IMAGE in list(data.keys()):
             image = data[FORM_IMAGE]
         else:
             image = None
 
         tags = []
 
         post_thread = opening_post.get_thread()
 
         post = Post.objects.create_post(title=title, text=text, image=image,
                                         thread=post_thread, ip=ip, tags=tags)
         post.send_to_websocket(request)
 
         thread_to_show = (opening_post.id if opening_post else post.id)
 
         if html_response:
             if opening_post:
                 return redirect(
                     reverse('thread', kwargs={'post_id': thread_to_show})
                     + '#' + str(post.id))
         else:
             return post