0

For a chat application within a Django project, I populate a sidebar with links for logged in users. The links open a pop-up for chat(similar to FB stlye).If I refresh the page any open pop-up is closed. I want to refresh only the sidebar to reflect if a user has logged out. This code refreshes the entire page and all open pop-up's close.

$(function(){
    $('#sidebar-name').on('scroll', function(){
        scrolling = true;
    });
    setTimeout(function() { location.reload() },3500);

});

I use the code below to get the messages and refresh the message box

function getMessages(){
    if (!scrolling) {
        $.get('/chatpop/messages/', function(messages){
            console.log(messages);
            $('#msg-list').html(messages);
            var chatlist = document.getElementById('msg-list-div');
            chatlist.scrollTop = chatlist.scrollHeight;
        });
    }
    var scrolling = false;
}

$(function(){
    $('#msg-list-div').on('scroll', function(){
        scrolling = true;
    });
    refreshTimer = setInterval(getMessages, 10000);
});

I also tried the following but not working..

$(function(){
    $('#sidebar-name').on('scroll', function(){
        scrolling = true;
    });
    (function() { load(location.href +'#sidebar-name') },10000);

});

I need to refresh only the sidebar in a way that does not close the already opened chat pop-up's.

The HTML being used is..

 <div class="chat-sidebar">
        <div class="sidebar-name">
            <!-- Pass username and display name to register popup -->
            {% for user in request.online_now %}
                {% if request.user != user %}
            <a href="javascript:register_popup('{{ user }}', '{{ user }}');">
            {% for img in users %}
                {% if img == user %}
        {% thumbnail img.profile.photo "30x30" crop="100%" as im %}
         <img src="{{ im.url }}" class="user-detail">
            {% endthumbnail %}{% endif %}{% endfor %}
            <span>{{ user }}</span>
            </a>{% endif %}{% endfor %}

have looked at some stackoverflow answers. But they all seem to handle reload on occurrence of an event. I simply want to refresh at a set time interval.Many thks..

Paddy Popeye
  • 1,634
  • 1
  • 16
  • 29
  • Don't use AJAX polling. If you're building a chat system use Websockets or Server Sent Events. – Rory McCrossan May 29 '18 at 14:12
  • this i already know and has nothing to do with the question – Paddy Popeye May 29 '18 at 14:13
  • 3
    So your template is on the server and you don't have an API? 1999 just called and wants their code back – Dominic May 29 '18 at 14:14
  • Do you really need to refresh the entire page? Can't you just do pooling every some seconds and do rest-calls to retrieve logged users? (or even better use websockets, which are much better solution for chat) – obey May 29 '18 at 14:14
  • 2
    @PaddyPopeye it has everything to do with your question as it solves the problem entirely and saves you DDOS-ing your own server by flooding it with AJAX requests – Rory McCrossan May 29 '18 at 14:16
  • 1
    `location.reload()` reloads the whole page. You don't have an issue with `setInterval`, you have an issue with what you're loading. At a minimum, use `$.ajax({method:'get', url:location.href).done(function (html) { ... parse html ... });` – freedomn-m May 29 '18 at 14:16

1 Answers1

1

Create a view which returns the online users in html form and load that url at intervals.

setInterval(function() {
      $("#sidebar-name").load("{% url 'get_active_users' %}"); // you need to create get_active_users view
}, 5000);
Dasith
  • 363
  • 2
  • 13
  • perfect... i'm already loading the logged users via a middleware I wrote, a little modification and the above function works !! – Paddy Popeye May 29 '18 at 17:51