Как работают веб-сайты?
- Пользователь указывает URL-адрес веб-браузеру.
- Браузер отправляет запрос на веб-сервер, запрашивая ресурсы, связанные с URL.
- Сервер получает запрос и отправляет браузеру ответ HTTP, содержащий соответствующие файлы.
- Браузер отображает ответ в виде веб-страниц для пользователя.
Этот тип связи — HTTP-соединение — подходит для приложений, в которых данные меняются нечасто.
Вы когда-нибудь пользовались приложением для торговли на рынке Форекс или посещали сайт спортивных ставок? Вы заметите, что данные меняются почти каждую минуту; эти изменения возможны с помощью WebSockets.
WebSockets создает соединение между клиентом и сервером, позволяя им отправлять данные в обоих направлениях: клиент-сервер и сервер-клиент. По сравнению с HTTP, WebSockets обеспечивают прочное двунаправленное соединение клиент-сервер, что позволяет изменять данные в режиме реального времени без обновления страницы.
Novu
Если вы хотите реализовать уведомления в приложении (вроде Facebook / Instagram / Upwork и т.д.), обратите внимание на Novu, мы предлагаем вам комплексное решение, не имея дела с сокетами / масштабированием / базами данных / серверами. Приходите к нам ⭐️🤩
https://github.com/novuhq/novu
И мы вернулись!
Node.js имеет встроенный модуль WebSocket, но этот модуль не обеспечивает функциональность, необходимую для создания сложных приложений реального времени; именно поэтому существует Socket.io.
Socket.io — это популярная библиотека JavaScript, которая позволяет нам создавать двунаправленную связь в реальном времени между клиентами и сервером Node.js. Это высокопроизводительная и надежная библиотека, оптимизированная для обработки большого объема информационных сообщений с минимальной задержкой. Она следует протоколу WebSocket и предоставляет лучшие функциональные возможности, такие как возврат к HTTP long-polling или автоматическое переподключение, что позволяет нам создавать эффективные чаты и веб-приложения реального времени.
В этой статье вы узнаете, как отправлять уведомления между веб-клиентами и сервером Node.js с помощью Socket.io. Прежде чем мы начнем кодировать этот проект, давайте посмотрим, как работает Socket.io.
Этот учебник предполагает, что у вас есть базовые знания о создании веб-приложений с помощью Express.js и Node.js.
Как работает библиотека Socket.io?
Приложения Node.js реального времени, такие как торговля на рынке форекс, сайты спортивных ставок, чат-приложения и многие другие, используют Socket.io. В этом разделе вы узнаете, как Socket.io передает сообщения между клиентом и сервером в веб-приложении.
Библиотека Socket.io состоит из двух частей — клиентского и серверного API. API клиента позволяет пользователям подключаться к серверу через WebSocket, а API сервера инициирует соединение Socket.io на внутреннем сервере.
Чтобы подключить Socket.io к веб-клиенту, вам нужно загрузить клиентский пакет JavaScript через CDN или NPM.
Для HTML-клиентов добавьте этот код в тег head.
<script src="https://cdn.socket.io/4.5.0/socket.io.min.js" integrity="sha384-7EyYLQZgWBi67fBtVxw60/OWl1kjsfrPFcaU0pp0nAh+i8FD068QogUvg85Ewy1k" crossorigin="anonymous"></script>
Приведенный выше фрагмент кода загружает Socket.io через CDN и открывает клиентский пакет по адресу /socket.io/socket.io.js для клиента. Затем мы можем получить доступ к Socket.io, добавив приведенный ниже код в нижнюю часть нашего тега HTML body.
<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io();
</script>
Для React.js, Next.js и других библиотек или фреймворков JavaScript вы можете загрузить API клиента Socket.io через NPM.
npm install socket. io-client
Для установки бэкенд-сервера необходимо, чтобы на вашем компьютере был установлен как минимум Node.js v10, прежде чем вы сможете установить API сервера через NPM.
npm install socket.io
С помощью этой библиотеки вы можете создать соединение Socket.io, подключить веб-клиентов к бэкенд-серверу и начать отправку сообщений между клиентом и сервером.
Однако это лишь простое объяснение того, как работает Socket.io. В этой статье я расскажу вам, как добавить библиотеку Socket.io на клиент и сервер, создав систему уведомлений.
Настройка Express.js на сервере Node.js
Здесь я проведу вас через настройку Express.js на сервере Node.js. Express.js — это быстрый, минималистичный фреймворк, который предоставляет несколько функций для создания веб-приложений Node.js. Он позволяет нам создавать веб-клиент для приложений Node.js.
Создайте папку, в которой будет находиться наше приложение. Затем создайте файл package.json, выполнив приведенный ниже код.
mkdir <folder-name>
cd <folder-name>
npm init -y
Создайте файл index.js — точку входа в веб-приложение.
touch index.js
Установите Express.js, Nodemon и Socket.io. Nodemon — это инструмент Node.js, который автоматически перезапускает сервер после обнаружения изменений файлов.
npm install express nodemon socket.io
Настройте Nodemon, добавив команду start в список скриптов в файле package.json. Приведенный ниже фрагмент кода запускает сервер с помощью Nodemon.
{
"name": "server",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"start": "nodemon index.js" //npm start - starts the server with Nodemon
},
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.18.1",
"nodemon": "^2.0.19",
"socket.io": "^4.5.1"
}
}
Обновите файл index.js для рендеринга HTML-страницы. Скопируйте приведенный ниже код в файл index.js.
const express = require('express');
const app = express();
const path = require('path');
const PORT = process.env.PORT || 8080;
//enables us to host static CSS & JS files.
//The public folder contains the CSS & JS files.
app.use(express.static('public'));
//Route to the homepage of the application
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, '/index.html'));
});
//Listens for changes in the web application
app.listen(PORT, () => {
console.log(`App listening at ${PORT}`);
});
Создайте файл index.html, который отображает панель сообщений и кнопку.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Socket IO Chat App</title>
<!-- Link to CSS file-->
<link rel="stylesheet" href="./index.css" />
</head>
<body>
<div id="message-bar">
<p id="notification"></p>
</div>
<form class="container">
<h2>Send Messages with Socket.io</h2>
<textarea
rows="5"
width="100%"
name="message"
id="message"
placeholder="Enter your message..."
></textarea>
<button>SEND MESSAGE</button>
</form>
</body>
</html>
Создайте папку с именем public. В этой папке будет содержаться файл CSS для HTML-страницы.
mkdir public
cd public
touch index.css
Скопируйте приведенный ниже код в файл index.css.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
#message-bar {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#notification {
color: #fff;
}
.container {
height: 80vh;
width: 100%;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: center;
}
h2 {
text-align: center;
margin-bottom: 30px;
}
textarea {
font-size: 16px;
margin-bottom: 30px;
padding: 15px;
outline: none;
}
button {
width: 200px;
padding: 15px;
cursor: pointer;
background-color: #2c3639;
outline: none;
border: none;
color: #dcd7c9;
font-size: 16px;
}
button:hover {
background-color: #3f4e4f;
}
Запустите сервер Node.js. Вы можете просмотреть файл index.html по адресу https://localhost:8080 в своем веб-браузере.
npm start
Настройка Socket.io на клиенте
В этом разделе я расскажу вам о подключении веб-клиента к Socket.io.
Обновите файл index.html для подключения пакетов JavaScript Socket.io через CDN. Добавьте первый сниппет в тег head, а второй — в нижнюю часть тега body.
<head>
<!-- This links to Socket.io client JavaScript bundle via CDN. -->
<script
src="https://cdn.socket.io/4.5.0/socket.io.min.js"
integrity="sha384-7EyYLQZgWBi67fBtVxw60/OWl1kjsfrPFcaU0pp0nAh+i8FD068QogUvg85Ewy1k"
crossorigin="anonymous"
></script>
</head>
<body>
......
The page content
.....
<!-- Link to the JavaScript file-->
<script src="./script.js" type="module"></script>
<!-- This access the client JavaScript bundle provided via its CDN -->
<script src="/socket.io/socket.io.js"></script>
</body>
Создайте файл JavaScript — script.js, который позволит нам получить доступ к пользовательскому вводу и элементам HTML на веб-странице через JavaScript DOM.
cd public
touch script.js
Доступ к элементам HTML через объектную модель документа, предоставляемую JavaScript.
//In script.js
const notify = document.querySelector('#notification');
const message = document.querySelector('#message');
const button = document.querySelector('button');
const messageBar = document.querySelector('#message-bar');
Создайте слушатель событий, который регистрирует сообщение, предоставленное пользователем, в консоли при каждом отправлении формы.
function printMessage(e) {
e.preventDefault();
console.log(message.value);
}
button.addEventListener('click', printMessage);
Далее добавьте Socket.io в JavaScript-файл клиента — script.js.
const socket = io();
socket.on('response', (data) => {
notify.textContent = data;
messageBar.style.backgroundColor = '#3F4E4F';
messageBar.style.height = '20vh';
});
Приведенный выше фрагмент кода прослушивает сообщения с меткой ответа от сервера. Если сообщение есть, он отображает его на веб-странице.
Отредактируйте функцию printMessage для отправки сообщений от клиента на сервер Node.js. Приведенный ниже фрагмент кода отправляет сообщения на сервер, когда пользователь нажимает кнопку отправки.
function printMessage(e) {
e.preventDefault();
socket.emit('message', message.value);
}
Добавление Socket.io на сервер Node.js
В этом разделе вы узнаете, как настроить Socket.io на сервере Node.js, и вы сможете получать и отправлять сообщения с клиента через Socket.io.
Обновите index.js, импортировав Socket.io и модуль HTTP из Node.js. Модуль HTTP создает HTTP-сервер, который позволяет Node.js передавать данные по сети.
const express = require('express');
const app = express();
const path = require('path');
const PORT = process.env.PORT || 8080;
//New imports
const http = require('http').Server(app);
//Pass the Express app into the HTTP module.
const socketIO = require('socket.io')(http);
app.use(express.static('public'));
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, '/index.html'));
});
//Listen for changes on the HTTP server not the Express server
http.listen(PORT, () => {
console.log(`App listening at ${PORT}`);
});
Из приведенного выше фрагмента кода видно, что HTTP-сервер принимает приложение Express в качестве параметра, и мы слушаем изменения на HTTP-сервере вместо Express.
Перед блоком app.get() создайте соединение с веб-клиентом с помощью Socket.io.
socketIO.on('connection', (socket) => {
console.log(`⚡: ${socket.id} user just connected`);
socket.on('disconnect', () => {
console.log('A user disconnected');
});
});
Приведенная выше функция socket.io("connection") создает соединение с веб-клиентом. Socket.io создает уникальный идентификатор для каждого клиента и записывает его в консоль каждый раз, когда пользователь посещает веб-страницу. Когда вы обновляете или закрываете веб-страницу, сокет запускает событие disconnect, показывающее, что пользователь отключился от сокета.
Далее обновите функцию для отправки и получения данных от клиента.
socketIO.on('connection', (socket) => {
console.log(`⚡: ${socket.id} user just connected`);
socket.on('disconnect', () => {
console.log('A user disconnected');
});
socket.on('message', (data) => {
//sends the data to everyone except you.
socket.broadcast.emit('response', data);
//sends the data to everyone connected to the server
// socket.emit("response", data)
});
});
*socket.broadcast.emit()— отправляет данные всем, кроме вас, аsocket.broadcast.emit()— отправляет данные всем, кто подключен к серверу, включая вас*.
Поздравляем! 🎊 Вы только что завершили проект для этого урока.
Заключение
В этом уроке вы узнали
- Что такое WebSockets
- Зачем и когда нам нужен Socket.io?
- Как подключить Socket.io к веб-клиенту и серверу Node.js, и
- как отправлять сообщения между HTML-клиентом и сервером Node.js.
Socket.io поддерживает обмен личными сообщениями и групповые чаты, идентифицирует пользователей по никнеймам, показывает, находится ли пользователь в сети, и знает, набирает ли пользователь текст.
С помощью этих функций, предоставляемых Socket.io, можно создавать сложные приложения реального времени, полезные в различных отраслях, таких как авиация, игры, медиа и финансы.
Socket.io — отличный выбор для связи в реальном времени между клиентом и сервером Node.js. Некоторые другие библиотеки, такие как Twilio, Firebase, Supabase и многие другие, поддерживают коммуникацию в реальном времени. Не стесняйтесь проверить их.
Спасибо за прочтение,
Вы можете найти полный исходный код здесь:
https://github.com/novuhq/blog/tree/main/sending%20emails%20via%20SocketIO