Представьте, что вы хотите создать функцию для своего веб-сайта, скажем, приемник уведомлений; вы хотите, чтобы это было средство отображения уведомлений в реальном времени, чтобы новые уведомления отображались сразу после их получения.
Есть несколько способов развить эту функцию, например:
- AJAX-запросы внутри цикла тайм-аута
- SSE, события, отправленные сервером
- Веб-сокеты
Я бы не рекомендовал использовать запросы к серверу из-за сложности и их веса в долгосрочной перспективе. Отправленные сервером события — очень интересный и простой способ получения данных, если вам не нужно отправлять данные обратно. Теперь WebSockets предоставляют канал, который можно использовать для получения и отправки данных на протяжении всего времени существования соединения.
Что ж, давайте реализуем простую коммуникацию с помощью WebSockets. Мы делаем это с помощью nodeJS, поэтому нам понадобится:
- Пакеты npm: экспресс [1] и socket.io [2]
Во-первых, нам нужно импортировать некоторые зависимости и запустить наш сервер, примерно так:
По сути, мы импортируем библиотеку утилит пути, библиотеку socket.io, создаем наш экспресс-экземпляр и что-то под названием alerts.js, что станет более понятным через мгновение. Затем мы определяем маршрут получения, который будет отправлять HTML клиенту. Наконец, мы запускаем наш сервер.
Теперь нам нужно создать соединение с сокетом. У нас уже запущено приложение узла, можем ли мы использовать его для подключения нашего сокета? Да, мы можем и будем!
Здесь мы вызываем socketIO и передаем ему экземпляр сервера, чтобы он мог использовать одну и ту же базовую конечную точку. Затем у нас есть функция, которая будет вызываться каждые 2,5 секунды, рекурсивный тайм-аут, если хотите. У нас вызывается функция emit, но что она делает? По сути, он отправляет событие (в данном случае «предупреждение») всем, кто его слушает. Итак, мы испускаем что-то, чтобы клиент мог обработать полученное сообщение, довольно быстро. В конце кода имеем:
- on(‘connection’), который срабатывает при установлении нового подключения
- on(‘ack’), который срабатывает, когда что-то/кто-то инициирует событие «ack». Обратите внимание, что этот прослушиватель находится внутри события «connection». Это связано с тем, что нам нужно регистрировать новых слушателей для каждого устанавливаемого соединения.
У нас также есть внутри функции некоторая логика индекса для итерации в нашем массиве предупреждений, который содержит содержимое наших уведомлений. Следующее:
И последнее, но не менее важное: у нас есть HTML-код, который будет подключаться к нашему сокету и отображать уведомления по мере их поступления.
Пакет socket.io предоставляет нам URL-адрес, который мы можем использовать для подключения к сокету. По умолчанию это будет ваш host:port/socket.io/socket.io.js, но вы можете манипулировать им, используя правильные параметры при создании сокета, вы можете проверить это здесь [ 3]. Теперь давайте посмотрим, как он работает!
node index.js
И вы должны увидеть что-то вроде:
Предупреждения будут появляться каждые 2,5 секунды, чередуясь между типами. Вот он, ваш первый проект WebSocket. Обратите внимание, что на сервере мы получаем сообщение под названием «ack», поэтому вы можете видеть, что способ отправки сообщений туда и обратно одинаков.
Надеюсь, вам понравилось, мне точно понравилось. Ожидайте писать снова очень скоро, увидимся позже!
Ссылки
[1] https://www.npmjs.com/package/express
