Мини-чат

{"draftJsState":{"blocks":[{"data":{"image":{"id":"67ff22bcb03b3705d6d300e9"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Flask + WebSocket","type":"atomic:image","key":"eefhe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"8ktat"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":93,"offset":0,"style":"ITALIC"}],"text":"«Нам бы чат, но чтобы без миллиона зависимостей и запускался как обычный питоновский скрипт.»\n\n— все мы когда-то","type":"blockquote","key":"4j2qj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":20,"style":"BOLD"},{"length":5,"offset":49,"style":"BOLD"},{"length":9,"offset":57,"style":"BOLD"}],"text":"Сегодня мы создадим реальный мини-чат, используя Flask и WebSocket через библиотеку Flask-SocketIO. Не пугайтесь, если вы новичок — объясню каждую строчку, а если вы опытный разработчик — возможно, утащите себе идею для быстрого MVP или внутреннего инструмента.","type":"unstyled","key":"2inck"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\uD83D\uDEE0 Что будем делать?","type":"header-two","key":"avpc5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Мини-сервер на Flask","type":"unordered-list-item","key":"dj2ns"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"WebSocket-соединение (настоящий real-time)","type":"unordered-list-item","key":"ar2k9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Простая HTML-страница с подключением","type":"unordered-list-item","key":"d9v9j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Передача сообщений и обновление у всех пользователей","type":"unordered-list-item","key":"7j1ss"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\uD83D\uDCE6 Установка зависимостей","type":"header-two","key":"aici0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"pip install flask flask-socketio","type":"unstyled","key":"5rknr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\uD83E\uDDE0 Почему WebSocket?","type":"header-two","key":"1vd0f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":154,"style":"BOLD"}],"text":"Flask сам по себе не умеет в «настоящее время». То есть, без обновления страницы вы не узнаете, что кто-то написал сообщение. WebSocket позволяет держать открытое соединение между клиентом и сервером и «толкать» данные, когда что-то происходит.","type":"unstyled","key":"81b5b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\uD83D\uDCC1 Структура проекта","type":"header-two","key":"1q47h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"mini-chat/\n├── app.py\n└── templates/\n └── chat.html","type":"unstyled","key":"fng5o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\uD83E\uDDFE Код: app.py","type":"header-two","key":"d4f1s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"from flask import Flask, render_template\nfrom flask_socketio import SocketIO, send\n\n# Создаём Flask-приложение\napp = Flask(__name__)\napp.config['SECRET_KEY'] = 'super-secret-key' # Чтобы работал SocketIO\n\n# Подключаем SocketIO\nsocketio = SocketIO(app)\n\n# Роут главной страницы\n@app.route('/')\ndef index():\n return render_template('chat.html') # HTML-страница с чатом\n\n# Обработчик входящих сообщений от клиента\n@socketio.on('message')\ndef handle_message(msg):\n print('Новое сообщение: ' + msg)\n send(msg, broadcast=True) # Отправляем сообщение всем\n\n# Запуск приложения\nif __name__ == '__main__':\n socketio.run(app, debug=True)","type":"unstyled","key":"1ba36"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\uD83D\uDD0D Пояснения","type":"header-three","key":"fvdhi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":48,"style":"BOLD"}],"text":"send(msg, broadcast=True) — рассылает сообщение всем подключённым клиентам","type":"unordered-list-item","key":"8v28k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"@socketio.on('message') — обработчик события WebSocket по умолчанию","type":"unordered-list-item","key":"b2nv3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"debug=True — Flask сам перезапускается при изменениях","type":"unordered-list-item","key":"a6r8v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\uD83C\uDF10 HTML: templates/chat.html","type":"header-two","key":"3ughu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n\n\n \n Мини-чат\n \n \n\n\n\n

\uD83D\uDCAC Добро пожаловать в мини-чат!

\n\n

\n\n \n \n\n \n\n\n","type":"unstyled","key":"8htia"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\uD83E\uDDEA Проверка","type":"header-two","key":"ftu1a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Запускаем python app.py","type":"ordered-list-item","key":"4q6ou"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Открываем браузер на http://localhost:5000","type":"ordered-list-item","key":"6jgaf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":10,"style":"BOLD"}],"text":"Открываем вторую вкладку — и видим магию: сообщения появляются в реальном времени \uD83D\uDD25","type":"ordered-list-item","key":"28t0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\uD83E\uDD14 Что мы сделали?","type":"header-two","key":"du90d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"КомпонентЧто он делаетFlaskРоутинг и запуск веб-сервераSocketIOWebSocket-соединение и событияchat.htmlИнтерфейс, взаимодействие с серверомbroadcastРассылка сообщений всем пользователям","type":"unstyled","key":"8bsfi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\uD83D\uDD27 Что можно улучшить?","type":"header-two","key":"6b77e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добавить никнеймы пользователей","type":"unordered-list-item","key":"88ls4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Разделять чат-комнаты","type":"unordered-list-item","key":"bkgv2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Хранить историю сообщений (в БД)","type":"unordered-list-item","key":"b8le3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добавить авторизацию (например, через Flask-Login)","type":"unordered-list-item","key":"8k43t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сделать дизайн в стиле Telegram \uD83D\uDE0E","type":"unordered-list-item","key":"1lao8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\uD83D\uDCA1 Идея на вырост","type":"header-two","key":"ajbj8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Можно превратить этот чат в:","type":"unstyled","key":"86lhc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Помощника для сайта (чат с менеджером)","type":"unordered-list-item","key":"cgis7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Внутреннюю систему уведомлений","type":"unordered-list-item","key":"aa57r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Мини-чат в команде стартапа без Slack","type":"unordered-list-item","key":"cluih"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\uD83C\uDFC1 Итог","type":"header-two","key":"vfnc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":40,"offset":11,"style":"BOLD"}],"text":"Мы создали работающий веб-чат на Python с WebSocket. Использовали всего пару библиотек и немного HTML. Чисто, просто и работает.","type":"unstyled","key":"70jp3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"VcsXQp28TIKzjP2XhNbF"}],"entityMap":{}},"mentions":[]}