我正在尝试在我的Django Channels 2.1.2
项目中使用Django模板语言来在Facebook样式的通知弹出窗口中呈现所有未读的聊天消息。
未显示的chatmessages
(在各自的threads
中)的列表未显示,因为我在使用正确的语法时遇到了麻烦。
这是前端的外观。当您单击消息图标时,通知消失。
我有一个Notification
模型
class Notification(models.Model):
notification_user = models.ForeignKey(User, on_delete=models.CASCADE)
notification_chat = models.ForeignKey(ChatMessage, on_delete=models.CASCADE)
notification_read = models.BooleanField(default=False)
def __str__(self):
return f'{self.id}'
navbar.html
{% if user.is_authenticated %}
<li id="notification_li" class="nav-item">
<a class="nav-link" href="#" id="notificationLink">
<i class="fas fa-envelope"></i> Inbox</a>
{% for notifications in notification %}
<span id="notification_id">{{ notifications.notification_chat }}</span>
{% endfor %}
<div id="notificationContainer">
<div id="notificationTitle">Notifications</div>
<div id="notificationsBody" class="notifications">
{{ notification.notification_chatessage?? }}
</div>
<div id="notificationFooter"><a href="{% url 'chat:inbox' %}">See All</a></div>
</div>
</li>
base.html
<script>
$(document).ready(function() {
$("#notificationLink").click(function() {
$("#notificationContainer").fadeToggle(300);
$("#notification_id").fadeOut("slow");
return false;
});
//Document Click hiding the popup
$(document).click(function() {
$("#notificationContainer").hide();
});
//Popup on click
$("#notificationContainer").click(function() {
return false;
});
});
</script>
context_processors.py
def notification(request):
if request.user.is_authenticated:
notification = Notification.objects.filter(notification_user=request.user)
return {'notification':notification}
return Notification.objects.none()
我还将上下文处理器添加到设置中
在正确的地方。 notification_id
应该使用消息WebSocket发送,并在每次发送新消息时进行更新(我仍然无法成功完成此操作)。
consumers.py
async def websocket_receive(self, event):
# when a message is received from the websocket
print("receive", event)
message_type = event.get('type', None) #check message type, act accordingly
if message_type == "notification_read":
# Update the notification read status flag in Notification model.
notification = Notification.object.get(id=notification_id)
notification.notification_read = True
notification.save() #commit to DB
print("notification read")
front_text = event.get('text', None)
if front_text is not None:
loaded_dict_data = json.loads(front_text)
msg = loaded_dict_data.get('message')
user = self.scope['user']
username = 'default'
if user.is_authenticated:
username = user.username
myResponse = {
'message': msg,
'username': username,
'notification': notification_id # send a unique identifier for the notification
}
...
thread.html
...
// below is the message I am receiving
socket.onmessage = function(e) {
var data = JSON.parse(event.data);
// Find the notification icon/button/whatever
// and show a red dot, add the notification_id to element as id or data attribute.
console.log("message", e)
var chatDataMsg = JSON.parse(e.data)
chatHolder.append('<li>' + chatDataMsg.message + ' from ' + chatDataMsg.username + '</li>')
}
除了可以帮助我解决这个问题之外,我还要感谢任何良好的学习资源。
答案 0 :(得分:1)
要引用通知消息,应使用{{notifications.notification_chat.message}}
。另外,要显示所有通知,您将必须遍历所有通知。
navbar.html
{% if user.is_authenticated %}
<li id="notification_li" class="nav-item">
<a class="nav-link" href="#" id="notificationLink">
<i class="fas fa-envelope"></i> Inbox</a>
{% for notifications in notification %}
<span id="inbox-{{notifications.id}}">{{ notifications.notification_chat.message }}</span>
{% endfor %}
<div id="notificationContainer">
<div id="notificationTitle">Notifications</div>
<div id="notificationsBody" class="notifications">
{% for notifications in notification %}
<span id="notification-{{notifications.id}}">{{ notifications.notification_chat.message }}</span>
{% endfor %}
</div>
<div id="notificationFooter"><a href="{% url 'chat:inbox' %}">See All</a></div>
</div>
</li>
我还注意到,在您的thread.html
中,当您从服务器获得响应时,您没有更新通知。您可以使用ID来prepend
新通知。