Django + ajax implements online chat rooms, djangoajax

Source: Internet
Author: User

Django + ajax implements online chat rooms, djangoajax
Django + ajax online chat room

One of the small projects is a simple chat room.
Requirements:

  • Registration and login before speaking
  • Displays the most recent message in the chat box.
  • Use ajax to store messages in the background.
  • Use Round Robin to request new get messages to be displayed in the chat box
Models

Design the structure of the chat message topic:

class Chat(models.Model):    sender = models.ForeignKey(User, related_name='has_chats')    content = models.TextField()    time = models.DateTimeField(auto_now_add=True, null=True)    def __unicode__(self):        return u'%s' % self.content
Templates
{% Extends "base.html" % }{% block title %} chat room {% endblock % }{% block content %} <! -- Chat box --> <div class = "list-group col-md-10 col-md-offset-1 well"> <div class = "list-group-item" >{% for chat in chats %} 

Js
{% Block script %} <script >$ (function () {updateMsg (); // For more information // form submit event $ ("# chatForm "). submit (function () {// ajax submit form $. post (". /post/", $ ('# chatForm '). serialize (), function (data) {$ ("# content "). val (""); // clear the content box after the message is sent successfully}); return false; // prevent form submission}) ;}; // update the message function updateMsg () {$. post (". /post/", {post_type:" get_chat ", last_chat_id: $ (". chat_id "). last (). val ()}, function (data) {$ ('. list-group-item '). append (data); // parse the returned xml}); setTimeout ("updateMsg ()", 1000); // update once per second} </script >{% endblock %}

There are two main parts in js: one is to send messages, and the other is to receive round-robin messages.
Message sending: post the information in the chatForm form to the processing page, including the chat information content and post_type. This is a variable defined by myself, it is used to process the tags of different post requests at the same page address. Here, post_type is send_chat, that is, to send messages.
Update the message. The updateMsg () function uses the post request to post data to the same address. The content includes post_type: get_chat, last_chat_id: this is the id of the last chat information obtained from the chat box,$(".chat_id").last().val()This is to ensure that the information after the last chat information is obtained, and the loop time is set to one second for continuous execution.

Views
def index(request):    chats = list(Chat.objects.all())[-100:]    return render(request, 'chatroom.html', {'chats': chats})@csrf_exemptdef post(request):    if request.method == 'POST':        post_type = request.POST.get('post_type')        if post_type == 'send_chat':            new_chat = Chat.objects.create(                content = request.POST.get('content'),                sender = request.user,            )            new_chat.save()            return HttpResponse()        elif post_type == 'get_chat':            last_chat_id = int(request.POST.get('last_chat_id'))            #print last_chat_id            chats = Chat.objects.filter(id__gt = last_chat_id)            return render(request, 'chat_list.html', {'chats': chats})    else:        raise Http404
  • The index () function is used to process the chat main interface. The last 100 chat messages in the database are displayed in the chat box.
  • The post () function processes the received chat message requests and determines the processing action based on post_type.
    • Send_chat: generates a new Chat instance and stores it in the database. Nothing can be returned here, because the polling speed of Chat messages is fast and messages are constantly updated.
    • Get_chat: first obtain the last_chat_id, and then usechats = Chat.objects.filter(id__gt = last_chat_id)Obtain all Chat instances whose IDs are after last_chat_id.Filter (id _ gt = last_chat_id)It means to filter objects whose IDs are greater than last_chat_id.

Finished ~

URL stamp here

Github address of the complete project

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.