232 подписчика

💬 Мини-чат на Flask + WebSocket: делаем свой Slack на минималках

16 апреля16 апр

3 мин

«Нам бы чат, но чтобы без миллиона зависимостей и запускался как обычный питоновский скрипт.»

— все мы когда-то Сегодня мы создадим реальный мини-чат, используя Flask и WebSocket через библиотеку Flask-SocketIO. Не пугайтесь, если вы новичок — объясню каждую строчку, а если вы опытный разработчик — возможно, утащите себе идею для быстрого MVP или внутреннего инструмента. pip install flask flask-socketio Flask сам по себе не умеет в «настоящее время». То есть, без обновления страницы вы не узнаете, что кто-то написал сообщение. WebSocket позволяет держать открытое соединение между клиентом и сервером и «толкать» данные, когда что-то происходит. mini-chat/

├── app.py

└── templates/

└── chat.html from flask import Flask, render_template

from flask_socketio import SocketIO, send

# Создаём Flask-приложение

app = Flask(__name__)

app.config['SECRET_KEY'] = 'super-secret-key' # Чтобы работал SocketIO

# Подключаем SocketIO

socketio = SocketIO(app)

# Роут главной страницы

@app.route('/

«Нам бы чат, но чтобы без миллиона зависимостей и запускался как обычный питоновский скрипт.»

├── app.py

└── templates/

└── chat.html from flask import Flask, render_template

from flask_socketio import SocketIO, send

# Создаём Flask-приложение

app = Flask(__name__)

app.config['SECRET_KEY'] = 'super-secret-key' # Чтобы работал SocketIO

# Подключаем SocketIO

socketio = SocketIO(app)

# Роут главной страницы

@app.route('/

Оглавление

🛠 Что будем делать?
📦 Установка зависимостей
🧠 Почему WebSocket?

«Нам бы чат, но чтобы без миллиона зависимостей и запускался как обычный питоновский скрипт.»

— все мы когда-то

Сегодня мы создадим реальный мини-чат, используя Flask и WebSocket через библиотеку Flask-SocketIO. Не пугайтесь, если вы новичок — объясню каждую строчку, а если вы опытный разработчик — возможно, утащите себе идею для быстрого MVP или внутреннего инструмента.

🛠 Что будем делать?

Мини-сервер на Flask
WebSocket-соединение (настоящий real-time)
Простая HTML-страница с подключением
Передача сообщений и обновление у всех пользователей

📦 Установка зависимостей

pip install flask flask-socketio

🧠 Почему WebSocket?

Flask сам по себе не умеет в «настоящее время». То есть, без обновления страницы вы не узнаете, что кто-то написал сообщение. WebSocket позволяет держать открытое соединение между клиентом и сервером и «толкать» данные, когда что-то происходит.

📁 Структура проекта

mini-chat/
├── app.py
└── templates/
└── chat.html

🧾 Код: app.py

from flask import Flask, render_template
from flask_socketio import SocketIO, send

# Создаём Flask-приложение
app = Flask(__name__)
app.config['SECRET_KEY'] = 'super-secret-key' # Чтобы работал SocketIO

# Подключаем SocketIO
socketio = SocketIO(app)

# Роут главной страницы
@app.route('/')
def index():
return render_template('chat.html') # HTML-страница с чатом

# Обработчик входящих сообщений от клиента
@socketio.on('message')
def handle_message(msg):
print('Новое сообщение: ' + msg)
send(msg, broadcast=True) # Отправляем сообщение всем

# Запуск приложения
if __name__ == '__main__':
socketio.run(app, debug=True)

🔍 Пояснения

send(msg, broadcast=True) — рассылает сообщение всем подключённым клиентам
@socketio.on('message') — обработчик события WebSocket по умолчанию
debug=True — Flask сам перезапускается при изменениях

🌐 HTML: templates/chat.html

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Мини-чат</title>
<script src="https://cdn.socket.io/4.0.0/socket.io.min.js"></script>
<style>
body { font-family: sans-serif; padding: 30px; }
#messages { border: 1px solid #ddd; padding: 10px; height: 200px; overflow-y: scroll; margin-bottom: 10px; }
</style>
</head>
<body>

<h2>💬 Добро пожаловать в мини-чат!</h2>

<div id="messages"></div>

<input type="text" id="message" placeholder="Введите сообщение..." autofocus>
<button onclick="sendMessage()">Отправить</button>

<script>
const socket = io(); // подключаемся к серверу

// При получении сообщения — добавляем его в div
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; // скроллим вниз
});

// Отправка сообщения на сервер
function sendMessage() {
const input = document.getElementById('message');
const msg = input.value;
if (msg.trim()) {
socket.send(msg); // отправка сообщения
input.value = '';
}
}

// Enter нажали? Отправить!
document.getElementById('message').addEventListener('keyup', function(e) {
if (e.key === 'Enter') sendMessage();
});
</script>

</body>
</html>

🧪 Проверка

Запускаем python app.py
Открываем браузер на http://localhost:5000
Открываем вторую вкладку — и видим магию: сообщения появляются в реальном времени 🔥

🤔 Что мы сделали?

КомпонентЧто он делаетFlaskРоутинг и запуск веб-сервераSocketIOWebSocket-соединение и событияchat.htmlИнтерфейс, взаимодействие с серверомbroadcastРассылка сообщений всем пользователям

🔧 Что можно улучшить?

Добавить никнеймы пользователей
Разделять чат-комнаты
Хранить историю сообщений (в БД)
Добавить авторизацию (например, через Flask-Login)
Сделать дизайн в стиле Telegram 😎

💡 Идея на вырост

Можно превратить этот чат в:

Помощника для сайта (чат с менеджером)
Внутреннюю систему уведомлений
Мини-чат в команде стартапа без Slack

🏁 Итог

Мы создали работающий веб-чат на Python с WebSocket. Использовали всего пару библиотек и немного HTML. Чисто, просто и работает.