WebSocket — HackerX

Node.js, Socket.io и Express: Создание чата с нуля. Часть 1

Воскан Восканян — Sun, 30 Jul 2017 17:31:09 +0000

В этом уроке мы подробно рассмотрим функционал библиотеки Socket.io и напишем чат с помощью сокетах, Node.js и Express Framework.

Последние время WebSockets стали довольно популярный, появились очень многие приложение, игры и сайты, которые используют Веб-Сокеты. Но несмотря на это, есть проблемы с браузерами — все новые браузеры поддерживают протокол WS, но как быть с старыми браузерами? Если бы мы писали чистый код (не используя библиотеку), то для решение этой проблемы нам нужно было писать некоторые условия и костыли. Но если мы будем использовать библиотеку Socket.io, то данная проблема для нас не актуален.

Знакомство с Socket.io — Что это такое

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

WebSocket
Adobe Flash Socket
Server-Sent Events
XHR long polling
XHR multipart streaming
Forever Iframe
JSONP Polling
ActiveX HTMLFile

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

Создание сокет-сервера на Socket.io

Давайте начнем создать простой сокет-сервер на библиотеке Socket.io, Node.js и Express framework. Для этого нам нужно создать папку для проекта, открыть терминал / командную строку, перейти в папку. После этого в папке создаем файл package.json с таким содержанием:

{
  "name": "socket",
  "version": "0.0.1",
  "description": "Мой первый проект на Socket.io",
  "dependencies": {}
}

После этого нужно установить Express фреймворк и библиотеку Socket.io.

npm install --save express
npm install --save socket.io

После установки необходимых библиотек нужно создать файл server.js, который будет сервером. Наш сервер будет состоять из нескольких строк кода.

const app  = require('express')();
const http = require('http').Server(app);
const io   = require('socket.io')(http);

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', (socket) => {
  socket.emit("hello", "Привет из Сокет-сервера");
});

http.listen(3000, () => {
  console.log('Сервер слушает порт 3000');
});

В первых трех строках кода мы подключаем необходимые модули — Express Framework, HTTP, Socket.io. Далее устанавливаем обработчик — при запросе на главную страницу мы отправим клиенту содержимое файла index.html. После этого устанавливаем новый обработчик (9 строка кода) — если клиент подключиться к Веб-Сокет серверу, то будет вызван функция обратного вызова и в переменную socket будут данные клиента. Десятом строке мы сообщаем клиенту, что должна выполнена события с названием hello, который находится на стороне клиента и отправляем сообщения, который клиент получить в виде параметра функцию обратного вызова.

Наш сервер готов, давайте создадим клиент. Создаем в папке файл index.html с таким содержанием:




  
  Socket.io

Здесь мы подключаем библиотеку socket.io — почему у нас нет файла socket.io.js а он подключается — более подробно об этом поговорим потом. После подключение библиотеки, на стороне клиента нам будет доступна функция io(). После вызова, функции в переменную socket получить объект, который имеет несколько методов и объектов. Один из методов — это on(). С помощью этого метода мы устанавливаем событие. Первым параметром он принимает имя а вторым callback функцию. Из сервера мы можем вызвать событию с помощью метода emit().

Более подробно можно прочитать здесь — События в Node.js.

Наш Сокет-Сервер и клиент готов, можно запустить и тестировать. Вводим в терминале следующую команду:

npm start

Открываем в браузере этот адрес: http://localhost:3000. После этого, в браузере мы увидим сообщение с сервера.

У нас уже есть Сокет-Сервер, который создан с помощью Socket.io, Node.js и Express. В второй части этой статьи мы на базе этого сервера создадим чат. Весь список уроков Node.js представлен на этом странице.

The post Node.js, Socket.io и Express: Создание чата с нуля. Часть 1 appeared first on HackerX.

Что такое WebSocket. Что лучше — Веб-сокеты или AJAX?

Воскан Восканян — Sun, 30 Jul 2017 09:40:07 +0000

WebSocket (Веб-сокет) — это протокол полнодуплексной связи поверх TCP-соединения. То есть с помощью этого протокола можно передавать и принимать сообщение одновременно. Он позволяет в режиме реального времени обмениваться сообщениями между браузером и сервером.

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

Браузер — веб-сервер. Как это работает и что нужно менять?

Для веб-разработчиков всегда было проблемой получение реакции браузера на события, который происходит на сервере. HTTP-протокол имеет некие недостатки, и его, наверное, критиковали все разработчики. Один из таких недостатков — это проблема постоянного соединения с сервером. Реализация HTTP-протокола не предполагала подобного рода взаимодействия. Например, если мы хотим получить данные с сервера в браузер, то нужно сделать очередной запрос к серверу, и это предполагает перезагрузку страницы. То есть, если открыли сайт в браузере, загрузили страницу, просмотрели, и к этому времени на сервере изменилось данная страница, то нам нужно перезагрузить страницу, чтобы получить изменение.

Есть довольно большое количество задач, где нам нужно получить асинхронность используя HTTP-протокол. То есть, если на сервер будут изменение, то нужно получить эти изменение в браузере, без перезагрузки. Один из таких примеров — это чат, где люди общаются, и когда один другому отправляет сообщения, то сообщения видна получателю моментально, без перезагрузки страницы. Раньше, создание такого вида приложение было нелегко, находились разные степени интерпретации, которые имитировали push-действия сервера. Один из таких примеров — это организованные на клиенте фреймов, которые перезагружаются раз в секунду и отправляют запросы на сервер.

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

А теперь давайте поговорим об AJAX. Когда объект XMLHTTPRequest появилось в браузерах, положение немного улучшилось. В данном случае мы можем взаимодействовать с сервером по схеме Long Polling. Ниже по пунктам описан суть данной схемы:

Клиент (браузер) отправляет запрос на сервер,
Соединение не закрывается и клиент ожидает наступления события,
Когда события происходит клиент получает ответ на свой запрос,
Клиент тут же отправляет новый запрос.

С помощью этого подхода мы получаем асинхронные запросы к серверу, а ответы обрабатываются с помощью функциями обратного вызова. Но и этот подход имеет некоторые недостатки. Главный недостаток этого подхода заключаться в том, что здесь сервер и серверные события не являются инициатором взаимодействия.

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

Почему WebSockets? Плюсы и минусы протокола ws

Используя технологию Веб-Сокеты нам нужно забыть привычную систему взаимодействие в мире WWW. Нам нужно забить стандартный модель HTTP-протокола — «запрос/ответ на запрос». В рамках технологии Веб-Сокетов браузер и сервер в любой момент могут отправлять и принимать данные, то ест они становится равными участниками.

WebSocket устанавливает одно единственное соединение клиента с сервером. Для работы с WebSockets обе стороны (клиент и сервер) должны поддерживать данную технологию. Все новые браузеры поддерживают протокол WS, а серверная часть реализуется разработчиком. Когда сервер и клиент готовы к «бою», сервер и клиент могут отправлять через Веб-Сокеты текстовые текстовые сообщение. Передача и прием данных происходит сразу же, данная технология создает двунаправленные каналы связи.

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

В этом уроке мы узнали — какие способы есть для асинхронных запросов на сервер, что такое WebSocket и какие преимущества у него есть по сравнению с AJAX и HTML фреймов. В следующем уроке мы начнём работать с WebSocket на Node.js, более подробно будем рассматривать данную технологию в действие и напишем чат на Веб-Сокетов и Node.js. Полный список уроков Node.js вы найдете на этом странице.

The post Что такое WebSocket. Что лучше — Веб-сокеты или AJAX? appeared first on HackerX.