Чудесный мир веб-сокетов
Веб-сокеты ... Почему я должен их использовать? Какую проблему они решают? Эти вопросы, помимо того, как их использовать, находятся в рамках этого сообщения в блоге. Так что, если вам интересно, продолжайте читать, если нет, не обижайтесь… щелкните меня :-) ← щелкните в любом случае…
Вам следует использовать веб-сокеты, потому что «я так говорю». Уф, на этот вопрос было легче ответить, чем я изначально ожидал. Думаю, на последний вопрос будет сложнее ответить ;-)
Пора стать серьезным. Какую проблему решают веб-сокеты? Веб-сокеты предоставляют протокол, который позволяет клиенту получать информацию с сервера через 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); });
Если вы находите этот контент чем-то полезным, не стесняйтесь, хлопните мне в ладоши :-) Спасибо!
Вот и все! Поздравляю, вы только что реализовали веб-сокеты! Конечно, сейчас мы просто записываем сообщение, которое приходит с сервера на консоль; когда на самом деле, мы должны передавать сообщение на доску сообщений. Но это выходит за рамки этого сообщения. Важный вывод: клиенту не нужно запрашивать новую информацию; скорее, информация отправляется сервером по мере того, как она становится доступной.
Я надеюсь, что у вас есть возможность, если вы еще не сделали этого, попробовать веб-сокеты в своем следующем проекте. Они действительно помогают нам (то есть программистам) в нашем стремлении обеспечить отличный пользовательский интерфейс для всех, кто использует наше программное обеспечение!