БЛОГ НА HUSL


Проблема с flask-scoketio. Соединение закрывается еще до подключения

Автор вопроса: Defolz

Мучаюсь второй день с настройкой socketio. Вот мои ошибки, ниже я вам предоставлю весь мой код который задействуется и иерархию файлов, я буду очень рад вашей помощи.

websocket.js:43 WebSocket connection to 'ws://85.209.9.38:5000/socket.io/?EIO=4&transport=websocket&sid=LszOolGznDhXIbIJAAA-' failed: socket.io/:1

иерархия

Failed to load resource: the server responded with a status of 400 (BAD REQUEST)

chat.py

#Импорты

import sqlite3
import os
import logging
from flask import Flask, request, jsonify, g, Blueprint
from flask_socketio import emit
from flask_socketio import join_room
from flask_socketio import SocketIO
from flask_cors import CORS


chat_app = Blueprint('chat',__name__)
CORS(chat_app)
socketio = SocketIO(cors_allowed_origins="*")
# Функция для установки соединения с базой данных
def get_db():
    if 'db' not in g:
        g.db = {}
        g.db['chats'] = sqlite3.connect('chats.db')
        g.db['users'] = sqlite3.connect('users.db')
    return g.db

# Проверка существования пользователя по его имени
def user_exists(username, db):
cursor = db.cursor()
cursor.execute("SELECT id FROM users WHERE username = ?", (username,))
result = cursor.fetchone()
return result is not None

# API для отправки сообщений
@chat_app.route('/send_message', methods=['POST'])
def send_message():
    data = request.get_json()
    chat_id = data['chat_id']
    sender = data['sender']
    message = data['message']

    db = get_db()
    chats_db = db['chats']
    cursor = chats_db.cursor()
    if user_exists(sender, db['users']):
        # Валидация и сохранение сообщения в базе данных
        cursor.execute("INSERT INTO messages (chat_id, sender_username, message_text) VALUES (?, ?, ?)", (chat_id, sender, message))
    chats_db.commit()
    
    # Отправляем сообщение через Socket.io
    socketio.emit('receive_message', {
        'chat_id': chat_id,
        'sender': sender,
        'message': message
    }, room=chat_id)
    return jsonify({'status': 'Message sent successfully'})
else:
    return jsonify({'error': 'Invalid sender or receiver'})

# API для получения сообщений
@chat_app.route('/get_chat_messages/<int:chat_id>', methods=['GET'])
def get_chat_messages(chat_id):
    db = get_db()
    cursor = db['chats'].cursor()

    cursor.execute("SELECT sender_username, message_text, timestamp FROM messages WHERE chat_id = ? ORDER BY timestamp", (chat_id,))
    messages = cursor.fetchall()

    return jsonify({'messages': messages})

# Обработчик Socket.io для присоединения к чату
@socketio.on('join_chat')
def join_chat(data):
    chat_id = data['chat_id']
    join_room(chat_id)

init.py

from flask import Flask
from .chat import chat_app
from .auth import auth_app
from .user_chats import user_chats_app
from flask_cors import CORS
from flask_socketio import SocketIO
import os

app = Flask(__name__)
CORS(app)
secret_key = os.urandom(24)
app.config['SECRET_KEY'] = secret_key
socketio = SocketIO(app,cors_allowed_origins="*",logger=True, engineio_logger=True)


# Регистрируем два приложения (chat и auth) в сервере
app.register_blueprint(chat_app)
app.register_blueprint(auth_app)
app.register_blueprint(user_chats_app)

run.py

from app import app, socketio

if __name__ == '__main__':
    socketio.run(app, debug=True)



# Обработчик Socket.io для отправки сообщений
@socketio.on('send_message')
def handle_message(data):
    sender = data['sender']
    chat_id = data['chat_id']
    message = data['message']
    emit('receive_message', {'chat_id': chat_id, 'sender': sender, 'message': message}, 
    room=chat_id)


const socket = io("http://85.209.9.38:5000");
new Vue({
  el: '#chat',
  data: {
    message: '',
    currentUser: localStorage.getItem('username'),
    chatId: localStorage.getItem('chat_id'),
    messages: [],
  },
  methods: {
    sendMessage() {
      if (this.chatId && this.message) {
        socket.emit('send_message', {
          sender: this.currentUser,
          chat_id: this.chatId,
          message: this.message,
        });
        this.message = '';
      }
    },
  },
  created() {
    // Пример обработчика события при установке соединения
    socket.on('connect', () => {
      alert('WebSocket connected');
    });

    if (this.chatId) {
      socket.emit('join_chat', { chat_id: this.chatId });
    }

    

    socket.on('receive_message', (data) => {
      if (data.chat_id === this.chatId) {
        this.messages.push({
          sender: data.sender,
          message: data.message,
        });
      }
    });
  },
});
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="css/style.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <main class="main" id="main">
                <div class="sidebar">
                    <!-- Панель выбора диалога -->
                    <div class="chat-list">
                        <div v-for="chat in chats" :key="chat.id" @click="selectChat(chat)">
                            <div class="chat-item">
                                <div class="chat-item-foto"></div>
                                <div class="chat-item-info">
                                    <p class="chat-item-nickname">{{ chat.companion }}</p>
                                    <p class="chat-item-last_message">{{ chat.lastMessage }}</p>
                                </div>
                            </div>
                        </div>     
                    </div>
                    
                    <div class="sidebar-footer">
                        <div class="sidebar-footer-container">
                            <button @click="showCreateChatForm">
                                <svg width="36" height="36" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <g clip-path="url(#clip0_173_301)">
                                    <circle cx="12" cy="11.999" r="9" fill="#1CB0F6" stroke="#1CB0F6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M12 9V15" stroke="#84D8FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M9 12H15" stroke="#DDF4FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    </g>
                                    <defs>
                                    <clipPath id="clip0_173_301">
                                    <rect width="36" height="36" fill="white"/>
                                    </clipPath>
                                    </defs>
                                </svg>
                            </button>
                            <button id="logout-button" ></button>
                                <svg width="36" height="36" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <g clip-path="url(#clip0_173_542)">
                                    <path d="M9 4.00018H19V18.0002C19 19.1048 18.1046 20.0002 17 20.0002H9" stroke="#EA2B2B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M15 12.0002H5" stroke="#EA2B2B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M12 15.0002L15 12.0002L12 9.00018" stroke="#FF4B4B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    </g>
                                    <defs>
                                    <clipPath id="clip0_173_542">
                                    <rect width="36" height="36" fill="white"/>
                                    </clipPath>
                                    </defs>
                                </svg>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="create-chat-from" v-if="isCreateChatFormVisible">
                    <form id="create-chat-from" @submit.prevent="createChat">
                        <input type="text" v-model="companion" placeholder="Введите ник">
                        <button type="submit">Создать чат</button>
                        <button @click="cancelCreateChat">Отмена</button>
                    </form>
                    <button id="close-form">Закрыть</button>
                </div>
                <div class="chat" id="chat">
                    <div class="messages" id="messages">
                            
                        <!-- Окно чата -->
                    </div>
                    <div class="input-container">
                        <input type="text" v-model="message" placeholder="Введите ваше сообщение">
                        <button @click="sendMessage">
                            <svg width="36" height="36" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <g clip-path="url(#clip0_173_433)">
                            <path d="M7.23983 4.53465L19.1842 10.1925C20.7093 10.9149 20.7093 13.0851 19.1842 13.8075L7.23983 19.4653C5.82469 20.1357 4.22297 18.9933 4.39589 17.437L4.97546 12.2209C4.99177 12.0741 4.99177 11.9259 4.97546 11.7791L4.39589 6.56299C4.22297 5.0067 5.82469 3.86433 7.23983 4.53465Z" fill="#1CB0F6" stroke="#1CB0F6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M7 12H12" stroke="#DDF4FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </g>
                            <defs>
                            <clipPath id="clip0_173_433">
                            <rect width="36" height="36" fill="white"/>
                            </clipPath>
                            </defs>
                            </svg>
                        </button>
                    </div>
                </div>
            </main>
        </div>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.2/socket.io.min.js"></script>
        <script src="../js/chat.js"></script>
        <script src="../js/user-chats-nav.js"></script>
        <!--<script src="../js/main-window.js"></script>-->
    </body>
</html>


Источник

Ответы (0 шт):

licensed under cc by-sa 3.0 with attribution.