Python中文网 - 问答频道, 解决您学习工作中的Python难题和Bug
Python常见问题
我在django项目中使用web套接字（通道）
首先，当页面重新加载时，一切正常，但当我想与另一个用户聊天时，我会单击“其他用户”（运行位于app.js中的javascript的runChatUser函数）
之后，消息将通过web套接字发送并接收web套接字，但在app.js chatSocket中效果良好。在消息操作控制台中。日志（数据）不会出现在javascript控制台中
因此，我没有将消息html添加到对话中
app.js
var roomName = JSON.parse(document.getElementById('room-name').textContent);
var conversation=document.getElementById("conversation");
var sendButton = document.getElementById("sendMessage");
var inputField = document.getElementById("message-input-chat");
var chatSocket = "";
function webSocketConnect(roomName){
// var roomName = document.getElementById('room-name').textContent;
chatSocket = new WebSocket(
'ws://'
+ window.location.host
+ '/ws/chat/'
+ roomName
+ '/'
)
inputField.focus();
};
//roomName is changing when the user click other user to chat
window.onload=webSocketConnect(roomName);
chatSocket.onmessage = function(e) {
inputField.focus();
var data = JSON.parse(e.data);
console.log(data);
var message=`<li class="media sent">
<div class="media-body">
<div class="msg-box">
<div>
<p>${data.message}</p>
<ul class="chat-msg-info">
<li>
<div class="chat-time">
<span>8:30 AM</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</li>`
conversation.innerHTML+=message
};
chatSocket.onclose=function(e){
console.error("Socket closed");
};
inputField.focus();
inputField.onkeyup = function(e) {
if (e.keyCode === 13) { // enter, return
sendButton.click();
}
};
sendButton.onclick = function(e) {
var message = inputField.value;
chatSocket.send(JSON.stringify({
'message': message
}));
inputField.value = '';
};
//It is calling when user click other user to chat
function runChatUser(id){
document.getElementById('room-name').textContent=id;
roomName = id;
// chatSocket.close();
webSocketConnect(id);
// chatSocket.disconnect;
$.ajax({
type : "GET",
url : "get_user/"+id,
dataType: 'JSON',
data : {
},
//changing chat header
success : function(data) {
console.log(data)
messages=data.messages;
$("#chat-header-part").html(`<a id="back_user_list" href="javascript:void(0)" class="back-user-list">
<i class="material-icons">chevron_left</i>
</a>
<div class="media">
<div class="media-img-wrap">
<div class="avatar avatar-online">
<img src="${data.image}" alt="User Image" class="avatar-img rounded-circle">
</div>
</div>
<div class="media-body">
<div class="user-name">${data.second_user_name}</div>
<div class="user-status">online</div>
</div>
</div>
<div class="chat-options">
<a href="javascript:void(0)" data-toggle="modal" data-target="#voice_call">
<i class="material-icons">local_phone</i>
</a>
<a href="javascript:void(0)" data-toggle="modal" data-target="#video_call">
<i class="material-icons">videocam</i>
</a>
<a href="javascript:void(0)">
<i class="material-icons">more_vert</i>
</a>
</div>`)
}
});
}
消费者.py
# chat/consumers.py
import json
from asgiref.sync import async_to_sync
from channels.generic.websocket import WebsocketConsumer
from chat.models import Message
class ChatConsumer(WebsocketConsumer):
def connect(self):
self.room_name = self.scope['url_route']['kwargs']['room_name']
self.room_group_name = 'chat_%s' % self.room_name
print("web socket connected ")
# Join room group
async_to_sync(self.channel_layer.group_add)(
self.room_group_name,
self.channel_name
)
self.accept()
def disconnect(self, close_code):
print("web socket closed")
# Leave room group
async_to_sync(self.channel_layer.group_discard)(
self.room_group_name,
self.channel_name
)
# Receive message from WebSocket
def receive(self, text_data):
text_data_json = json.loads(text_data)
message = text_data_json['message']
# Send message to room group
async_to_sync(self.channel_layer.group_send)(
self.room_group_name,
{
'type': 'chat_message',
'message': message,
}
)
# Receive message from room group
def chat_message(self, event):
message = event['message']
# Send message to WebSocket
self.send(text_data=json.dumps({
'message': message,
}))
routing.py
# chat/routing.py
from django.urls import re_path
from . import consumers
websocket_urlpatterns = [
re_path(r'ws/chat/(?P<room_name>[^/]+)/$', consumers.ChatConsumer.as_asgi()),
]
views.py
def get_user(request,room_id):
if request.method=='GET' and request.is_ajax():
room=get_object_or_404(Room,id=room_id)
if request.user == room.first_user:
second_user=room.second_user
else:
second_user=room.first_user
data ={
"second_user_name":second_user.get_full_name(),
"image":second_user.image.url,
"messages":list(Message.objects.filter(room_id=room_id).all().values()),
}
return JsonResponse(data,safe=True)
return JsonResponse({'status':'Fail', 'msg': 'Object does not exist'})
index.html
{% extends 'base.html' %}
{% load static %}
{% block body_class %}chat-page{% endblock %}
{% block content %}
{{ room_name|json_script:"room-name" }}
<!-- Page Content -->
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-xl-12">
<div class="chat-window">
<!-- Chat Left -->
<div class="chat-cont-left">
<div class="chat-header">
<span>Chats</span>
<a href="javascript:void(0)" class="chat-compose">
<i class="material-icons">control_point</i>
</a>
</div>
<form class="chat-search">
<div class="input-group">
<div class="input-group-prepend">
<i class="fas fa-search"></i>
</div>
<input type="text" class="form-control" placeholder="Search">
</div>
</form>
<div class="chat-users-list" style="height: 112%;">
<div class="chat-scroll" >
{% for room in rooms %}
<a class="media
{% if forloop.counter0 == 0 %}
read-chat active
{% endif %}
" href="javascript:void(0)" data-url="{% url 'startChat' room.second_user.slug %}" id="{{room.second_user.slug}}" onclick="runChatUser('{{ room.id }}');" >
<div class="media-img-wrap">
<div class="avatar avatar-away">
<img src="{{room.second_user.image.url}}" alt="User Image" class="avatar-img rounded-circle">
</div>
</div>
<div class="media-body">
<div>
<div class="user-name">
{% if request.user.is_doctor %}
{{room.second_user.get_full_name}}
{% else %}
{{room.first_user.get_full_name}}
{% endif %}
</div>
<div class="user-last-chat">Hey, How are you?</div>
</div>
<div>
<div class="last-chat-time block">2 min</div>
<div class="badge badge-success badge-pill">15</div>
</div>
</div>
</a>
{% endfor %}
<!--
</div>
</div>
</div>
<!-- /Chat Left -->
<!-- Chat Right -->
<div class="chat-cont-right">
<div class="chat-header" id="chat-header-part">
<!-- this part adding by ajax-->
</div>
<div class="chat-body" style="height: 78%;">
<div class="chat-scroll">
<ul class="list-unstyled" id="conversation">
<!-- this part adding by websocket and ajax-->
</ul>
</div>
</div>
<div class="chat-footer" >
<div class="input-group">
<div class="input-group-prepend">
<div class="btn-file btn">
<i class="fa fa-paperclip"></i>
<input type="file">
</div>
</div>
<input type="text" class="input-msg-send form-control" placeholder="Type something" id="message-input-chat">
<div class="input-group-append">
<button type="button" id="sendMessage" class="btn msg-send-btn"><i class="fab fa-telegram-plane"></i></button>
</div>
</div>
</div>
</div>
<!-- /Chat Right -->
</div>
</div>
</div>
<!-- /Row -->
</div>
</div>
<!-- /Page Content -->
{% endblock content %}
热门问题
- 当用户用PYTHON设置一个或一个不带值的URL时，他们怎么能输入一个/a的代码呢？
- 当用户登录到站点时，如何显示不同的导航栏
- 当用户登录时，在Flask中向用户显示处理结果
- 当用户的Flask会话结束时，我如何从Redis后端中移除所有Celery结果？
- 当用户的Okta配置文件字段当前为blan时，更新该字段
- 当用户的付款逾期2天时，从Django模型检索数据
- 当用户的消息以问号结尾时，如何让机器人说些什么？
- 当用户的系统上可能也安装了Python 2.7时，如何在用户的系统上运行Python 3脚本？
- 当用户确定打印数量时，使用Matplotlib打印动画
- 当用户离开时是否可以删除整个网页？
- 当用户给出一个单词时如何打印？
- 当用户继续更改TKin中的值（使用trace方法）时，使用Entry并更新输入的条目
- 当用户编辑表单字段时，从Django时间字段中删除秒数
- 当用户被更改时，消息不会来自web套接字
- 当用户访问表单时，如何使表单为只读，而不具有更改权限
- 当用户试图更改对象的值时，使用描述符类引发RuntimeError
- 当用户调整GUI的大小时，是否有方法更改GUI内容的大小？
- 当用户调整风的大小时，pythontkinter小部件的大小会不均匀
- 当用户购买某个类别时，是否查找其他类别的销售？
- 当用户转到上一页时，Django和芹菜插入操作
热门文章
- Python覆盖写入文件
- 怎样创建一个 Python 列表？
- Python3 List append()方法使用
- 派森语言
- Python List pop()方法
- Python Django Web典型模块开发实战
- Python input() 函数
- Python3 列表(list) clear()方法
- Python游戏编程入门
- 如何创建一个空的set?
- python如何定义(创建)一个字符串
- Python标准库 [The Python Standard Library by Ex
- Python网络数据爬取及分析从入门到精通（分析篇）
- Python3 for 循环语句
- Python List insert() 方法
- Python 字典(Dictionary) update()方法
- Python编程无师自通 专业程序员的养成
- Python3 List count()方法
- Python 网络爬虫实战 [Web Crawler With Python]
- Python Cookbook（第2版）中文版
目前没有回答
相关问题 更多 >
编程相关推荐