為什么消費者.py中的事件處理程序function被多次調用，然后web-socket連接被強制終止？

Question

我使用 web-socket 創建了一個實時通知程序，使用 Django-Channels 實現。 每當任何用戶喜歡作者的帖子時，它都會向“帖子作者”發送實時通知。

問題是，對於單次點擊按鈕，多個通知被保存在數據庫中。 這是因為在consumer.py中定義的 function (like_notif())在發生“like button click”事件時將通知數據保存到數據庫被多次調用（當它應該只被調用一次時），直到 web-socket斷開連接。

在接下來的幾行中，我將詳細介紹幕后實際發生的事情（據我所知）。

1. 點贊按鈕被點擊。
   

<a class="like-btn" id="like-btn-{{ post.pk }}" data-likes="{{ post.likes.count }}" href="{% url 'like_toggle' post.slug %}">
    Like
</a>

2. JavaScript 阻止默認操作並生成對 URL 的 AJAX 調用。

$('.like-btn').click(function (event) {
   event.preventDefault();
   var this_ = $(this);
   var url = this_.attr('href');
   var likesCount = parseInt(this_.attr('data-likes')) || 0;

   $.ajax({
       url: url,
       method: "GET",
       data: {},
       success: function (json) {
          // DOM is manipulated accordingly.
       },
       error: function (json) {
           // Error.
       }
   });
});

3. URL 映射到 views.py 中定義的 function。 （注：郵政編碼Model在最后，如需參考。）

# In urls.py

urlpatterns = [
    path('<slug:slug>/like/', views.post_like_toggle, name="like_toggle"),
]

# In views.py

@login_required
def post_like_toggle(request, slug):
    """
        Function to like/unlike posts using AJAX.
    """
    post = Post.objects.get(slug=slug)
    user = request.user

    if user in post.likes.all():
        # Like removed 
        post.likes.remove(user)
    else:
        # Like Added
        post.likes.add(user)
        user_profile = get_object_or_404(UserProfile, user=user)

        # If Post author is not same as user liking the post
        if str(user_profile.user) != str(post.author):

            # Sending notification to post author is the post is liked.
            channel_layer = get_channel_layer()

            text_dict = {
                # Contains some data in JSON format to be sent.
            }

            async_to_sync(channel_layer.group_send)(
                "like_notif", {
                    "type": "notif_like",
                    "text": json.dumps(text_dict),
                }
            )

    response_data = {
        # Data sent to AJAX success/error function.
    }

    return JsonResponse(response_data)

4. 在 consumer.py 中創建了 Consumer 來處理這個問題。

# In consumers.py

class LikeNotificationConsumer(AsyncConsumer):

    async def websocket_connect(self, event):
        print("connect", event)
        await self.channel_layer.group_add("like_notif", self.channel_name)
        await self.send({
            "type": "websocket.accept",
        })

    async def websocket_receive(self, event):
        print("receive", event)

    async def websocket_disconnect(self, event):
        print("disconnect", event)
        await self.channel_layer.group_discard("like_notif", self.channel_name)

    async def notif_like(self, event):
        print("like_notif_send", event)

        await self.send({
            "type": "websocket.send",
            "text": event.get('text')
        })

        json_dict = json.loads(event.get('text'))

        recipient_username = json_dict.get('recipient_username')
        recipient = await self.get_user(recipient_username)

        sender_username = json_dict.get('sender_username')
        sender = await self.get_user(sender_username)

        post_pk = json_dict.get('post_pk', None)
        post = await self.get_post(post_pk)

        verb = json_dict.get('verb')
        description = json_dict.get('description', None)
        data_dict = json_dict.get('data', None)
        data = json.dumps(data_dict)

        await self.create_notif(recipient, sender, verb, post, description, data)

    @database_sync_to_async
    def get_user(self, username_):
        return User.objects.get(username=username_)

    @database_sync_to_async
    def get_post(self, pk_):
        return Post.objects.get(pk=pk_)

    @database_sync_to_async
    def create_notif(self, recipient, sender, verb, post=None, description=None, data=None, *args, **kwargs):
        return Notification.objects.create(recipient=recipient, sender=sender,  post=post, verb=verb, description=description,  data=data)

注意： notif_like() function 被多次調用，因此數據被多次保存在數據庫中。 為什么這個 function 被多次調用？

5. JavaScript 代碼（寫在 HTML 文件中）處理 websocket 連接。 我使用了重新連接 Websockets 。

<script type="text/javascript">

    var loc = window.location
    var wsStart = 'ws://' 
    if(loc.protocol == 'https:') {
        wsStart = 'wss://' 
    }
    var endpoint = wsStart + loc.host + "/like_notification/"
    var likeSocket = new ReconnectingWebSocket(endpoint)

    likeSocket.onmessage = function (e) {
        console.log("message LikeNotificationConsumer", e)
        var data_dict = JSON.parse(e.data)

        /*
            DOM manipulation using data from data_dict.
            NOTE: All the intended data is coming through perfectly fine.
        */

    };

    likeSocket.onopen = function (e) {
        console.log("opened LikeNotificationConsumer", e)
    }

    likeSocket.onerror = function (e) {
        console.log("error LikeNotificationConsumer", e)
    }

    likeSocket.onclose = function (e) {
        console.log("close LikeNotificationConsumer", e)
    }
</script>

6. 貼 model供參考

# In models.py

class Post(models.Model):

    title = models.CharField(max_length=255, blank=False, null=True, verbose_name='Post Title')
    post_content = RichTextUploadingField(blank=False, null=True, verbose_name='Post Content')
    author = models.ForeignKey(
        User,
        on_delete=models.CASCADE,
        default=None,
        blank=True,
        null=True
    )
    likes = models.ManyToManyField(User, blank=True, related_name='post_likes')
    published = models.DateTimeField(default=datetime.now, blank=True)
    tags = models.ManyToManyField(Tags, verbose_name='Post Tags', blank=True, default=None)
    slug = models.SlugField(default='', blank=True)

    def save(self, *args, **kwargs):
        self.slug = slugify(self.title + str(self.pk))
        super(Post, self).save()

    def get_like_url(self):
        return reverse("like_toggle", (), {'slug', self.slug})

    def __str__(self):
        return '%s' % self.title

7. 通知 model供參考

# In models.py

class Notification(models.Model):

    recipient = models.ForeignKey(User, blank=False, on_delete=models.CASCADE, related_name="Recipient",)
    sender = models.ForeignKey(
        User,
        blank=False,
        on_delete=models.CASCADE,
        related_name="Sender"
    )

    # Post (If notification is attached to some post)
    post = models.ForeignKey(
        Post,
        blank=True,
        default=None,
        on_delete=models.CASCADE, 
        related_name="Post",
    )
    verb = models.CharField(max_length=255)
    description = models.TextField(blank=True, null=True)
    data = models.TextField(blank=True, null=True)
    timestamp = models.DateTimeField(default=timezone.now)
    unread = models.BooleanField(default=True, blank=False, db_index=True)

    def __str__(self):
        return self.verb

8. 通道層設置。

# In settings.py

CHANNEL_LAYERS = {
    "default": {
        "BACKEND": "channels_redis.core.RedisChannelLayer", 
        "CONFIG": {
            "hosts": [("localhost", 6379)]
        }
    }
}

我希望每次單擊like按鈕時只保存一次通知，但它會被保存多次，因為在consumers.py中定義的notif_like() function每次點擊都會被多次調用。

此外，在此之后，web-socket 會突然斷開連接，並在終端中顯示以下警告 -

Application instance <Task pending coro=<SessionMiddlewareInstance.__call__() running at /home/pirateksh/DjangoProjects/ccwebsite/ccenv/lib/python3.7/site-packages/channels/sessions.py:183> wait_for=<Future pending cb=[<TaskWakeupMethWrapper object at 0x7fb7603af1c8>()]>> for connection <WebSocketProtocol client=['127.0.0.1', 52114] path=b'/like_notification/'> took too long to shut down and was killed.

我已經為此苦苦掙扎了很長一段時間，所以如果有人能指導我完成這件事，那將非常有幫助。

Answer 1

將近一年后，我從事了一個非常相似的項目，我能夠重現此錯誤，並找出導致此錯誤的原因。

我很確定這是由ReconnectingWebSocket引起的。

原因是當我切換回使用香草 WebSocket 時，一切正常。

我還在 ReconnectingWebSocket 的 Github存儲庫上打開了一個關於此的 問題。