【发布时间】：2020-10-28 06:24:31
【问题描述】：
我已经使用 django 实现了一个聊天框消息（实时聊天），现在我想添加 css，但是我在如何在发送的消息上附加多个类时遇到问题。例如，我想显示其他用户消息向左浮动，当前用户消息向右浮动。但是当我提交消息时仅显示在浮动右侧，因为我只将一个类附加到发送的消息中。我认为这是因为我只附加了 class="message-list me"，当我更改 class="message-list" 时，这会在左侧显示所有消息。如何让每条消息左右浮动？
这是我得到的： haha 应该向右浮动（flex-start），而 pepe 应该向左浮动（flex-end）。
警报（e.data）
我想要这样的东西：
consumers.py
class ChatConsumer(AsyncConsumer):
async def websocket_connect(self, event):
print('connected', event)
other_user = self.scope['url_route']['kwargs']['username']
me = self.scope['user']
thread_obj = await self.get_thread(me, other_user)
self.thread_obj = thread_obj
chat_room = f"thread_{thread_obj.id}"
self.chat_room = chat_room
await self.channel_layer.group_add(
chat_room,
self.channel_name
)
await self.send({
"type": "websocket.accept"
})
async def websocket_receive(self, event):
# when a message is recieved from the websocket
print("receive", event)
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 = 'default'
if user.is_authenticated:
username = user.username
myResponse = {
'message': msg,
'username': username
}
await self.create_chat_message(user, msg)
# broadcasts the message event to be sent, the group send layer
# triggers the chat_message function for all of the group (chat_room)
await self.channel_layer.group_send(
self.chat_room,
{
"type": "chat_message",
"text": json.dumps(myResponse)
}
)
# chat_method is a custom method name that we made
async def chat_message(self, event):
#sends the actual message
await self.send({
"type": "websocket.send",
"text": event['text']
})
async def websocket_disconnect(self, event):
# when the socket disconnects
print('disconnected', event)
@database_sync_to_async
def get_thread(self, user, other_username):
return Thread.objects.get_or_new(user, other_username)[0]
@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)
模板：
<div class="message-wrap" id='chat-items'>
{% for chat in object.chatmessage_set.all %}
<div class="message-list">
{% if request.user != chat.user %}
<div class="msg">
<p>
{{ chat.message }}
</p>
</div>
<div class="time">{{ chat.timestamp }}</div>
{% endif %}
</div>
<div class="message-list me">
{% if request.user == chat.user %}
<div class="msg">
<p>
{{ chat.message }}
</p>
</div>
<div class="time">{{ chat.timestamp }}</div>
{% endif %}
</div>
{% endfor %}
</div>
<h3>Thread for {% if user != object.first %}{{ object.first }}{% else %}{{ object.second }}{% endif %}</h3>
<ul id='chat-items'>
{% for chat in object.chatmessage_set.all %}
<li>{{ chat.message }} via {{ chat.user }}</li>
{% endfor %}
</ul>
<form id='form' method='POST'> {% csrf_token %}
<input type="hidden" id="myUsername" value="{{ user.username }}" />
{{form.as_p }}
<input type='submit' class='btn btn-primary'/>
</form>
CSS：
.message-wrap .message-list {
align-self: flex-start; #float start
max-width: 70%;
}
.message-wrap .message-list.me {
align-self: flex-end; #float at the end
}
.message-wrap .message-list.me .msg {
background: #bde2f7;
color: #111;
}
.message-wrap .message-list .msg {
background: #fff;
box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.1);
padding: 10px 5px;
margin-bottom: 10px;
border-radius: 5px;
}
JQuery:
<!-- Channels Reconnecting Websocket -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/reconnecting-websocket/1.0.0/reconnecting-websocket.js'></script>
<script>
// websocket scripts - client side*
var loc = window.location
var formData = $("#form")
var msgInput = $("#id_message")
var chatHolder = $('#chat-items')
var me = $('#myUsername').val()
var wsStart = 'ws://'
if (loc.protocol == 'https:') {
wsStart = 'wss://'
}
var endpoint = wsStart + loc.host + loc.pathname
var socket = new ReconnectingWebSocket(endpoint)
// below is the message I am receiving
socket.onmessage = function(e) {
console.log("message", e)
var chatDataMsg = JSON.parse(e.data)
chatHolder.append("<div class='message-list me'>" + "<div class='msg'>" + "<p>" + chatDataMsg.message + "</p>" + "</div>" + "</div>")
}
// below is the message I am sending
socket.onopen = function(e) {
console.log("open", e)
formData.submit(function(event){
event.preventDefault()
var msgText = msgInput.val()
//chatHolder.append("<li>" + msgText + " via " + me + "</li>")
var finalData = {
'message': msgText
}
socket.send(JSON.stringify(finalData))
formData[0].reset()
})
}
socket.onerror = function(e) {
console.log("error", e)
}
socket.onclose = function(e) {
console.log("close", e)
}
</script>
【问题讨论】：
-
在您的后端代码中，您如何确定它应该在哪一侧？
-
使用 JQuery addClass api.jquery.com/addClass 您应该能够向元素添加尽可能多的 CSS 类。只需将它们用空格分隔即可。
-
@Hawkins... 我希望当前用户消息向右浮动，而其他用户消息向左浮动。根据我的代码，所有消息（当前用户和其他用户）都向右浮动，但是当我刷新页面时，消息正确浮动，因为它是从 css 读取的。我认为这是因为我只将消息附加到 class="message-list me" （我是当前用户）
-
@casenosensitive... 我也尝试了一段时间，但我什么也没得到，也许我做错了。我的 jquery 不太好，你可以通过用我的问题编写 jquery 来帮助我。
-
e.data里面有什么？您可以在您的问题中添加它吗？它是否同时包含来自me和other user的消息？
标签： javascript python jquery django django-channels