Чудесный мир веб-сокетов

Веб-сокеты ... Почему я должен их использовать? Какую проблему они решают? Эти вопросы, помимо того, как их использовать, находятся в рамках этого сообщения в блоге. Так что, если вам интересно, продолжайте читать, если нет, не обижайтесь… щелкните меня :-) ← щелкните в любом случае…

Вам следует использовать веб-сокеты, потому что «я так говорю». Уф, на этот вопрос было легче ответить, чем я изначально ожидал. Думаю, на последний вопрос будет сложнее ответить ;-)

Пора стать серьезным. Какую проблему решают веб-сокеты? Веб-сокеты предоставляют протокол, который позволяет клиенту получать информацию с сервера через push-уведомления сервера после того, как было установлено начальное соединение. Обычно при использовании HTTP клиент отправляет запрос на сервер, сервер отправляет ответ, а затем соединение разрывается. Однако, используя протокол веб-сокетов, соединение может сохраняться столько, сколько необходимо.

Давайте напишем небольшой код, показывающий, как использовать веб-сокеты, и, возможно, станет ясно, ПОЧЕМУ (если это еще не прозрачно).

Используя npm, мы можем установить socket.io-client и socket.io через терминал с помощью следующих команд.

npm i socket.io socket.io-client

Теперь, когда у нас есть сервер сокетов и клиент, предположительно доступные в нашем каталоге node_modules, мы можем потребовать и импортировать их, соответственно, для использования.

Сначала займемся настройкой сокетов на сервере (с помощью Express Framework).

const app = require('express')();
const server = app.listen(3000, function() {
  console.log('listening on port 3000');
});
const io = require('socket.io')(server);

io.on('connection', (socket) => {
  console.log('socket connection made to socket ', socket.id);
});

На данный момент мы успешно настроили серверные сокеты, но они действительно не делают ничего интересного, просто пока ... Они просто регистрируют сообщение каждый раз, когда создается уникальное соединение сокета.

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

app.post('/message', function (req, res) {
   const message = req.body;
   //  put message in database
   database.add(message);
   // send message out to all sockets (not the use of io)
   io.sockets.emit('topicCreated', {message});
});

Теперь у нас есть сервер, который готов принимать сообщения и обновляет все клиентские компьютеры новым сообщением. Следующим шагом является установка сокет-соединения на клиенте.

import io from 'socket.io-client';
socket.on('connect_error', function(err) {
  console.log('error connecting to server');
});

socket.on('topicCreated', ({message}) => { 
  console.log(message);
});

Если вы находите этот контент чем-то полезным, не стесняйтесь, хлопните мне в ладоши :-) Спасибо!

Вот и все! Поздравляю, вы только что реализовали веб-сокеты! Конечно, сейчас мы просто записываем сообщение, которое приходит с сервера на консоль; когда на самом деле, мы должны передавать сообщение на доску сообщений. Но это выходит за рамки этого сообщения. Важный вывод: клиенту не нужно запрашивать новую информацию; скорее, информация отправляется сервером по мере того, как она становится доступной.

Я надеюсь, что у вас есть возможность, если вы еще не сделали этого, попробовать веб-сокеты в своем следующем проекте. Они действительно помогают нам (то есть программистам) в нашем стремлении обеспечить отличный пользовательский интерфейс для всех, кто использует наше программное обеспечение!