Первоначально опубликовано Александром Нджогу на BlueDoa — https://www.bluedoa.com/nodejs-web-sockets-with-socket-io/

Веб-сокет — это протокол связи, который позволяет одновременно обмениваться данными между сервером и клиентом. Как только соединение установлено, соединение сохраняется до тех пор, пока клиент или сервер не разорвут соединение. Обычно это полезно при создании приложений реального времени.

Одновременная связь между сервером и клиентом невозможна в обычном HTTP. Протокол HTTP позволяет отправлять и получать данные только между клиентом и сервером.

В отличие от протокола HTTP, в котором используются http:// и https://, веб-сокеты используют собственное соглашение ws:// и wss:// соответственно.

Примечание. Несмотря на то, что библиотека Socket.io использует веб-сокеты, она не является заменой веб-сокетов. Это связано с тем, что Socket.io добавляет некоторые метаданные на клиенте и сервере во время связи, без них соединение обычно не устанавливается.

Сокет.IO

Socket.io — это библиотека, которая позволяет одновременно обмениваться данными между клиентом и сервером с помощью веб-сокетов. Когда веб-сокеты выходят из строя, Socket.io переключается на длительный опрос HTTP, гарантируя, что данные будут отправлены независимо. В случае полного отказа Socket.io выполняет автоматическое повторное подключение.

Что такое длинный опрос HTTP

Длинный опрос HTTP поддерживает подключение HTTP до тех пор, пока запрошенные ресурсы не будут доступны. После доставки ресурса соединение разрывается, и клиент запускает другое соединение. Из-за природы протокола http (отправка и получение), несмотря на то, что длительный пул обычно легко реализовать, он сопряжен с дополнительными задержками.

Веб-сокеты обеспечивают полностью дуплексную связь между сервером и клиентом, в то время как связь с длительным опросом HTTP является полудуплексной.

Начало работы с Socket.IO — приложение для чата

  • Создайте папку chat-app
  • Добавьте файл package.json, содержащий следующее содержимое:
{
  "name": "chat-app",
  "version": "0.0.1",
  "description": "socket.io chat app",
  "dependencies": {}
}

package.json

Мы продемонстрируем Socket.io, создав простое приложение для чата в реальном времени, которое использует Socket.io с помощью экспресс-сервера.

Настройка Package.json

package.json — это файл управления пакетами для npm.

Установка необходимых зависимостей

Выполните следующие команды, чтобы установить Express и Socket.io.

npm install express@4
npm install socket.io

Экспресс сервер

Теперь создайте файл index.js

Добавьте приведенный ниже контент.

Мы используем socket’s.io on() для прослушивания сокетных соединений. Когда соединение установлено, мы прослушиваем chat-message данные, после получения chat-message мы генерируем событие с именем chat-message, используя socket's.io emit(), которое можно прослушивать на клиенте и отображать.

Клиент

Это раздел, с которым взаимодействует пользователь. Если вы присмотритесь, мы обслуживаем его как index.html.

Создать index.html файл

Добавьте ниже содержание.

<!DOCTYPE html> <html> <head> <title>Socket.IO chat</title> <style> body { margin: 0; padding-bottom: 3rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } #form { background: rgba(0, 0, 0, 0.15); padding: 0.25rem; position: fixed; bottom: 0; left: 0; right: 0; display: flex; height: 3rem; box-sizing: border-box; backdrop-filter: blur(10px); } #input { border: none; padding: 0 1rem; flex-grow: 1; border-radius: 2rem; margin: 0.25rem; } #input:focus { outline: none; } #form > button { background: #333; border: none; padding: 0 1rem; margin: 0.25rem; border-radius: 3px; outline: none; color: #fff; } #messages { list-style-type: none; margin: 0; padding: 0; } #messages > li { padding: 0.5rem 1rem; } #messages > li:nth-child(odd) { background: #efefef; } </style> </head> <body> <ul id="messages"></ul> <form id="form" action=""> <input id="input" autocomplete="off" /><button>Send</button> </form> <script src="/socket.io/socket.io.js"></script> <script> var socket = io(); var messages = document.getElementById('messages'); var form = document.getElementById('form'); var input = document.getElementById('input'); form.addEventListener('submit', function(e) { e.preventDefault(); if (input.value) { socket.emit('chat message', input.value); input.value = ''; } }); socket.on('chat message', function(msg) { var item = document.createElement('li'); item.textContent = msg; messages.appendChild(item); window.scrollTo(0, document.body.scrollHeight); }); </script> </body> </html>

В разделе клиента мы должны включить библиотеку socket.io в html «<script src="/socket.io/socket.io.js"></script> ', чтобы socket.io заработал.

Затем мы инициализируем socket.io, используя var socket = io();. После инициализации мы можем использовать socket.io в нашем скрипте.

Мы добавляем прослушиватель событий, чтобы когда пользователь нажимал кнопку «Отправить сообщение» в форме, сообщение перехватывалось, а socket.io выдавал событие chat-message с его содержимым. Следующий блок кода использует socket's.io on() для прослушивания события chat-message и добавления его содержимого в html.

Окончательно

Пробег: node index.js

В браузере перейдите к: http:\\localhost:3000, чтобы посмотреть на ваше простое приложение для чата.

Первоначально опубликовано на https://www.bluedoa.com 9 декабря 2022 г.