Отличие сокета от вебсокета

Обновлено: 06.07.2024

В чем разница между socket.io и websockets в node.js?
Являются ли они одновременно технологиями push-сервера? Единственные различия, которые я чувствовал, были:

Просьба пояснить это.

Относительно того, почему веб-инспекторы не улавливают трафик: см. Как просмотреть содержимое запроса WS / WSS Websocket с помощью Firebug или другого? @treaz вам не нужен Firebug или что-то еще. Devtools в Chrome показывают WS-соединения на вкладке сети.

Socket.IO использует WebSockets, когда это возможно.

Его преимущества заключаются в том, что он упрощает использование WebSockets, как описано в № 2, и, вероятно, что более важно, он обеспечивает отказоустойчивость к другим протоколам в случае, если WebSockets не поддерживается в браузере или сервере. Я бы не стал использовать WebSockets напрямую, если вы не знакомы с тем, в каких средах они не работают, и вы можете обойти эти ограничения.

Это хорошо читается как в WebSockets, так и в Socket.IO.

Socket.IO не построен поверх WebSockets, он просто использует эту технологию, когда она доступна. Семантическая разница, и я объяснил это в остальной части ответа, но я обновил ответ, чтобы отразить это. @moka, из твоих слов я могу сделать вывод, что следующее утверждение неверно? Socket.IO - это больше, чем слой над WebSockets. @moka Месяц назад я бы с тобой согласился. Socket.io 1.0 уже вышел и получает обновления. Смотрите эту статью и ответ от @rsp. Возможно, вам больше не понадобится socket.io. @ Для того, чтобы запустить Socket.IO, вам все еще нужен Node.js, так что я думаю, что это будет проблемой на виртуальном хостинге.

Существует несколько распространенных заблуждений относительно WebSocket и Socket.IO:

Первое заблуждение состоит в том, что использование Socket.IO значительно проще, чем использование WebSocket, что, похоже, не так. См. Примеры ниже.

Второе заблуждение состоит в том, что WebSocket широко не поддерживается в браузерах. Подробнее см. Ниже.

Третье заблуждение состоит в том, что Socket.IO снижает соединение в качестве резервного в старых браузерах. Фактически предполагается, что браузер устарел и запускает соединение AJAX с сервером, которое впоследствии обновляется в браузерах, поддерживающих WebSocket, после обмена некоторым трафиком. Подробнее см. Ниже.

Я написал модуль npm, чтобы продемонстрировать разницу между WebSocket и Socket.IO:

Сравните пример на стороне сервера, используя WebSocket и Socket.IO, чтобы сделать то же самое в приложении Express.js:

Сервер WebSocket

Пример сервера WebSocket с использованием Express.js:

Сервер Socket.IO

Пример сервера Socket.IO с помощью Express.js:

Сравните клиентский пример использования WebSocket и Socket.IO, чтобы сделать то же самое в браузере:

Клиент WebSocket

Пример клиента WebSocket с использованием ванильного JavaScript:

Клиент Socket.IO

Пример клиента Socket.IO с использованием ванильного JavaScript:

Чтобы увидеть разницу в сетевом трафике, вы можете запустить мой тест. Вот результаты, которые я получил:

Результаты WebSocket

2 запроса, 1,50 КБ, 0,05 с

Из этих двух запросов:

Сама HTML-страница
обновление подключения к WebSocket

(Запрос обновления соединения виден в инструментах разработчика с ответом 101 "Ответы на переключение" ).

Результаты Socket.IO

6 запросов, 181,56 КБ, 0,25 с

Из этих 6 запросов:

сама страница HTML
Socket.IO JavaScript (180 килобайт)
запрос на длинный опрос AJAX
второй длинный запрос AJAX запроса
третий длинный запрос AJAX для опроса
обновление подключения к WebSocket

Скриншоты

Результаты WebSocket, которые я получил на localhost:

Результаты Socket.IO, которые я получил на localhost:

Проверьте себя

Откройте http://localhost:3001/ в своем браузере, откройте инструменты разработчика с помощью Shift + Ctrl + I, откройте вкладку "Сеть" и перезагрузите страницу с помощью Ctrl + R, чтобы увидеть сетевой трафик для версии WebSocket.

Откройте http://localhost:3002/ в своем браузере, откройте инструменты разработчика с помощью Shift + Ctrl + I, откройте вкладку "Сеть" и перезагрузите страницу с помощью Ctrl + R, чтобы увидеть сетевой трафик для версии Socket.IO.

По состоянию на июнь 2016 года WebSocket работает над всем, кроме Opera Mini, включая IE выше 9.

Это совместимость браузера WebSocket от Могу ли я использовать с июня 2016 года:

Веб-сокеты и 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.

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

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

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

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

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

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

Пишем код

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

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

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

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

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

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

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

WebSockets

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

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

WebSockets впервые появился в 2010 году в Google Chrome 4, а первый RFC (RFC 6455) был опубликован годом позже, в 2011 году. Отличными вариантами использования WebSockets являются:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Приложения для чата

Приложения на основе местоположения

и многое другое.

Socket.IO

Различия между WebSocket и Socket.IO

Основные преимущества Socket.IO перед WebSockets:

Прокси-серверы и балансировщики нагрузки затрудняют реализацию и масштабирование WebSockets. Socket.IO поддерживает эти технологии из коробки.

Как было сказано ранее, Socket.IO может использовать технологии, отличные от WebSockets, если клиент не поддерживает WebSockets.

Если (по какой-то причине) соединение WebSocket разрывается, оно не будет автоматически переподключаться… а Socket.IO сделает это за вас!

API Socket.IO созданы, чтобы с ними было проще работать.

Во-первых, в наши дни каждый современный браузер поддерживает WebSockets. Socket.IO использует гораздо больше шаблонного кода и ресурсов, чтобы использовать другие технологии. В большинстве случаев такой уровень поддержки вам не нужен. Даже с точки зрения сетевого трафика Socket.IO намного дороже. Фактически, с обычными WebSockets браузеру может потребоваться выполнить всего два запроса:

GET запрос страницы HTML

UPGRADE подключение к WebSocket

Вот и все. Вы готовы начать общение со своим сервером в реальном времени! А как насчет Socket.IO?

GET запрос страницы HTML

Клиентская библиотека Socket.IO (207кб)

Ajax-запрос с тремя длинными запросами

UPGRADE подключение к WebSocket

Есть даже npm пакет под названием websocket-vs-socket.io(см. здесь), который был создан для сравнения сетевого трафика этих двух технологий:

Сетевой трафик WebSocket:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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

Какая огромная разница!

Написание кода

До сих пор мы видели некоторые различия на бумаге, но чем они отличаются при написании приложения реального времени?

ws . on ( "message" , message = > broadcast ( ws . id , message ) ) ;

Реализуем сервер Socket.IO. Это было невероятно просто! Но Socket.IO обещает сделать это еще проще! Как нам реализовать тот же сервер с библиотекой Socket.IO?

Но есть проблема: вы не можете протестировать его на стандартном клиенте WebSocket (как мы видели в предыдущем примере). Это потому, что (как было сказано ранее) Socket.IO не использует простые WebSockets, а смешивает несколько технологий для поддержки как можно большего числа клиентов (и во избежание определенных проблем, как описано выше). Так как же это проверить?

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

Что нужно помнить

Как мы видели в начале, Socket.IO пытается решить множество проблем.

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

Производительность. Как мы уже говорили ранее, Socket.IO предоставляет несколько уровней абстракции над обычным транспортным уровнем WebSockets. Он также будет обеспечивать упаковку JSON для отправки реальных двоичных данных от клиента к серверу (и наоборот). Если вам когда-либо понадобится достичь такого уровня производительности, вам нужно будет настроить библиотеку Socket.IO, чтобы избежать этого конкретного поведения. С WebSockets у вас никогда не будет этой проблемы. Итак, что выбрать?

Автор: Michele Riva

Источник: itnext.io

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

JavaScript. Полное руководство

Изучите самый популярный язык разработки и станьте высокооплачиваемым профи

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

На вопрос, потому что изначально я планировал использовать Django в качестве основы для моего проекта, но в посте SO, на который я ссылался выше, стало ясно, что веб-сокеты невозможны (или, по крайней мере, не надежны, даже с чем-то вроде django-websockets ) с использованием предпочтительной настройки Django (Apache с mod_wsgi). Тем не менее, я нашел другие посты, которые случайно импортируют модуль сокета Python для чего-то такого же простого, как получение имени хоста сервера .

Они действительно разные?
Есть ли какая-либо причина не использовать Django для проекта, который основывается на установлении сокетных соединений с внешним сервером?

Чтобы ответить на ваши вопросы.

ХОРОШО. Я вижу . Так как я не могу удалить этот принятый ответ, я прошу вас отредактировать его с правильной информацией. Спасибо! @NiCkNewman это, наверное, хороший отдельный вопрос. Накладные расходы минимальны и не являются проблемой. Проблема с WebSockets для MMO-сетей является двоякой: это только клиентский сервер и TCP (на основе потоков). Для хорошей производительности сети MMO вам также необходимы прямые одноранговые сети и дейтаграммы (постоянная низкая задержка важнее, чем получение каждого пакета). Хорошая новость заключается в том, что WebRTC DataChannel обладает обоими этими свойствами, поэтому он начнет заполнять пробел и позволять полноценные игры AAA MMO в браузере.

Вам придется использовать WebSockets (или какой-либо аналогичный модуль протокола, например, поддерживаемый плагином Flash), потому что обычное приложение браузера просто не может открыть чистый сокет TCP.

Доступный Socket.IO модуль node.js может сильно помочь, но учтите, что он не является чистым модулем WebSocket сам по себе.

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

Некоторые фрагменты <Spring in Action 4>, цитируемые ниже, надеются, что они помогут вам лучше понять WebSocket.

В своей простейшей форме WebSocket - это просто канал связи между двумя приложениями (не обязательно задействован браузер) . Связь WebSocket может использоваться между любыми видами приложений , но наиболее распространенное использование WebSocket - это упрощение связи между серверное приложение и приложение на основе браузера.

Что касается вашего вопроса (б), имейте в виду, что спецификация Websocket не была завершена. Согласно W3C :

Разработчики должны знать, что эта спецификация не является стабильной.

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

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

Ключевые особенности WebSocket:

Схема протокола WebSocket:

Зачем нам нужен WebSocket:

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

Socket.IO:

Это библиотека, которая обеспечивает в режиме реального времени и полнодуплексную связь между клиентом и веб-серверами. Он использует протокол WebSocket для обеспечения интерфейса. Как правило, он разделен на две части: обе библиотеки WebSocket и Socket.io являются управляемыми событиями библиотеками.

Клиентская сторона: это библиотека, которая работает внутри браузера
Серверная сторона: это библиотека для Node.js

Ключевые особенности Socket.IO:

Это помогает в трансляции на несколько сокетов одновременно и прозрачно обрабатывает соединение.
Он работает на любой платформе, сервере или устройстве, обеспечивая равенство, надежность и скорость.
При необходимости он автоматически обновляет требование до WebSocket.
Это пользовательская реализация транспортного протокола реального времени поверх других протоколов.
Это требует использования обеих библиотек на стороне клиента, а также на стороне сервера.
IO работает на рабочих мероприятиях. Есть некоторые зарезервированные события, к которым можно получить доступ через сокет на стороне сервера, такие как Connect, message, Disconnect, Ping и Reconnect.
Существуют некоторые зарезервированные для клиента события, такие как «Соединение», «Ошибка соединения», «Тайм-аут соединения» и «Повторное соединение» и т. Д.

Зачем нам нужен Socket.IO:

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

Сравнение лицом к лицу между WebSocket и Socket.io (Инфографика)

Ниже приведены 5 лучших сравнений WebSocket и Socket.io:

Читайте также: