Отправка уведомлений в реальном времени с помощью Socket.io в Node.js


Как работают веб-сайты?

  • Пользователь указывает 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

Оцените статью
devanswers.ru
Добавить комментарий