🚀 Как развернуть чат Flask + WebSocket на Heroku / Railway и сделать чат-комнаты

Как развернуть чат Flask + WebSocket на Heroku / Railway и сделать чат-комнаты

Ты уже создал свой мини-чат, и он работает на localhost, но что дальше? В этой статье покажу, как выложить чат в интернет (чтобы радовать друзей, коллег или клиентов) и как добавить поддержку чат-комнат — чтобы каждый мог общаться в своём пространстве.

📦 Развёртывание чата в интернете: Heroku и Railway

Вариант 1: Heroku (если ты любишь стабильность)

🔧 Шаг 1. Установка Heroku CLI

Если ещё не установил:

https://devcenter.heroku.com/articles/heroku-cli

🔧 Шаг 2. Файлы, которые нужны Heroku

Создай файл requirements.txt:

pip freeze > requirements.txt

Создай Procfile (именно с большой буквы, без расширения):

web: gunicorn app:app

Установи gunicorn:

pip install gunicorn

🔧 Шаг 3. Зарегистрируйся и залей проект:

heroku login
heroku create your-chat-name
git init
git add .
git commit -m "Initial commit"
heroku git:remote -a your-chat-name
git push heroku master

⚠️ В app.py замените запуск приложения на:

if __name__ == '__main__':
socketio.run(app, host='0.0.0.0', port=int(os.environ.get('PORT', 5000)))

Вариант 2: Railway (ещё проще и быстрее)

1. Перейди на https://railway.app
2. Нажми “Start a New Project” → Deploy from GitHub
3. Свяжи GitHub и выбери свой репозиторий
4. Railway сам определит, как запускать Flask
5. После деплоя появится публичная ссылка!

Если что-то не запускается — укажи команду запуска:

python app.py

📌 Важно: Railway может не поддерживать socketio.run() напрямую — лучше использовать Gunicorn, как в Heroku.

💬 Поддержка чат-комнат

Сейчас у нас все сообщения идут в один общий поток. Давай добавим комнаты!

📁 Изменения в app.py

from flask_socketio import join_room, leave_room, emit

# Обработчик входа в комнату
@socketio.on('join')
def on_join(data):
username = data['username']
room = data['room']
join_room(room)
emit('message', f"{username} зашёл в комнату {room}", to=room)

# Обработчик выхода
@socketio.on('leave')
def on_leave(data):
username = data['username']
room = data['room']
leave_room(room)
emit('message', f"{username} покинул комнату {room}", to=room)

# Отправка сообщений в комнату
@socketio.on('message')
def handle_message(data):
msg = data['msg']
room = data['room']
emit('message', msg, to=room)

🔧 Обновления в chat.html

<script>
const socket = io();
const username = prompt("Введите ваше имя:");
const room = prompt("Введите имя комнаты:");

socket.emit('join', { username, room });

function sendMessage() {
const input = document.getElementById('message');
const msg = input.value;
if (msg.trim()) {
socket.emit('message', { msg, room }); // отправляем в комнату
input.value = '';
}
}

socket.on('message', function(msg) {
const messages = document.getElementById('messages');
const newMsg = document.createElement('div');
newMsg.textContent = msg;
messages.appendChild(newMsg);
messages.scrollTop = messages.scrollHeight;
});
</script>

🏁 Результат

Теперь у тебя:

✅ Развёрнутый мини-чат на Heroku или Railway

✅ Возможность создавать много комнат

✅ Реальный WebSocket-сервер, готовый к продакшену

📌 Что можно добавить дальше?

• Авторизация (Flask-Login)
• Сохранение истории сообщений (в SQLite или PostgreSQL)
• Emoji + Markdown разметку
• Аватарки пользователей
• Онлайн-статусы