如何使用 Pusher Channel 为每个聊天创建频道

How do I make the channels for each chats using Pusher Channel

提问人:Thành Nguyễn Đăng Phúc 提问时间:11/12/2023 更新时间:11/12/2023 访问量:12

问:

所以基本上我正在使用 Django 制作一个社交媒体网站,我也在我的网站上构建了一个聊天消息,所以我查看了 YouTube 并按照教程制作了实时聊天消息,我还使用 Pusher WebSocket 来保存要发送的消息,但我遇到的问题是,当我用我点击的那个发送消息时, 该消息也会显示给其他用户帐户,但它实际上并不存在,因为当其他用户重新加载页面时,我发送给与我聊天的用户的消息会消失。成功的部分是,即使我重新加载页面,该消息也会永远显示在我与我发送消息的人的聊天中。我花了将近一个星期的时间来弄清楚,但我想到的任何想法都不起作用。

所以这些是我的实时消息代码

这是我的观点。PY 文件

@login_required(login_url='login')
def chat_room(request):
    uid = request.user.id
    user = Profiles.objects.get(id = uid)
    follows = user.follows.all()
    context = {'user':user,
               'follows':follows}
    return render(request,"chat_room.html",context)



@login_required(login_url='login')
def chat_details(request,id):
    uid = request.user.id
    user = Profiles.objects.get(id = uid)
    follows = user.follows.get(id=id)
    form = ChatMessageForm()
    chats = ChatMessage.objects.all()
    receive_chats = ChatMessage.objects.filter(msg_sender=follows,msg_receiver=user,seen=False)
    receive_chats.update(seen=True)
    if request.method == "POST":
        form = ChatMessageForm(request.POST)

        if form.is_valid():
            chat_message = form.save(commit=False)
            chat_message.msg_sender = user
            chat_message.msg_receiver = follows
            chat_message.save()
            return redirect('chat_details',id =follows.id)

    context = {'follows':follows,
               'form':form,
               'user':user,
               'chats':chats,}
    return render(request,"chat_details.html",context)


@login_required(login_url='login')
def sent_messages(request,id):
    uid = request.user.id
    user = Profiles.objects.get(id = uid)
    follows = user.follows.get(id=id)
    data = json.loads(request.body)
    new_chat = data["msg"]
    new_chat_message = ChatMessage.objects.create(body = new_chat,msg_sender = user,msg_receiver = follows,seen = False)
    pusher_client = Pusher(
        app_id = "", # I need to hide it for private
        key = "",
        secret = "",
        cluster = "",
        ssl=True)
    pusher_client.trigger('my-channel', 'my-event', {'msg': new_chat_message.body})
    return JsonResponse(new_chat_message.body,safe=False)

@login_required(login_url='login')
def chat_notification(request):
    uid = request.user.id
    user = Profiles.objects.get(id = uid)
    follows = user.follows.all()
    arr = []
    for follow in follows:
        chats = ChatMessage.objects.filter(msg_sender_id=follow,msg_receiver=user,seen = False)
        arr.append(chats.count())
    return JsonResponse(arr,safe=False)

这是我的CHAT_DETAILS.HTML文件

{% extends 'base.html' %}

{% block content %}
<div>
    <h3>{{follows.username}}</h3>
</div>
    <div id="chat-body">
        {% for chat in chats%}
            {% if chat.msg_sender == user and chat.msg_receiver == follows %}
                <div class="chat-box-sent">
                    {{chat}}
                </div>
            {% elif chat.msg_sender == follows and chat.msg_receiver == user %}
                <div class="chat-box-received">
                    {{chat}}
                </div>
            {% endif %}
        {% endfor %}
    </div>
    <form action="" method="POST" id="myform" >
        {% csrf_token %}
        {{form.body}}
        <button type="submit" id="submit">  
            Send
        </button>
    </form>
    <script>
        function getCookie(name) {
            let cookieValue = null;
            if (document.cookie && document.cookie !== '') {
                const cookies = document.cookie.split(';');
                for (let i = 0; i < cookies.length; i++) {
                    const cookie = cookies[i].trim();
                    if (cookie.substring(0, name.length + 1) === (name + '=')) {
                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                        break;
                    }
                }
            }
            return cookieValue;
        }
        const pusher = new Pusher('My_Pusher_Key', {
            cluster: 'ap1',
        });

        let form = document.getElementById("myform")
        form.addEventListener("submit", sendChat)
        const chatChannel = pusher.subscribe('my-channel');
        const csrftoken = getCookie('csrftoken');

        chatChannel.bind('my-event', function(data) {
            const newChatMessage = data.msg;
            const chatMessageBox = document.createElement("div");
            chatMessageBox.classList.add("chat-box-received");
            chatMessageBox.innerText = newChatMessage;
            document.getElementById("chat-body").append(chatMessageBox);
        });

        function sendChat(event) {
            event.preventDefault();
            const chatMessage = document.getElementById("id_body").value;

            const data = {
                msg: chatMessage
            };

            fetch("{% url 'sent_messages' follows.id %}", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "X-CSRFToken": csrftoken
                },
                body: JSON.stringify(data)
            })
            .then(response => response.json())
            .then(data => {
                console.log("Success:", data);
                document.getElementById("id_body").value = "";
            })
            .catch(error => {
                console.error("Error:", error);
            });
        }

    </script>
{% endblock content %}

这是我的URL。PY 文件

urlpatterns = [
    path('admin/', admin.site.urls),
    path('',views.home),
    path('chat_room/',views.chat_room,name="chat_room"),
    path('chat_room/chat_details/<int:id>',views.chat_details,name="chat_details"),
    path('sent_messages/<int:id>',views.sent_messages,name="sent_messages"),
    path('chat_notification/',views.chat_notification,name="chat_notification"),
    # path('pusher/auth', views.pusher_authentication),
]

这是我的模型。PY 文件

class Profiles(AbstractUser):
    first_name = models.CharField(max_length=200, blank= False)
    last_name =  models.CharField(max_length=200, blank= False)
    follows= models.ManyToManyField("self", related_name="followed_by", symmetrical=False, blank=True)
    bio = models.TextField(default="No bio yet", max_length=300)
    email = models.EmailField(max_length=200)
    avatar = models.ImageField(default="avatar.svg")

    REQUIRED_FIELDS = []

class ChatMessage(models.Model):
    body = models.TextField()
    msg_sender = models.ForeignKey(Profiles,on_delete=models.CASCADE,related_name="msg_sender")
    msg_receiver = models.ForeignKey(Profiles,on_delete=models.CASCADE,related_name="msg_receiver")
    seen = models.BooleanField(default=False)

    def __str__(self):
        return self.body

我的表格。PY 文件

class ChatMessageForm(forms.ModelForm):
    body = forms.CharField(widget=forms.TextInput(attrs={'width':'300px','placeholder':'Type message here...'}))
    class Meta:
        model = ChatMessage
        fields = ['body']
Django Chat 实时 推送器

评论


答: 暂无答案