чат, message, Django, chat, сообщение

За традицією, що склалася, розповім про свої досвіди з впровадження нового функціоналу на сайті. На даний момент цим функціоналом є особисті повідомлення користувача. Звичайно, це зараз працює не так добре, як у відомих соціальних мережах... але все буде працювати. Головне фідбек на форумі , будь ласка.

Отже. Дуже хотілося додати особисті повідомлення на сайті, тим більше, що я вже сказав про це півроку тому. Залишалося питання, як це взагалі реалізувати. При пошуку інтернету вдалося натрапити на варіант, коли формується наступна модель даних.

• Id повідомлення
• from_user - відправник
• to_user - одержувач
• pub_date - дата повідомлення
• message - контент повідомлення

Спробував продати цей варіант, але мене зупинило те, що раптом після особистих повідомлень я захочу зробити чати? То чому б одразу не закласти основу для чатів?

Моделі чату та повідомлень

Це був би чудовий варіант для подальшого розвитку ресурсу. Але в даному випадку потрібно створити дві моделі Chat та Message .

# -*- coding: utf-8 -*-

from django.db import models
from django.contrib.auth.models import User
from django.utils import timezone
from django.utils.translation import ugettext_lazy as _


class Chat(models.Model):
    DIALOG = 'D'
    CHAT = 'C'
    CHAT_TYPE_CHOICES = (
        (DIALOG, _('Dialog')),
        (CHAT, _('Chat'))
    )

    type = models.CharField(
        _('Тип'),
        max_length=1,
        choices=CHAT_TYPE_CHOICES,
        default=DIALOG
    )
    members = models.ManyToManyField(User, verbose_name=_("Участник"))

    @models.permalink
    def get_absolute_url(self):
        return 'users:messages', (), {'chat_id': self.pk }


class Message(models.Model):
    chat = models.ForeignKey(Chat, verbose_name=_("Чат"))
    author = models.ForeignKey(User, verbose_name=_("Пользователь"))
    message = models.TextField(_("Сообщение"))
    pub_date = models.DateTimeField(_('Дата сообщения'), default=timezone.now)
    is_readed = models.BooleanField(_('Прочитано'), default=False)

    class Meta:
        ordering=['pub_date']

    def __str__(self):
        return self.message

Якщо з моделлю Message все має бути зрозумілим. Є текст повідомлення, статус, чи воно було прочитано, автор повідомлення та чат в який воно було відправлено, а також дата відправлення повідомлення.

То ось модель Chat дещо складніше буде. По-перше, чати можуть бути духом видів. Перший – це особиста розмова двох людей. Другий вид – це колективний чат. Навіщо так було зроблено? Це було необхідно для того, щоб спростити пошук потрібного чату, надсилаючи повідомлення користувачеві з його особистої сторінки. На жаль, на даний момент зроблено тільки такий спосіб надіслати перше повідомлення користувачу. Тобто зайти на його сторінку та клацнути кнопку написати повідомлення. Надалі можна буде шукати користувача зі сторінки діалогів на вашій особистій сторінці. Це поки що тимчасові обмеження в рамках першої User Story , яку я собі написав.

Кожен чат має many-to-many зв'язок, який відповідає за список учасників у рамках чату. Завдяки цьому можна обмежити перегляд чатів, а також можливість писати в чати, якщо користувач не був запрошений до цього чату.

urls.py

Які хмюшки нам знадобляться і які маршрути можна зробити? Мені на реалізацію даного функціоналу в найпростішому вигляді знадобилося написати три юшки і відповідно три маршрути в urls.py.

url(r'^dialogs/$', login_required(views.DialogsView.as_view()), name='dialogs'),
url(r'^dialogs/create/(?P<user_id>\d+)/$', login_required(views.CreateDialogView.as_view()), name='create_dialog'),
url(r'^dialogs/(?P<chat_id>\d+)/$', login_required(views.MessagesView.as_view()), name='messages'),

Не заглиблюватимемося в якому саме додатку використовуватимемо дані маршрути - це не принципово.

За фактом тут є три юшки, одна для списку діалогів у користувача, інша для створення діалогу зі сторінки іншого користувача, а третя для повідомлень у діалозі.

Форма повідомлення

У цьому випадку можна використовувати форму моделі. Вкажемо модель, а також які поля мають бути відображені з видаленням лейбла біля введення.

За замовчуванням у вас буде звичайна textarea. Я використовую свій самописний WYSIWYG редактор.

class MessageForm(ModelForm):
    class Meta:
        model = Message
        fields = ['message']
        labels = {'message': ""}

Подання та шаблони

Відображення списку діалогів

Для отримання списку всіх діалогів, у яких задіяний користувач, необхідно провести фільтрацію всіх чатів за учасниками, тобто по Many-toMany полю members.

class DialogsView(View):
    def get(self, request):
        chats = Chat.objects.filter(members__in=[request.user.id])
        return render(request, 'users/dialogs.html', {'user_profile': request.user, 'chats': chats})

У цьому випадку у мене є шаблон для діалогів, в який я передаю авторизованого користувача та список чатів. Активний користувач буде потрібен для коректного відображення прочитаних та не прочитаних повідомлень у списку діалогів.

Найбільший інтерес представляє сам список діалогів та його верстка, тому із шаблону тут буде представлена лише та частина, що відповідає за верстку.

<div class="panel">
        {% load tz %}
        {% if chats.count == 0 %}
            <div class="panel panel-body">{% trans "Нет ни одного начатого диалога" %}</div>
        {% endif %}
        {% for chat in chats %}
            {% if chat.message_set.count != 0 %}
                {% with last_message=chat.message_set.last %}
                    {% get_companion user chat as companion %}
                    <a class="list-group-item {% if companion == last_message.author and not last_message.is_readed %}unreaded{% endif %}" href="{{ chat.get_absolute_url }}">
                        <img class="avatar-messages" src="{{ companion.userprofile.get_avatar }}">
                        <div class="reply-body">
                            <ul class="list-inline">
                                <li class="drop-left-padding">
                                    <strong class="list-group-item-heading">{{ companion.username }}</strong>
                                </li>
                                <li class="pull-right text-muted"><small>{{ last_message.pub_date|utc }}</small></li>
                            </ul>
                            {% if companion != last_message.author %}
                                <div>
                                    <img class="avatar-rounded-sm" src="{{ last_message.author.userprofile.get_avatar }}">
                                    <div class="attached-reply-body {% if not last_message.is_readed %}unreaded{% endif %}">{{ last_message.message|truncatechars_html:"200"|safe|striptags }}</div>
                                </div>
                            {% else %}
                                <div>{{ last_message.message|truncatechars_html:"200"|safe|striptags }}</div>
                            {% endif %}
                        </div>
                    </a>
                {% endwith %}
            {% endif %}
        {% endfor %}
    </div>

Ви можете помітити в шаблоні мій вбудований тег. Даний тег відповідає за те, щоб повернути співрозмовника у діалозі, щоб відштовхуючись від інформації про співрозмовника сформувати адекватну верстку для списку діалогів та вказівку прочитаних та непрочитаних повідомлень у списку діалогів.

@register.simple_tag
def get_companion(user, chat):
    for u in chat.members.all():
        if u != user:
            return u
    return None

Таким чином, список діалогів буде виглядати наступним чином:

Поточний діалог та повідомлення

Для відображення поточного діалогу та повідомлень вже знадобиться складніша логіка. Справа в тому, що тут доступ до чату здійснюється за ID, але необхідно зробити не лише спробу отримання діалогу, але й перевірити, чи існує у списку учасників користувач, який намагається потрапити до цього чату. Якщо він не існує у списку учасників, то доступ до цього чату йому заборонено. Окрім іншого в цьому ж поданні обробляється відсилання повідомлень та позначка повідомлень прочитаними.

class MessagesView(View):
    def get(self, request, chat_id):
        try:
            chat = Chat.objects.get(id=chat_id)
            if request.user in chat.members.all():
                chat.message_set.filter(is_readed=False).exclude(author=request.user).update(is_readed=True)
            else:
                chat = None
        except Chat.DoesNotExist:
            chat = None

        return render(
            request,
            'users/messages.html',
            {
                'user_profile': request.user,
                'chat': chat,
                'form': MessageForm()
            }
        )

    def post(self, request, chat_id):
        form = MessageForm(data=request.POST)
        if form.is_valid():
            message = form.save(commit=False)
            message.chat_id = chat_id
            message.author = request.user
            message.save()
        return redirect(reverse('users:messages', kwargs={'chat_id': chat_id}))

Шаблон списку повідомлень

{% if not chat %}
    <div class="panel panel-body">
        {% trans "Невозможно начать беседу. Не найден пользователь или вы не имеете доступа к данной беседе." %}
    </div>
{% else %}
    {% load tz %}
    {% if chat %}
        <div id="messages" class="panel">
            <div id="innerMessages">
                {% for message in chat.message_set.all %}
                        {% include 'users/message.html' with message_item=message %}
                {% endfor %}
            </div>
        </div>
    {% endif %}
    <div id="message_form">
        <form id="message-form" class="panel panel-body" method="post" >
            {% load bootstrap3 %}
            {% csrf_token %}
            {% bootstrap_form form %}
            <button type="submit" class="btn btn-default btn-sm" onclick="return ETextEditor.validateForm('message-form')"><span class="ico ico-comment"></span>{% trans "Отправить" %}</button>
        </form>
    </div>
{% endif %}

Шаблон повідомлення

{% url 'users:profile' message_item.author.username as the_user_url%}
{% load tz %}
<div class="list-group-item {% if not message_item.is_readed %}unreaded{% endif %}">
    <a href="{{ the_user_url }}"><img class="avatar-comment" src="{{ message_item.author.userprofile.get_avatar }}"></a>
    <div class="reply-body">
        <ul class="list-inline">
            <li class="drop-left-padding">
                <strong class="list-group-item-heading"><a href="{{ the_user_url }}">{{ message_item.author.username }}</a></strong>
            </li>
            <li class="pull-right text-muted"><small>{{ message_item.pub_date|utc }}</small></li>
        </ul>
        <div>{{ message_item.message|safe }}</div>
    </div>
</div>

Приклад діалогу, що вийшов.

Початок розмови з користувачем

На даний момент реалізований лише один метод для початку розмови з користувачем. Необхідно перейти на сторінку користувача і натиснути кнопку "Написати повідомлення", тоді через посилання буде відправлено запит, в якому буде створено чат або знайдено вже існуючий чат з цим користувачем. Тут використовується перевірка на те, чи є чат діалогом або бесідою декількох користувачів. Що дозволяє дещо спростити пошук необхідного діалогу.

class CreateDialogView(View):
    def get(self, request, user_id):
        chats = Chat.objects.filter(members__in=[request.user.id, user_id], type=Chat.DIALOG).annotate(c=Count('members')).filter(c=2)
        if chats.count() == 0:
            chat = Chat.objects.create()
            chat.members.add(request.user)
            chat.members.add(user_id)
        else:
            chat = chats.first()
        return redirect(reverse('users:messages', kwargs={'chat_id': chat.id}))

Обов'язково робимо перевірку на кількість користувачів, оскільки в особистій бесіді може бути лише два користувача, та й перевіряємо, щоб цими користувачами був наш авторизований користувачів, а також користувач з яким ми намагаємося розпочати бесіду.

Після того як чат створено, робимо переадресацію на сторінку повідомлень.

Для Django рекомендую VDS-сервера хостера Timeweb .