I made a page with a websocket using Flask-socketio worked on joining and disconnecting rooms, and one of the important ones is the chat. it works, but not as it should, messages are shown only after the page is refreshed, although they should appear as they arrive
here is an excerpt of the code that is responsible for this processing
@app.route("/room/<nameRoom>", methods=['GET', 'POST'])
@login_required
def join_room(nameRoom): # room page
session["room"] = nameRoom
if nameRoom in rooms:
url = rooms[nameRoom]['url']
return render_template('roomyutube.html', id=get_video_id(url), messages=rooms[nameRoom]["messages"])
else:
error = 'not_room'
return render_template('error.html', error=error)
@socketio.on("connect")
def connect(auth):
room = session.get("room")
name = User.query.filter_by(id=current_user.get_id()).first().username
if not room or not name:
return 404
if room not in rooms:
leave_room(room)
return
join_room(room)
send({"name": name, "message": "has entered the room"}, to=room)
rooms[room]['members'].append(User.query.filter_by(id=current_user.get_id()).first().username)
print(rooms[room])
print(f"{name} joined room {room}")
@socketio.on("disconnect")
def disconnect():
room = session.get("room")
name = User.query.filter_by(id=current_user.get_id()).first().username
leave_room(room)
if room in rooms:
rooms[room]['members'].remove(name)
if len(rooms[room]["members"]) <= 0:
del rooms[room]
send({"name": name, "message": "has left the room"}, to=room)
print(rooms[room])
print(f"{name} has left the room {room}")
@socketio.on("message")
def message(data):
room = session.get("room")
name = User.query.filter_by(id=current_user.get_id()).first().username
if room not in rooms:
return
content = {
"name": name,
"message": data["data"]
}
send(content, to=room)
rooms[room]["messages"].append(content)
print(f"{name} said: {data['data']}")
if __name__ == '__main__':
socketio.run(app, debug=True, allow_unsafe_werkzeug=True)
The code of the page with js
<body>
<div id="video-container">
<iframe width="800" height="450"
src="https://www.youtube.com/embed/{{ id }}" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</div>
<div class="chat-input" id="messages"></div>
<input id="message" name="message" type="text" placeholder="Введите сообщение" class="text-light"/>
<button type="button" name="send" id="send-btn" onClick="sendMessage()">
--->
</button>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"
integrity="sha512-q/dWJ3kcmjBLU4Qc47E4A9kTB4m3wuTY7vkFJDTZKjTs8jhyGQnaUrxa0Ytd0ssMZhbNua9hE+E7Qv1j+DyZwA=="
crossorigin="anonymous"
></script>
<script type="text/javascript">
var socketio = io();
const messages = document.getElementById("messages");
const createMessage = (name, msg) => {
const content = `
<div class="text">
<span>
<strong>${name}</strong>: ${msg}
</span>
</div>
`;
messages.innerHTML += content;
};
socketio.on("message", (data) => {
createMessage(data.name, data.message);
});
const sendMessage = () => {
const message = document.getElementById("message");
if (message.value == "") return;
socketio.emit("message", { data: message.value });
message.value = "";
};
</script>
{% for msg in messages %}
<script type="text/javascript">
createMessage("{{msg.name}}", "{{msg.message}}");
</script>
{% endfor %}
</body>