Разница между веб-сокетами и Socket.IO / Хабр

Доброго времени суток, друзья!

Веб-сокеты и Socket.IO, вероятно, являются двумя наиболее распространенными средствами коммуникации в режиме реального времени (далее — живое общение). Но чем они отличаются?

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

Веб-сокеты

Говоря о веб-сокетах, мы имеем ввиду протокол веб-коммуникации, представляющий полнодуплексный канал коммуникации поверх простого TCP-соединения. Проще говоря, эта технология позволяет установить связь между клиентом и сервером с минимальными затратами, позволяя создавать приложения, использующие все преимущества живого общения.

Например, представьте, что вы создаете чат: вам необходимо получать и отправлять данные как можно быстрее, верно? С этим прекрасно справляются веб-сокеты! Вы можете открыть TCP-соединение и держать его открытым сколько потребуется.

Веб-сокеты появились в 2010 году в Google Chrome 4, первый RFC (6455) опубликован в 2011.

Веб-сокеты используются в следующих случаях:

  • Чаты
  • Многопользовательские игры
  • Совместное редактирование
  • Социальные (новостные) ленты
  • Приложения, работающие на основе местоположения

и т.д.

Socket.IO

Socket.IO — библиотека JavaScript, основанная (написанная поверх) на веб-сокетах… и других технологиях. Она использует веб-сокеты, когда они доступны, или такие технологии, как Flash Socket, AJAX Long Polling, AJAX Multipart Stream, когда веб-сокеты недоступны. Легкой аналогией может служить сравнение Fetch API и Axios.

Разница между веб-сокетами и Socket.IO

Главными преимуществами Socket.IO является следующее:

  • В отличие от веб-сокетов, Socket.IO позволяет отправлять сообщения всем подключенным клиентам. Например, вы пишете чат и хотите уведомлять всех пользователей о подключении нового пользователя. Вы легко можете это реализовать с помощью одной операции. При использовании веб-сокетов, для реализации подобной задачи вам потребуется список подключенных клиентов и отправка сообщений по одному.
  • В веб-сокетах сложно использовать проксирование и балансировщики нагрузки. Socket.IO поддерживает эти технологии из коробки.
  • Как отмечалось ранее, Socket.IO поддерживает постепенную (изящную) деградацию.
  • Socket.IO поддерживает автоматическое переподключение при разрыве соединения.
  • С Socket.IO легче работать.

Может показаться, что Socket.IO — лучшее средство для живого общения. Однако существует несколько ситуаций, когда лучше использовать веб-сокеты.

Во-первых, веб-сокеты поддерживаются всеми современными браузерами. Поэтому вы редко нуждаетесь в поддержке других технологий, предоставляемой Socket. IO.

Если говорить о сетевом трафике, то веб-сокеты отправляют всего два запроса:

  • GET для получения HTML страницы
  • UPGRADE для соединения с веб-сокетами

Это позволяет установить соединение с сервером. А что насчет Socket.IO?

  • GET для получения HTML страницы
  • Клиентская библиотека Socket.IO (207кб)
  • Три long polling (длинные опросы) Ajax-запроса
  • UPGRADE для соединения с веб-сокетами

В мире JS 207кб — это много. Какое нерациональное использование сетевого трафика!

В npm существует пакет «websocket-vs-socket.io», который позволяет сравнить сетевой трафик этих технологий:

Сетевой трафик веб-сокетов:

Сетевой трафик Socket.IO:

Разница очевидна!

Пишем код


Простой сервер на веб-сокетах

В нашей программе на Node. js мы создадим сервер, работающий на порту 3001. При каждом подключении клиента мы будем присваивать ему уникальный ID. При отправке сообщения клиентом мы будем уведомлять его об успехе: [<client-id>]: <message>

const WebSocket = require('ws')
const UUID = require('uuid')
const wss = new WebSocket.Server({ port: 3001 })
wss.on('connection', ws => {
  ws.id = UUID()
  ws.on('message', message => {
    ws.send(`[${ws.id}]: ${message}`)
  })
})

Отлично! Но что если мы хотим рассылать сообщение каждому подключенному клиенту? Веб-сокеты не поддерживают рассылку по умолчанию. Это можно реализовать следующим образом:

const WebSocket = require("ws")
const UUID      = require("uuid")
const wss       = new WebSocket.Server({ port: 3001 })
function broadcast(clientId, message) {
  wss.clients.forEach(client => {
    if(client.readyState === WebSocket.OPEN) {
      client.send(`[${clientId}]: ${message}`)
    }
  })
}
wss.
 
 on('conection', ws => {
  ws.id = UUID()
  ws.on('message', message => broadcast(ws.id, message))
})

Легко и просто! Как видите, WebSocket.Server хранит записи о каждом подключенном клиенте, поэтому мы можем сделать итерацию и отправить сообщение каждому. Вы можете протестировать код на компьютере (MacOS) или в браузере (Chrome).

Простой сервер на Socket.IO

Это было не сложно. Может ли Socket.IO сделать это еще проще? Как нам написать такой же сервер на Socket.IO?

const io = require('socket.io')
const server = io.listen(3002)
server.on('connection', socket => {
  socket.on('message', message => {
    socket.emit(`[${socket.id}]: ${message}`)
    socket.broadcast.emit(`[${socket.id}]: ${message}`)
  })
})

Код получился почти наполовину короче! Как видите, метод «broadcast» не отправляет уведомление отправителю, поэтому мы вынуждены делать это вручную.

Существует проблема: код нельзя протестировать на обычном клиенте веб-сокетов. Это связано с тем, что, как отмечалось ранее, Socket.IO использует не чистые веб-сокеты, а множество технологий для поддержки всех возможных клиентов. Так как же нам проверить его работоспособность?

// head
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/socket.io.slim.js"></script>
// body
<script>
  ioClient = io.connect('http://localhost:3002')
  ioClient.on('connect', socket => {
    ioClient.send('hello world')
    ioClient.on('message', msg => console.log(msg))
  })
</script>

Необходимо использовать специальный клиент. В приведенном примере мы загружаем его из CDN. Этот клиент позволяет нам провести быстрые (грязные) тесты в браузере.

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

На заметку

Горизонтальное масштабирование. Допустим, ваш чат обрел популярность и вам необходимо добавить еще один сервер и балансировщик нагрузки для обработки запросов. Ну, если вы открываете соединение на «server 1», затем балансировщик переключает вас на «server 2», вы получите ошибку: «Error during WebSocket handshake: Unexpected response code: 400». Socket.IO решает эту проблему с помощью cookie (или с помощью маршрутизации соединений на основе исходных адресов), а у веб-сокетов не существует подобного механизма.

Производительность. Как отмечалось ранее, Socket.IO предоставляет несколько абстрактных уровней над транспортным уровнем веб-сокетов. Также здесь используется упаковывание данных в формат JSON, так что возможность отправлять на сервер (и наоборот) бинарные данные отсутствует.
Если вам необходим такой функционал, придется «поколдовать» над кодом библиотеки с целью обеспечения нужного поведения. С веб-сокетами таких проблем не возникает.

Так что же выбрать?

Решать вам.

Socket.IO облегчает жизнь, вам не нужно заботиться о проблемах, связанных с балансировкой нагрузки, разрывом соединений или рассылкой сообщений… но необходим ли вам такой функционал? Клиентская библиотека Socket.IO весит больше, чем пакеты React, Redux и React-Redux вместе взятые. Уверены ли вы, что не можете ограничиться веб-сокетами?

Еще одной важной вещью, о которой следует помнить, является то, что при использовании Socket.IO на стороне сервера, большая часть кода будет написана на абстракциях, предоставляемых этой библиотекой. Если у вас возникнет необходимость переписать Node.js-микросервисы на Go, Elixir, Java или другой язык программирования, вам придется переписывать почти всю логику. Например, для рассылки сообщений в Socket.

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

Благодарю за внимание.

Как работает JavaScript: понимание WebSockets в Nodejs с помощью Socket.io | by Lawrence Eagles

Это пост №72 из серии, посвященной изучению JavaScript и его строительных компонентов. В процессе определения и описания основных элементов мы также поделимся некоторыми практическими правилами, которые мы используем при создании SessionStack, приложения JavaScript, которое должно быть надежным и высокопроизводительным, чтобы помочь компаниям оптимизировать цифровой опыт своих пользователей.

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

Первым шагом WebSocket является отправка клиентом HTTP-запроса на сервер с просьбой открыть соединение. И если сервер соглашается, он отправит ответ 101 Switching Protocols , после чего рукопожатие будет завершено. Таким образом, соединение TCP/IP остается открытым, что обеспечивает двунаправленный поток данных между сервером и клиентом с очень низкой задержкой.

API WebSockets позволяет нескольким клиентам одновременно подключаться к серверу. И это соединение остается открытым до тех пор, пока одна из сторон не отключится.

Типичным приложением WebSockets API является приложение чата, и на изображении ниже показано, как это может работать:

На изображении выше каждый клиент — пользовательский браузер подключается через веб-сокет к серверу приложения чата. Поэтому, когда пользователь вводит сообщение и нажимает «Отправить», сообщение отправляется на сервер через соединение WebSocket. А сервер, в свою очередь, отправляет сообщение по веб-сокетам всем клиентам. Следовательно, они получают уведомление и видят сообщение. Здесь следует отметить, что эти сообщения осуществляются в режиме реального времени. А это означает, что никаких дополнительных запросов пользователя или Ajax-запросов не делается в любое время.

API WebSockets позволяет нам создавать функции в реальном времени, устанавливая двустороннее соединение — через сокет между клиентом и сервером. Таким образом, WebSockets имеет множество приложений в программировании, в том числе:

  • Приложение для чата
  • Многопользовательские браузерные игры
  • Потоковые приложения
  • Программное обеспечение для совместного редактирования кода
  • Живой текст для спортивных/новостных веб-сайтов с несколькими пользователями.
  • Онлайн-приложения для рисования холста

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

Чтобы следовать этой статье, требуется следующее:

  • Базовые знания Nodejs
  • На вашем компьютере должна быть установлена ​​последняя версия Nodejs.
  • Базовые знания JavaScript

Итак, чтобы использовать WebSockets API, нам нужен серверный код. И чтобы получить это, мы создадим приложение Nodejs.

Выполните следующие действия, чтобы загрузить приложение Nodejs:

  • Создайте папку приложения и из папки инициализируйте приложение Nodejs, запустив на своем терминале следующий код:

npm init -y

  • необходимые пакеты, запустив:

npm install express socket.io

И установите dev-зависимости, запустив:

npm install -D nodemon

  • Настройте сценарии NPM, обновив свойство scripts в файле package.json , как показано ниже:
  • Теперь настройте экспресс-сервер, создав папку src в корневом каталоге. И в папке src создайте файл index.js со следующим кодом:

В приведенном выше коде мы обслуживаем статический файл HTML — файл index.html , используя res.SendFile . метод. Поэтому всякий раз, когда пользователь указывает браузеру http://localhost:5000/ , файл index.html отображается в браузере. И мы создадим этот файл index.html в следующем разделе.

Кроме того, в приведенном выше коде мы настроили экспресс-сервер и реализовали socket.IO на сервере. И мы узнаем об этом больше в следующем разделе.

А пока запустите dev-сервер, запустив npm run dev , и мы получим:

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

Чтобы установить сокетное соединение между браузером и нашим приложением Nodejs, мы будем использовать библиотеку с именем Socket.IO .

Библиотека Socket. IO используется путем ее установки как на клиенте, так и на сервере. И он обеспечивает сокетное соединение между клиентом и сервером — таким образом, он обеспечивает двунаправленную связь на основе событий в реальном времени между сервером и клиентом.

Настройка Socket.IO на сервере

В нашей текущей настройке приложения мы реализовали Socket.IO на сервере, используя http.createSever метод из экспресс.

Когда клиент устанавливает соединение с Socket.IO на сервере, запускается событие, называемое соединением . И в нашей текущей настройке Socket.IO прослушивает это событие, используя метод socket.on .

И когда срабатывает событие connection , мы вызываем обратный вызов и записываем сделанное подключение сокета и сокет ID к консоли.

Эта функция обратного вызова принимает 9Объект сокета 0007 в качестве аргумента. И этот объект сокета относится к экземпляру сокета , созданному между клиентом и сервером. Таким образом, если к серверу подключаются десять разных клиентов, каждый клиент будет иметь свой экземпляр сокета .

Настройка Socket.IO на клиенте

Чтобы настроить Socket.IO на клиенте, создайте общедоступную папку в корневом каталоге. И в папке public создайте файл index.html со следующим кодом:

И в браузере получаем:

Теперь нужно настроить Socket.IO. Добавьте эту строку кода в раздел заголовка файла index.html , чтобы загрузить socket.io-client :

Приведенная выше строка кода предоставляет глобальную переменную io , конечную точку GET /socket.io/socket.io.js , а затем подключается.

Теперь нужно проверить socket.io-client был успешно загружен, над закрывающим тегом body добавьте следующий код:

И обновите браузер. Мы получаем:

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

Кроме того, в будущем наш код JavaScript на стороне клиента будет написан в этих тегах script над корпус элемент.

Отправка сообщений с помощью Socket.IO

В предыдущих подразделах мы настроили Socket.IO на клиенте и сервере. Но в этом разделе мы будем работать над отправкой сообщений через сокеты.

В нашем приложении чата, когда мы отправляем данные — сообщение чата из браузера через сокет на сервер, сервер получает это сообщение и отправляет данные — сообщение всем клиентам, которые к нему подключены.

Таким образом, чтобы обработать это, когда пользователь нажимает кнопку отправки, мы будем передавать событие от клиента на сервер через созданный сокет.

Чтобы реализовать это, нам нужно получить все необходимые элементы DOM, добавив следующий код под комментарием // Query DOM в скриптах index.html :

Далее мы добавляем прослушиватель событий к отправке кнопку для прослушивания событий . Нажмите , добавив следующий код под комментарием // Выдавать события в сценариях index.html :

В приведенном выше коде мы добавили прослушиватель событий к кнопке отправки для прослушивания клик событие. И когда происходит событие click , в обратном вызове обработчика событий вызывается socket.emit .

Метод socket.emit принимает два аргумента: имя сообщения — в данном случае chat и объект, содержащий сообщение или данные, которые мы отправляем на сервер.

Итак, на сервере мы добавим прослушиватель событий для прослушивания этого отправленного события. И для этого измените метод io. on в index.js , как показано ниже:

В приведенном выше коде мы прослушиваем сокет для отправки сообщения чата , вызывая метод socket.on . А метод socket.on принимает два аргумента: сообщение чата и обработчик события — callback.

Теперь мы вызвали метод io.sockets.emit в функции обратного вызова, чтобы отправить это сообщение всем клиентам, подключенным к серверу через WebSocket. И это позволяет всем в чате видеть сообщение.

Примечание. io.sockets относится ко всем веб-сокетам, созданным различными клиентами, подключенными к серверу. А io.sockets.emit(‘chat’, data) отправляет сообщение — данные от клиента, отправившего сообщение, всем подключенным клиентам — в коллекции io.sockets .

Теперь с нашей текущей настройкой пользователь может отправить сообщение с клиента на наш сервер. И сервер, получив сообщение, отправляет сообщение чата обратно во все сокеты в 9Коллекция 0007 io. sockets . Таким образом, отправив сообщение всем подключенным клиентам.

После этого на стороне клиента нам нужен способ отображения полученного сообщения в браузере. Поэтому добавьте следующий код под комментарием // Прослушивать события в разделе сценария в файле index.html :

В приведенном выше коде socket.on прослушивает сообщение чата и вызывает callback — обработчик события при получении сообщения чата. А в обработчик события мы добавили код, который отрисовывает сообщение на сервер.

Теперь у нас есть основные функции чата. Мы можем передавать данные от клиента на сервер и обратно с сервера всем клиентам, подключенным через WebSocket.

Широковещательные сообщения

В этом разделе мы будем использовать широковещательную рассылку сообщений для уведомления других клиентов, когда пользователь набирает сообщение. И чтобы реализовать это, добавьте следующий код под комментарием // Широковещательная обратная связь, когда пользователь вводит комментарий :

В приведенном выше коде мы добавляем прослушиватель событий, который прослушивает нажатие клавиши событие сообщения ввод элемента. И когда это событие срабатывает, мы генерируем событие typing из обработчика событий, вызывая socket.emit — передавая имя пользователя в качестве данных.

Теперь нам нужно обработать это событие ввода на сервере и для этого изменить метод io.connection в файле index.js , как показано ниже:

В приведенном выше коде мы прослушиваем розетка для тип событие. И как только это событие происходит, мы транслируем это событие, вызывая socket.broadcast.emit . Это генерирует событие , печатающее , и отправляет полученные данные всем подключенным клиентам, кроме клиента, отправившего сообщение.

Нам снова нужно обработать это широковещательное сообщение на стороне клиента. И для этого добавьте следующий код после // Прослушивание ввода сообщения в комментарии index.html :

Из приведенного выше кода каждый клиент прослушивает свой сокет для ввод события .

Наконец, обновите очистку обратной связи , когда пользователь завершит ввод и нажмет «Отправить». Для этого измените метод socket.on под комментарием // Прослушивание событий , как показано ниже:

Теперь после запуска события typing выводится сообщение, показывающее, что пользователь печатает, как показано ниже. :

В этой статье мы узнали об API WebSocket — технологии, обеспечивающей двунаправленный поток данных между сервером и клиентом с малой задержкой.

И мы работали с библиотекой Socket.IO, библиотекой JavaScript, которая упрощает настройку WebSockets на клиенте и сервере.

Если вас интересует исходный код созданного нами приложения чата, вы можете клонировать репозиторий на Github здесь.

Наконец, я надеюсь, что после этого урока вы узнали достаточно, чтобы использовать WebSockets в своем приложении.

Веб-сокеты в JavaScript очень полезны, поскольку они более эффективны, чем опрос сервера для получения данных. Но чтобы правильно использовать WebSocket API и получить эффективный результат, вам нужно понять, как реализовать WebSockets с помощью lSocket.IO API или альтернативной библиотеки Websocket, такой как WS.

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

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

Комбинируя эту визуальную информацию со всеми техническими данными из браузера, такими как ошибки, трассировка стека, сетевые проблемы, данные отладки и т. д., вы можете легко понять проблемные области в вашем продукте и эффективно решить их.

Существует бесплатная пробная версия, если вы хотите попробовать SessionStack.

SessionStack воспроизводит сеанс

Хотите узнать больше о JavaScript? Ознакомьтесь со всеми публикациями «Как работает JavaScript» здесь.

Как создать чат-приложение с помощью Socket.io и Node.js

Готовое чат-приложение

‍

Socket.io — это библиотека JavaScript, которая обеспечивает связь между клиентами и серверами в режиме реального времени. Он построен на основе Websockets API. Наиболее распространенными вариантами использования Websockets и socket.io являются приложения чата или каналы социальных сетей, в которых страница пользователя получает сообщения или сообщения от других пользователей без необходимости обновления страницы пользователем. Если вы хотите узнать о веб-сокетах, посмотрите это короткое видео, чтобы понять основные концепции.

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

Настройка веб-сервера

Сервер отвечает за обслуживание файлов HTML, CSS и JS, запуск соединения Socket.io, а также получение и трансляцию событий клиентам.

Для начала вам нужно настроить новый проект с помощью команды npm init

Для начала нам нужно создать веб-сервер, который будет обслуживать файлы HTML, CSS и JavaScript для наших клиентов. Для этого мы будем использовать встроенный в Node модуль http . Мы создадим файл с именем server.js и включим в него следующий код:

Приведенный выше код запускает сервер, который обрабатывает запросы и обслуживает файлы, содержащиеся в папке с именем client.

Теперь создайте клиентскую папку с файлом index.html внутри нее со следующим содержимым:

Запустите npm start и откройте http://localhost:3000 в браузере, чтобы увидеть индексную страницу.

Инициализация Socket.io

Наш базовый веб-сервер работает и обслуживает файлы HTML (мы немного позаботимся об обслуживании файлов JavaScript и CSS), так что теперь мы можем начать работу над нашим приложением. Установите socket.io, запустив npm i socket.io , а затем отредактируйте содержимое server.js, включив в него следующий код:

Этот код:

  • Импортирует socket.io и прикрепляет его к нашему серверу приложений
  • С помощью функции io.on(‘connection) мы обнаруживаем новое соединение и регистрируем сообщение в консоли, включая объект сокета, который будет содержать некоторую информацию от клиента.

Теперь нам нужно изменить наш документ index.html, чтобы загрузить библиотеку socket.io из CDN, а также загрузить файл chat.js, который мы собираемся создать в клиентской папке нашего сервера:

В chat.js мы добавим весь код для генерации и обработки событий для нашего чата. На данный момент у него будет просто следующий код, который подключает клиента к экземпляру Socket.io, работающему на хосте, который обслуживал страницу (наш сервер):

Если мы проверим это, мы увидим, что страница загружает оба файла JavaScript, а в консоли нашего сервера мы увидим «👾 Новый сокет подключен!» сообщение.

Если мы откроем несколько вкладок/окон, мы увидим несколько сообщений в консоли нашего сервера.

Создание приложения

Теперь, когда наш экземпляр Socket.io запущен на сервере и наш клиент (страница) подключен к нему, пришло время двигаться дальше и начать создавать наше приложение

Хранение подключенных клиентов

Начнем с сохранения информации о каждом клиенте, подключенном к нашему серверу. Чтобы идентифицировать каждого клиента, мы попросим пользователей ввести свое имя в подсказке и, кроме того, мы сохраним их идентификатор сокета. Измените файл chat.js следующим образом:

Мы используем метод prompt() для запроса имени пользователя. С помощью socket.emit() мы отправляем (отправляем сообщение) на наш сервер. Первый параметр — это имя события, а второй параметр — это данные, которые мы отправляем, в данном случае просто имя пользователя. Использование socket.on() мы фиксируем события, отправляемые с сервера клиентам.

На нашем сервере мы должны зафиксировать событие следующим образом:

Как видите, мы добавили объект пользователей, в котором мы будем хранить всех подключенных пользователей. Для захвата события, отправленного клиентом, мы используем метод socket.on() , который получает данные, отправленные клиентом, содержащие имя пользователя. После сохранения сведений о пользователе мы отправляем другое событие, на этот раз от сервера к клиенту с приветственным сообщением.

Наиболее часто используемые функции при работе с Socket.io: socket.emit(eventName, data) и socket.on(eventName, data) для отправки и захвата событий как на сервере, так и на клиентах. Как правило, просто не забудьте иметь функцию socket.on() для каждого события, которое вы отправляете с помощью socket.emit()

Обработка сообщений чата

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

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

Переходя к нашему файлу chat.js, мы создадим вспомогательную функцию addMessage() для добавления сообщений в chatContainer и вызовем ее сразу после получения приветственное сообщение событие с сервера.

Эта функция получит объект данных , который будет содержать имя пользователя и само сообщение, а также флаг isSelf , указывающий, является ли сообщение нашим. Мы будем использовать этот второй параметр, чтобы выбрать другой стиль для отображения сообщения. Вот как это будет выглядеть:

Следующим шагом будет отправка сообщений от клиента и их широковещательная рассылка всем остальным клиентам. Нам нужно добавить прослушиватель событий в нашу кнопку отправки и, как мы делали раньше, использовать кнопку 9.0371 socket.emit() в клиенте для отправки сообщения на наш сервер. Мы также добавим еще один обработчик событий для широковещательного сообщения , который мы будем отправлять с сервера, когда другие клиенты отправляют сообщение:

Как видите, мы вызываем функцию addMessage для добавления нашего собственного сообщения. в контейнер чата без участия нашего сервера.

На сервере нам нужно перехватить событие new-message с помощью метода socket.on() и передать широковещательное сообщение событие:


Обратите внимание, что когда сервер получает событие новое сообщение , теперь мы используем socket.broadcast.emit() вместо простого socket.

No related posts.