提问人:Thành Nguyễn Đăng Phúc 提问时间:11/12/2023 更新时间:11/12/2023 访问量:12
如何使用 Pusher Channel 为每个聊天创建频道
How do I make the channels for each chats using Pusher Channel
问:
所以基本上我正在使用 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']
答: 暂无答案
评论