所以，基本上我有这个 python chat flask 应用程序，我正处于项目的最后阶段并且遇到了问题。由于某种原因，套接字消息与数据库消息不一致。
我的意思是：https://imgur.com/a/vPU2mua
非内联消息是套接字消息，内联消息是 HTML。
有谁知道我该如何解决这个问题？
<html>
<head>
<title>Chat Room</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="/static/css/styles.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js" integrity="sha512-pumBsjNRGGqkPzKHndZMaAG+bir374sORyzM3uulLV14lN5LyykqNk8eEeUlUkB3U0M4FApyaHraT65ihJhDpQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.6.1/socket.io.js"></script>
<style>
.message-container {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.message-container .username {
font-weight: bold;
margin-right: 10px;
}
.message-container .message-text {
font-style: italic;
}
.row:last-child {
position: relative;
z-index: 1;
}
#messages {
position: relative;
z-index: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8">
{% for username, message in messages %}
<div class="message">
<div class="message-row">
<span class="message-text">{{ message }}</span>
</div>
</div>
{% endfor %}
<ul id="messages"></ul>
<div class="input-group">
<input type="text" id="myMessage" class="form-control">
<button class="btn btn-primary" id="sendbutton">Send</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
var socket = io.connect('http://127.0.0.1:3000');
socket.on('message', function(msg) {
var message = '<div class="message">';
message += '<div class="message-row">';
message += '<span class="message-text">' + msg + '</span>';
message += '</div></div>';
$("#messages").append(message);
});
$('#sendbutton').on('click', function() {
socket.send('{{ username1 }}: ' + $('#myMessage').val());
$('#myMessage').val('');
});
});
</script>
</body>
</html>
CSS：
body {
background-color: #2b2b2b !important;
color: white !important ;
}
.username {
position: relative;
bottom: -25pc;
left: 45pc;
width: 500px;
height: 50px;
}
.password {
position: relative;
bottom: -30pc;
left: 13.6pc;
width: 500px;
height: 50px;
}
.submit {
position: relative;
bottom: -34pc;
left: -4pc
}
#myMessage {
position: fixed;
width: 1000;
height: 30px;
border-radius: 1pc;
bottom: 0pc;
}
input[type="text"] {
background-color: #f2f2f2;
border-radius: 5px;
padding: 10px;
border: none;
}
#sendbutton {
position: fixed;
left: 83pc;
bottom: 0pc;
border-radius: 2pc;
}
.message {
margin-bottom: 10px;
}
.message-text {
display: inline-block;
padding: 5px;
border-radius: 5px;
background-color: #f2f2f2;
color: black;
}
.username {
font-weight: bold;
margin-right: 5px;
}
.message-row {
display: flex;
align-items: center;
}
.message-row .message-text {
margin-left: 10px;
}
.message-row:nth-child(even) .message-text {
background-color: #e6e6e6;
}