“读取”后通知不可读取：错误“通知id未定义”

Question

我将JQuery/JS与Django Channel WebSockets一起使用，以配置聊天消息的实时通知

当用户有任何带有nofication_read=False的Notification对象时，它们将在导航栏中显示，代码如下

{{ notification|length }}显示具有nofication_read=False的Notification对象的数量

navbar.html

<li id="notification_li" class="nav-item">
  <a class="nav-link" href="#" id="notificationLink">
    <span id="notification_id{{notification_id}}">{{ notification|length }}</span>
  <div id="notificationContainer">
    <div id="notificationTitle">Notifications</div>
    <div id="notificationsBody" class="notifications">
      {% for notifications in notification|slice:"0:10" %}
        <span id="notification-{{notification.id}}">
          {{ notifications.notification_chat.message }}
          via {{ notifications.notification_chat.user }}
          at {{ notifications.notification_chat.timestamp }}
        </span>
      {% endfor %}

我知道这不是实时的

但问题是，当用户刷新页面并单击红色图标span id=notification_id以显示其未读通知列表时，数据通过websocket（JSON.stringify）作为"type": "notification_read"发送，它调用consumers.y中的if message_type == "notification_read":命令，将它们标记为数据库中的nofication_read=True

当用户刷新页面时，红色图标不再存在，并且当他们尝试单击背景链接时，浏览器控制台中的错误将使其不可访问

Uncaught ReferenceError: notification_id is not defined

一旦他们收到另一个通知，页面被刷新，它显然又可以点击了

在初次单击之后的任何时候，用户都应该能够单击并查看read通知列表

消费者.py

class ChatConsumer(AsyncConsumer):
    ...
    async def websocket_receive(self, event):
        message_type = json.loads(event.get('text','{}')).get('type')
        if message_type == "notification_read":
            user = self.scope['user']
            username = user.username if user.is_authenticated else 'default'
            # Update the notification read status flag in Notification model.
            notification = Notification.objects.filter(notification_user=user).update(notification_read=True)
            print("notification read")
            return 

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 = user.username if user.is_authenticated else 'default'
            notification_id = 'default'
            myResponse = {
                'message': msg,
                'username': username,
                'notification': notification_id,
            }
   ...
        await self.create_chat_message(user, msg)
        other_user = self.scope['url_route']['kwargs']['username']
        other_user = User.objects.get(username=other_user)
        await self.create_notification(other_user, msg)
       ...
@database_sync_to_async
def create_chat_message(self, me, msg):
    thread_obj = self.thread_obj
    return ChatMessage.objects.create(thread=thread_obj, user=me, message=msg)

@database_sync_to_async
def create_notification(self, other_user, msg):
    last_chat = ChatMessage.objects.latest('id')
    created_notification = Notification.objects.create(notification_user=other_user, notification_chat=last_chat)
    return created_notification

上下文处理器.py

def notification(request):
    if request.user.is_authenticated:
        notification = Notification.objects.filter(notification_user=request.user, notification_read=False)
        return {
        'notification':notification,
    return Notification.objects.none()

base.html

 <script>
    $(document).ready(function() {
     $("#notificationLink").click(function() {
        var data = {
          "type": "notification_read",
          "username": username,
          "notification_id": notification_id,
        }
        socket.send(JSON.stringify(data));

        $("#notificationContainer").fadeToggle(300);
        $("#notification_id").fadeOut("slow");
        return false;
      });
...
var incomingMsg = $('.incoming_msg')

socket.onmessage = function(e) {
      console.log("message", e)
      var chatDataMsg = JSON.parse(e.data)
      incomingMsg.append('<li>' + chatDataMsg.message + ' from ' + chatDataMsg.username + '</li>')
    }

Answer 1

在"notification_id": notification_id之前，您应该定义notification_id，但在您的情况下，您需要通过循环执行，您可以尝试：

 $("#notificationLink").click(function() {

   $('span[id^="notification-"]').each(function(){
        var notification_id = $(this).attr('id').substring(13)
        var data = {
          "type": "notification_read",
          "username": username,
          "notification_id": notification_id,
        }
        socket.send(JSON.stringify(data));
    });

    $("#notificationContainer").fadeToggle(300);
    $("#notification_id").fadeOut("slow");
    return false;
  })

我希望在您的模板中，您已经有了如下内容：

var username = '{{ request.user.username }}'

根据后端上的当前代码，您不需要notification_id，因此可以简单地将其删除：

 $("#notificationLink").click(function() {
    var data = {
      "type": "notification_read",
      "username": username,
    }
    socket.send(JSON.stringify(data));

    $("#notificationContainer").fadeToggle(300);
    $("#notification_id").fadeOut("slow");
    return false;
  });