Подробно разбираем JS-библиотеку Socket.IO для взаимодействия между серверами и клиентами в режиме реального времени и объясняем, при чем тут вообще веб-сокеты.
- Базовая концепция работы Socket.IO
- Несколько событий и обработчиков
- Отправка данных в рамках событий
- Двусторонняя связь
- Создание соединения Socket.IO
- Соединяем все вместе
Socket.IO — это библиотека JavaScript(Node.js), обеспечивающая двустороннюю связь между клиентами и серверами в режиме реального времени, которая построена на основе протокола WebSocket. Более подробно об этом протоколе читайте в нашей статье «Что такое веб-сокеты и как они вообще работают».
Базовая концепция работы Socket.IO
Базовая концепция, которую нам нужно понять при использовании Socket.io, основана на событиях, где:
- Одна из сторон (сервер или клиент) инициирует событие
- Другая сторона реагирует на это событие
Сервер
socket.emit('hello');
Клиент
socket.on('hello', () => {
console.log('hello world!');
});
Когда сервер инициирует событие hello, то его получит объект сокета на клиенте и отреагирует с помощью переданного в это событие колбека. В данном случае в консоль будет выведено сообщение сообщение hello world!.
Несколько событий и обработчиков
Мы можем создавать столько событий, сколько захотим. Кроме того, мы можем ловить их и реагировать на них по-разному.
Сервер
socket.emit('goodbye');
Клиент
socket.on('hello', () => {
console.log('hello world!');
});
socket.on('goodbye', () => {
console.log('goodbye world!');
});
В этом случае мы запускаем событие goodbye на нашем сервере, поэтому клиент поймает это событие и напечатает goodbye world! в консоли на клиенте.
Отправка данных в рамках событий
Иногда мы хотим не только запустить событие, но и отправить некоторую информацию клиенту. Для этого можно просто добавить объекты, которые мы хотим отправить, в качестве параметров для эмита, а потом получить их в нашей функции обратного вызова.
Сервер
const person = {name: 'Rene', age: 26};
socket.emit('person', person);
Клиент
socket.on('person', (person) => {
console.log(`${person.name} is ${person.age} years old`);
});
Двусторонняя связь
Socket.io позволяет использовать двустороннюю связь — то есть мы можем не только отправлять информацию с сервера на клиент, но и наоборот, отправлять с клиента на сервер.
Сервер
const person = {name: 'Rene', age: 26};
socket.emit('person', person);
socket.on('confirmation', () => {
console.log('The client received the person');
});
Клиент
socket.on('person', (person) => {
console.log(`${person.name} is ${person.age} years old`);
socket.emit('confirmation');
});
После того, как клиент получит данные, мы отправим событие confirmation внутри колбека, чтобы сообщить серверу, что клиент получил данные. То есть, мы можем генерировать события внутри обратных вызовов для других событий.
Читайте также: Наталия Давыдова, фронтенд-разработчица в «Точке»: как мое комьюнити помогает джунам найти работу
Создание соединения Socket.IO
На стороне сервера
Теперь, когда мы понимаем, как генерировать события, отправлять в них данные и реагировать на них, пришло время создать сокет между клиентом и сервером. На стороне нашего сервера (Node.js) нужно установить Socket.io с помощью менеджера пакетов пакетов npm:
npm install socket.io
Как только мы создали объект Socket.io и подключили его к http-серверу, нам нужно обрабатывать клиентские подключения. При клиентском соединении сервер будет генерировать событие connection. Это событие соединения может быть обработано объектом io для создания сокета.
const app = require('http').createServer(handler);
const io = require('socket.io')(app);
app.listen(80);
io.on('connection', (socket) => {
// здесь будет код
});
Каждый объект сокета представляет собой коммуникационный тоннель между клиентом и сервером. Поэтому каждый раз, когда клиент подключается к серверу, будет создаваться новый коммуникационный тоннель.
На стороне клиента
На стороне клиента нам также нужно установить Socket.io через npm:
npm install socket.io-client
или через cdn:
<script src="https://cdn.socket.io/4.6.0/socket.io.min.js"></script>
Как только мы это сделаем, можно будет создать новый сокет, подключившись к нашему собственному http-серверу с помощью объекта io (клиент):
<script>
const socket = io('http://localhost');
// далее используем socket
</script>
Соединяем все вместе
Теперь, когда у нас есть сокет и на сервере, и на клиенте, мы можем начать генерировать события, как делали это раньше.
Сервер
const app = require('http').createServer();
const io = require('socket.io')(app);
app.listen(80);
io.on('connection', (socket) => {
socket.on('message', (message) => {
console.log(message);
});
socket.emit('message','Hello, my name is Server');
});
Клиент
const socket = io('<http://localhost>');
socket.on('message', (message) => {
console.log(message);
});
socket.emit('message','Hello, my name is Client');
Вот и все! Мы успешно создали соединение Socket.io.
Эта статья — адаптированный перевод материала Quick guide to Socket.io basics, опубликованного в блоге сервиса Medium. Мнение редакции Хекслета может не совпадать с мнением автора.
Продолжайте учиться: На Хекслете есть несколько больших профессий, интенсивов и треков для джуниоров, мидлов и даже сеньоров: они позволят не только узнать новые технологии, но и прокачать уже существующие навыки
