Python navbar通知的Django模板语言语法

我试图在我的

Django Channels 2.1.2

项目中使用Django模板语言，在Facebook风格的通知弹出窗口中呈现任何未读的聊天消息

未读的

聊天信息列表

（在各自的

线程中

）未显示，因为我在正确的语法方面遇到了问题

这就是前端的外观。单击消息图标时，通知将消失

我有一个

通知

型号

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>&nbsp; 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>

我还将上下文处理器添加到设置中 在正确的地方。

通知\u id

应该使用消息WebSocket发送，并在每次发送新消息时更新（我仍然没有成功做到这一点）

消费者.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>')
      }

。。。
//下面是我收到的消息
socket.onmessage=函数（e）{
var data=JSON.parse（event.data）；
//找到通知图标/按钮/任何东西
//并显示一个红点，将通知id作为id或数据属性添加到元素中。
控制台日志（“消息”，e）
var chatDataMsg=JSON.parse（e.data）
chatHolder.append（“
”+chatDataMsg.message+”来自“+chatDataMsg.username+”
”）
}

---

除了帮助我解决这个问题，我非常感谢任何好的学习资源。

要参考通知消息，您应该使用

{{notifications.notification\u 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>&nbsp; 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>

{%if user.u经过身份验证%}

{%用于通知%中的通知}
{{notifications.notification_chat.message}}
{%endfor%}
通知
{%用于通知%中的通知}
{{notifications.notification_chat.message}}
{%endfor%}

---

我还注意到，在

thread.html

中，当收到服务器的响应时，您没有更新通知。您可以使用ID来预先发送新通知。

@BearBrown希望您能看到我在做什么！我看不到向导航栏添加新通知的代码，太感谢你了。消息现在显示在弹出窗口中，但是您是对的，当我收到服务器的响应时，我没有更新通知，因此导航栏没有显示正确的数据。我仍然不清楚如何使用django Channel websockets来

预先编写

。你在回答我之前的问题时暗示要在

thread.html

中添加一些js，但我已经把它放在那里了，什么也没有发生。所以

$（#notification元素）。在（“click”，function（）{data={“type”）：“notification_read”，“username”：username，“notification_id”：notification_id}；etc

进入

thread.html

并在发送消息时将数据发送到

通知

模型，默认值为

未读

，因此在

base.html

页面上，当用户单击弹出窗口时，js脚本首先需要将

通知id

更改为

读取

t：查找注释

//查找通知图标/按钮/任何内容
，然后在其下方使用类似
$（“#notificationContainer”）。prepend("第二条评论：js无法更新您的模型。当您将数据发送到
websocket\u receive
时，您需要按照建议更新状态。这意味着，在应用程序收到与特定通知交互的频道的响应之前，系统会将其视为未读通知。因此，即使用户重新加载在没有与通知交互的页面上，他可以看到他有一个ne通知第三条评论：是的，对于每个用户的每个通知（通知需要发送到哪个用户），表中会有一个新条目，以便您可以跟踪哪个用户与哪个通知交互。（例如团队消息）
   ...
      // 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>')
      }

{% if user.is_authenticated %}
              <li id="notification_li" class="nav-item">
                <a class="nav-link" href="#" id="notificationLink">
                  <i class="fas fa-envelope"></i>&nbsp; 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>