У сучасному швидкоплинному цифровому світі чат-системи стали основою багатьох веб-додатків. Від соціальних мереж до платформ електронної комерції, обмін повідомленнями в реальному часі більше не є розкішшю — це вже очікуваний стандарт.
Якщо ви коли-небудь цікавилися, як працюють чат-системи або мріяли створити свою, ви потрапили в правильне місце! Давайте розберемо все по кроках.
Перед тим як перейти до коду, необхідно зрозуміти кілька основних термінів для будь-якого додатку для комунікації в реальному часі — Socket (сокет) і порт.
Давайте спростимо. Уявіть, що сервер — це будівля, а клієнти — це люди. Наша мета? Допомогти двом людям спілкуватися через цю будівлю (сервер).
Ось як це працює:
- Будівля (сервер) має унікальне місце — IP-адресу.
- Усередині будівлі є різні кімнати (порти), кожна з яких надає певну послугу.
Тепер давайте подивимося, як Клієнт A і Клієнт B взаємодіють через цю будівлю.
Крок 1: Надсилання повідомлення (Клієнт A)
Клієнт A хоче надіслати повідомлення Клієнту B. Для цього йому потрібен спеціальний пропуск.
Цей пропуск містить:
- IP-адресу будівлі (для знаходження сервера).
- Конкретну кімнату (порт), де працює служба доставки повідомлень.
У технічних термінах цей пропуск називається сокетом — поєднання IP-адреси сервера та номера порту. Завдяки цьому пропуску Клієнт A може надіслати своє повідомлення на сервер.
Як тільки повідомлення потрапляє до будівлі, сервер вступає в гру. Він визначає отримувача повідомлення (Клієнта B) та направляє його до правильної кімнати (порту) всередині будівлі.
Крок 2: Отримання повідомлення (Клієнт B)
Тепер поглянемо на сторону Клієнта B.
- Сервер доставляє:
Сервер знає, де знаходиться Клієнт B, завдяки їхньому унікальному сокету (поєднання IP-адреси пристрою Клієнта B та порту). Сервер маршрутизує повідомлення до з’єднання Клієнта B. - Сповіщення:
Це як стук у двері Клієнта B — “Гей, у тебе є повідомлення!” Сервер відправляє повідомлення безпосередньо Клієнту B через їхнє сокет-з’єднання. - Оновлення в реальному часі:
Як тільки повідомлення приходить, інтерфейс чату Клієнта B оновлюється в реальному часі, відображаючи повідомлення від Клієнта A.
Комунікаційний цикл
І ось так цикл комунікації завершується!
- Клієнт A надсилає повідомлення через свій сокет.
- Сервер отримує його, ідентифікує Клієнта B та доставляє повідомлення до сокета Клієнта B.
- Клієнт B отримує сповіщення та бачить повідомлення в реальному часі.
Цей обмін відбувається за мілісекунди, створюючи безшовний досвід чату в реальному часі, який ми всі звикли використовувати.
Давайте зробимо це поняття ще зрозумілішим, створивши чат-додаток на основі Node.js. Ми використаємо бібліотеку socket.io для інтеграції сокетів на бекенді та Next.js для реалізації інтерфейсу на фронтенді.
Тепер, коли ми зрозуміли основи комунікації в реальному часі, давайте зробимо наступний крок і створимо чат-додаток, використовуючи Node.js та Socket.IO для бекенду та Next.js для фронтенду.
Чому Socket.IO?
Socket.IO спрощує реалізацію комунікації в реальному часі на основі подій. Він дозволяє серверу та клієнту підтримувати безперервне з’єднання, що дає можливість миттєво доставляти повідомлення без необхідності оновлювати або перезавантажувати сторінку.
Крок 1: Налаштування бекенду за допомогою Node.js
1. Ініціалізація проекту
Почнемо з створення нового проекту та встановлення необхідних залежностей.
mkdir chat-app
cd chat-app
npm init -y
npm install express socket.io cors dotenv
2.
Напишемо серверний код
Створіть файл з ім'ям server.js та налаштуйте сервер з Socket.IO.
const express = require("express");
const http = require("http");
const { Server } = require("socket.io");
require("dotenv").config();
const app = express();
const server = http.createServer(app);
const io = new Server(server, {
cors: {
origin: process.env.FRONTEND_URL, // Замініть на вашу URL-адресу фронтенду
credentials: true,
},
});
// Зберігаємо підключених клієнтів
const clients = {};
io.on("connection", (socket) => {
console.log(`Користувач підключився: ${socket.id}`);
// Надсилаємо ID сокета клієнту
socket.emit("your-socket-id", socket.id);
// Реєструємо клієнта
clients[socket.id] = socket;
// Обробка приватних повідомлень
socket.on("private-message", ({ recipientId, message }) => {
if (clients[recipientId]) {
clients[recipientId].emit("private-message", {
senderId: socket.id,
message,
});
} else {
console.log(`Отримувач ${recipientId} не знайдений.`);
}
});
// Обробка відключення
socket.on("disconnect", () => {
console.log(`Користувач відключився: ${socket.id}`);
delete clients[socket.id];
});
});
const PORT = process.env.PORT || 5000;
server.listen(PORT, () => console.log(`Сервер працює на порту ${PORT}`));
3. Налаштування змінних середовища
Створіть файл .env для зберігання налаштувань, таких як URL-адреса фронтенду.
dotenv
FRONTEND_URL=http://localhost:3000
PORT=5000
Запустіть сервер:
node server.js
Крок 2: Створення фронтенду за допомогою Next.js
1. Створіть новий проект Next.js
npx create-next-app@latest chat-app-frontend
cd chat-app-frontend
npm install socket.io-client
2. Реалізація інтерфейсу чату
Створіть нову сторінку з ім'ям pages/chat.js.
import { useEffect, useState } from "react";
import { io } from "socket.io-client";
const Chat = () => {
const [mySocketId, setMySocketId] = useState("");
const [recipientId, setRecipientId] = useState("");
const [message, setMessage] = useState("");
const [messages, setMessages] = useState([]);
useEffect(() => {
// Підключаємося до сервера Socket.IO
const socket = io("http://localhost:5000");
// Отримуємо ID сокета
socket.on("your-socket-id", (socketId) => {
setMySocketId(socketId);
});
// Слухаємо вхідні приватні повідомлення
socket.on("private-message", (data) => {
setMessages((prev) => [
...prev,
{ sender: `Користувач ${data.senderId}`, message: data.message },
]);
});
return () => {
socket.disconnect();
};
}, []);
const sendMessage = () => {
const socket = io("http://localhost:5000");
socket.emit("private-message", { recipientId, message });
setMessages((prev) => [
...prev,
{ sender: "Ви", message },
]);
setMessage("");
};
return (
Chat App
Your Socket ID: {mySocketId}
setRecipientId(e.target.value)} /> setMessage(e.target.value)} /> Send
Messages
{messages.map((msg, index) => (
{msg.sender}: {msg.message}
))}
);
};
export default Chat;
3. Оновлення змінних середовища
Переконайтесь, що URL сервера бекенду відповідає тому, що зазначено у файлі .env вашого бекенду.
Крок 3: Тестування чат-додатку
-
Запустіть сервер бекенду:
node server.js
-
Запустіть додаток Next.js:
npm run dev- Відкрийте чат-додаток у двох вікнах браузера або на різних пристроях.
Скопіюйте ID сокета одного клієнта і використовуйте його як ID отримувача для надсилання повідомлень.
Висновок
Всього кілька рядків коду — і ви побудували функціональний чат в реальному часі! Цей проєкт демонструє можливості Socket.IO та Next.js, і ви можете розширити його, додавши такі функції, як групові чати, індикатори набору тексту чи автентифікацію користувачів.
Перекладено з: Make your chat application(understand the easiest way )-nodejs-socket.io