Estoy desarrollando una aplicación de matraz con función de chat. Cuando alguien envía un mensaje, se guarda en db. Ahora quiero mostrarlo en la pantalla con socketio, pero cuando alguien envía un mensaje, se muestra en todos los chats que se usan actualmente. ¿Alguien sabe cómo mostrar el mensaje solo en un chat correcto? Cada dos usuarios tienen su propio chat con ID o pueden crearlo enviando un mensaje.
código principal.py:
@app.route('/chat/<int:id>', methods=['GET', 'POST']) @login_required def chat(id): chat = Chats.query.get_or_404(id) form = MessageForm() messages = chat.messages chat_id = chat.id if current_user.id == chat.first_user or current_user.id == chat.second_user: if request.method == "POST": form1 = request.form.get("myMessage") chat_id = chat.id author = current_user.id message = Messages(author=author, chat=chat_id, content=form1) chat.last_message = datetime.utcnow() db.session.add(message) db.session.commit() return render_template('chat.html', chat=chat, messages=messages, form=form, chat_id = chat_id) else: return redirect(url_for('index')) @socketio.on('message') def handleMessage(msg): print('Message: ' + msg) send(msg, broadcast=True)chat.html código:
<script type="text/javascript"> $(document).ready(function() { var socket = io.connect('http://127.0.0.1:5000'); socket.on('connect', function() { socket.send('User has connected!'); }); socket.on('message', function(msg) { $("#messages").append('<li>'+msg+'</li>'); console.log('Received message'); }); $('#sendbutton').on('click', function() { socket.send($('#myMessage').val()); $('#myMessage').val(''); }); }); </script> <ul id="messages"></ul> <input type="text" id="myMessage"> <button id="sendbutton">Send</button>Estaba luchando con este problema. Usar el argumento 'to' en emit() funcionó para mí. Esto también funciona para la función enviar(). https://flask-socketio.readthedocs.io/en/latest/getting_started.html#:~:text=For%20many%20applications,the%20to%20argument .
Actualizar
Para mayor claridad, use las habitaciones de Flask-SocketIO y use el argumento "to" (consulte la documentación). Suponiendo que chat_id es la sala, intente:
charla.html
<script type="text/javascript"> $(document).ready(function() { var socket = io.connect('http://127.0.0.1:5000'); socket.on('connect', function() { socket.send('join_room', { name: "{{ user }}", room: "{{ chat_id }}" }) }); socket.on('receive_message', function(data) { $("#messages").append('<li>'+data.msg+'</li>'); console.log('Received message'); }); $('#sendbutton').on('click', function() { var msg = $('#myMessage').val(); socket.send('send_message', { msg: msg, room: "{{ chat_id }}" }) $('#myMessage').val(''); }); window.onbeforeunload = function(data) { socket.emit('leave_room', { name: "{{ user }}", room: "{{ chat_id }}" }) }; }); </script> <ul id="messages"></ul> <input type="text" id="myMessage"> <button id="sendbutton">Send</button>principal.py
@app.route('/chat/<int:id>', methods=['GET', 'POST']) @login_required def chat(id): chat = Chats.query.get_or_404(id) form = MessageForm() messages = chat.messages chat_id = chat.id user = current_user.id if current_user.id == chat.first_user or current_user.id == chat.second_user: if request.method == "POST": form1 = request.form.get("myMessage") chat_id = chat.id author = current_user.id message = Messages(author=author, chat=chat_id, content=form1) chat.last_message = datetime.utcnow() db.session.add(message) db.session.commit() return render_template('chat.html', chat=chat, messages=messages, form=form, chat_id = chat_id, user=user) else: return redirect(url_for('index')) @socketio.on('join_room') def handle_join_room_event(data): name = data['name'] room = data['room'] join_room(room) socketio.send(name + 'has connected!', to=room) @socketio.on('send_message') def sendMessage(data): room = data['room'] send('receive_message', data, to=room) @socketio.on('leave_room') def handle_join_room_event(data): name = data['name'] room = data['room'] leave_room(room) socketio.send(name + 'has disconnected', to=room)