Розробка онлайн чату на Python та Socket IO

Що таке Socket?

Socket IO – це бібліотека для створення веб-чатів у реальному часі. З її допомогою сервер та клієнт можуть обмінюватися даними миттєво без перезавантаження сторінки. Це особливо круто для інтерактивних програм.

Найчастіше Socket застосовується для чатів на сайті, хоча технологія може бути використана і для інших цілей. Щоразу, коли ви хочете створити асинхронний обмін даними між кількома клієнтами, то можна використовувати сокети.

Курс з вивчення Python

Можете пройти наш безкоштовний курс з вивчення Python

Їх застосування може бути пов'язане з мовою Python або багатьма іншими мовами: C#, JavaScript, Java і так далі.

Описуємо роботу з кімнатою

Тепер почнемо опис проекту. Ви можете скористатись бібліотекою python-socketio. Вона полегшить інтеграцію Socket IO у ваші програми, а також забезпечить обробку подій, таких як: підключення та надсилання повідомлень між сервером і клієнтом. Встановлюємо цю бібліотеку через термінал у проект.

Додатково встановіть бібліотеку aiohttp. Вона служить для створення веб-сервера, який знадобиться для запуску Сокета.

Переходимо до коду. Описуємо імпорт бібліотек, а також створюємо об'єкт сервера. Тут же дозволяємо крос-доменні запити, створюємо об'єкт веб-сервера і прикріплюємо сервер до нашого сокету.

import socketio
from aiohttp import web

# Створюємо об'єкт сервера
sio = socketio.AsyncServer(cors_allowed_origins="*") # Дозволяємо крос-доменні запити
app = web.Application()
sio.attach(app)

Далі доведеться описати кілька обробників, які будуть розуміти, коли клієнт зайшов, коли вийшов і коли щось відправив.

# Обробник підключення нового клієнта до загальної кімнати
@sio.event
async def connect(sid, environ):
	print(f'Клієнт {sid} підключено до спільної кімнати')

	# Приєднуємо клієнта до спільної кімнати
	await sio.enter_room(sid, 'common_room')

# Обробник відключення клієнта від загальної кімнати
@sio.event
async def disconnect(sid):
	print(f'Клієнт {sid} відключено від загальної кімнати')

	# Залишаємо загальну кімнату при відключенні
	await sio.leave_room(sid, 'common_room')

# Обробник нового повідомлення від клієнта
@sio.event
async def message(sid, data):
	print(f'Отримано повідомлення від {sid}: {data}')

	# Надсилаємо повідомлення всім клієнтам у спільній кімнаті, крім відправника
	await sio.emit('message', data, room='common_room', skip_sid=sid)
	
# Запуск сервера
if __name__ == '__main__':
	web.run_app(app, port=5000)

Наприкінці документа дописуємо код для запуску веб-сервера за певним портом. Програму вже можна запустити, але особливо нічого не ви не побачите, тому що поки що у нас є тільки сервер, але немає клієнтської частини для роботи з ним.

Клієнтська сторона

Для клієнтської сторони достатньо створити файл «index.html», в якому ми описуємо кілька важливих моментів: 

1. описуємо підключення бібліотеки socket io через тег «script»;
2. створюємо тег ul, у який виводитимемо всі повідомлення;
3. створюємо поле для отримання даних від користувача;
4. додаємо кнопку, що викликатиме якусь JavaScript функцію.

< script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.1.3/socket.io.js"></script>
<ul id="messages"></ul>
<input id="messageInput" placeholder="Введіть повідомлення" />

Далі потрібно описати код JavaScript. Вкажіть, до якого серверу ви підключатиметеся. Переконайтеся, що ви вказуєте той самий порт, як у файлі Python. Створіть обробник нового повідомлення від сервера. Функція повинна отримувати повідомлення у параметрі «data» і за допомогою деяких нехитрих дій ви встановлюєте дані у тег «ul».

Важливо дописати ще функцію надсилання повідомлення. У функції отримуємо дані з «input» поля та через «socket.emit» передаємо їх у бік сервера.

var socket = io('http://localhost:5000');

// Обробник нового повідомлення від сервера
socket.on('message', function (data) {
	var messages = document.getElementById('messages');
	var item = document.createElement('li');
	item.textContent = data;
	messages.appendChild(item);
});

// Функція надсилання повідомлення
function sendMessage() {
	var messageInput = document.getElementById('messageInput');
	var message = messageInput.value;

	socket.emit('message', message);
	// Додаємо введене повідомлення на веб-сторінку
	var messages = document.getElementById('messages');
	var item = document.createElement('li');
	item.textContent = 'Ви: ' + message;
	messages.appendChild(item);
	// Очищаємо поля введення
	messageInput.value = '';
}

Доопрацювання проекту

Розробка наступної частини проекту доступна у відео нижче. Там же ви знайдете повний опис усіх необхідних дій:

Більш інформації

Якщо ви хочете дізнатися більше інформації про мову Python і хочете вивчити її для створення своїх схожих додатків, то рекомендуємо вам нашу велику програму навчання на цю тему.

У ході величезної програми навчання ви вивчите мову Пітон, навчитеся на її основі працювати з базами даних, створювати мобільні проекти, будувати веб-сайти за допомогою Django, ознайомтеся з REST API та познайомитесь з розробкою програм з використанням ІІ та різних бібліотек мови.