0

I have a simple project that i have been working on for almost 3 days now and this project is a chat app that you can send and receive message. So i want to add a time that when i send a message just like in facebook messenger it have "just now", "2 mins ago or hour ago", "6 days ago", and also "the year and the time that i send that message". So i found a solution using react and js but i don't have any knowledge with react and js. Can someone help me to add a message sent time like messenger on my chat app project.

views.py

def message_view(request, sender, receiver):

if not request.user.is_authenticated:
    return redirect('index')
    
if request.method == "GET":

    return render(request, "chat/messages.html",
                  {'users': User.objects.exclude(username=request.user.username),
                   'receiver': User.objects.get(id=receiver),
                   'messages': Message.objects.filter(sender_id=sender, receiver_id=receiver) |
                               Message.objects.filter(sender_id=receiver, receiver_id=sender)})

messages.html

{% extends 'chat/chat.html' %}

{% block messages %}
    {% for message in messages %}
        {% if message.sender == request.user %}
            <div class="card-panel right" style="width: 75%; position: relative">
                <div style="position: absolute; top: 0; left:3px; font-weight: bolder" class="title">You</div>
                    {{ message }}
            </div>
        {% else %}
            <div class="card-panel left blue lighten-5" style="width: 75%; position: relative">
                <div style="position: absolute; top: 0; left:3px; font-weight: bolder" class="title">{{ message.sender }}</div>
                    {{ message }}
            </div>
        {% endif %}
    {% endfor %}

    <script>

        $(function () {
            $('#user{{ receiver.id }}').addClass('active');
            //Call receive function each 1 seconds to check for new messages in the database
            setInterval(receive,1000)
        })

    </script>
{% endblock %}

models.py

class Message(models.Model):

id = models.AutoField(primary_key=True)
sender = models.ForeignKey(User, related_name='sender', on_delete=models.CASCADE)
receiver = models.ForeignKey(User, related_name='receiver', on_delete=models.CASCADE)
message = models.CharField(max_length=1500)
timestamp = models.DateTimeField(auto_now_add=True)
is_read = models.BooleanField(default=False)

def __str__(self):
    return self.message

class Meta:
    ordering = ('timestamp',)
k3v1n
  • 381
  • 1
  • 3
  • 8
  • This is done with Javascript on the client side, not on the server side. Once the message is sent, the server doesn't have anything to do with it anymore. – MattDMo May 11 '21 at 02:43
  • Does this answer your question? [User-friendly time format in Python?](https://stackoverflow.com/questions/1551382/user-friendly-time-format-in-python) – Ken Y-N May 11 '21 at 02:50
  • Can you help me with the client side? – k3v1n May 11 '21 at 22:46

1 Answers1

1

You have the timestamp field in models.py, You can use that to show the time. You can do it via jinja templating.

This will add the date like it shows in facebook messenger:

{{ messages.timestamp|timesince }}

Other formats to add the date:

(This will show the day, month and year)

{{ messages.timestamp||date:"d M Y" }}

(This will show the complete date i.e the day, date, month, year, time

{{ messages.timestamp }}
Girik1105
  • 141
  • 5