WebSocket для react/redux приложения?

Question

[ch-aqwer]

Добрый день! Скажите пожалуйста как правильно создать вебсокет соединения, чтобы данные непрерывного приходили с другого ресурса?
Сам проект на react/redux.

В моем понимании сейчас надо писать сокет сервер на node+express, например.
Далее уже этот сервер должен принимать данные и отдавать мне на клиент.
И вот скажите:
1. Правильно ли я это понимаю, есть ли лучшие варианты?
2. Будет ли все нормально работать если данных будет много (~100 тыс объектов)?
3. Как грузить и обрабатывать такие объемы данных?

 Буду благодарен за какой-то простой пример.
 С node никогда не работал...

Comments

[Abcdefgk]

"Другой ресурс" данные сам отдаёт или надо делать запросы?
Если сам не отдаёт, то setInterval всё равно же останется - только что сбросить это на сервер: пусть запрашивает, обрабатывает и отправляет.
Не совсем понятно.

[ch-aqwer]

Если сам не отдаёт, то setInterval всё равно же останется - только что сбросить это на сервер: пусть запрашивает, обрабатывает и отправляет

Без вебсокета тогда все равно не обойтись?!
Или я что-то не так понимаю?

[Abcdefgk]

ch-aqwer, Да я же не знаю точно задачу. Вебсокет был бы нужен, если есть задача частично освободить клиентскую часть - чтоб клиенты только принимали пакеты данных, а сами запросов не делали. Пришёл типа json - разпарсить его только и поприменять по конечному назначению. Может быть так, я не знаю.
А если нодовскому серверу нужно отправлять запросы за сырыми данными, то он их всё равно будет делать через такой же setInterval.

[ch-aqwer]

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

Вот что-то такое и нужно.
Пожалуйста, опишите алгоритм действий для решение вопроса, хочу все обдуманно сделать (нужен этот сокет или нет, писать отдельный сервер на node или нет...).
Сейчас я дергая пхп файл на другом ресурсе, который всегда что-то отдает.
клиент на react/redux.

[Abcdefgk]

Да какой там алгоритм, всё просто.
WebSocket в браузерах нативный. На странице просто есть скрипт подключения с адресом и портом в аргументе, типа var socket = new WebSocket("ws://site.ru:8081");
Порт любой, от фонаря - главное, что он тот же, который слушает и WebSocketServer на том конце:

var WebSocketServer = new require('ws');
var webSocketServer = new WebSocketServer.Server({
  port: 8081
}, function() {console.log('ws-PORT = 8081')});

Как страница открывается в браузере - скрипт подключается к серверу и просто ждёт. Когда сервер что-то отправит, будет сгенерировано событие

socket.onmessage = function(event) {
  var incomingMessage = event.data;
  // тут делаем с тем что пришло - что хотим
};

Отправлять можно хоть строку (json-строку в том числе, конечно), хоть бинарный поток (в отличии от socket.io, где только строку).
Вот и весь "алгоритм".

А сервер данные отправляет простым методом ws.send()
Если нужно отправлять нескольким (многим) клиентам, то надо "руками" их перебирать в цикле. У "чистого" WebSocket нет функции рассылки всем подключившимся.
У socket.io есть готовая broadcast

[Abcdefgk]

Хе. Ну я вот для экскримента сделал два файла и просто запустил их из двух терминалов. На типа сервере вот такая конструкция

setInterval(function() {
  for (var key in clients) {
    clients[key].send('Hello, World!!!');
  }
}, 3000);

отправляет мессадж
А типа клиент каждые три секунды его получает.
Не сложная ноука.

[ch-aqwer]

Abcdefgk, То есть без setInterval все таки не обойтись?)
или можно беспрерывно как-то посылать?

[Abcdefgk]

ch-aqwer, Как видеопоток что ли? Он откуда будет идти?
Ну и вообще, для приёма данных бразузером в одностороннем порядке есть это https://learn.javascript.ru/server-sent-events
Там, я поглядел, у Кантора пример, и сервер "поток" отправляет тем же setInterval.

[ch-aqwer]

Abcdefgk, Объясню, что за проект ... есть карта на которой есть много объектов, которые в свою очередь всегда посылают данные о себе, которые записываются в базу.
и вот с базы уже надо их вытаскивать. соответственно был сетинтервал на клиенте который посылал запросы ...
Если использовать вебсокет, сетинтервал перейдет на сокет сервер, но по идее увеличится перфоманс на клиенте, так?
Извините, что замучил вопросами)
Технология, что вы сбросили, к сожалению, не поддерживается в Edge, IE

[Abcdefgk]

ch-aqwer, Ну раз данные берутся из базы, то их всё равно же запрашивать периодически. Так что, в чём вопрос-то? Если бы мне это нужно было делать, то я попробовал бы так. Была бы отдельная (видимо, промисифицированная) функция в виде отдельного модуля. Пусть бы она делала запрос к базе, обрабатывала бы чего там с данными надо делать и возвращала Promise с готовой к отправке json-строкой, а тут бы только оставалось отослать результат. Конструкция в этом модуле выглядела бы как-то так:

setInterval(function() {
  require('getModule').getData()  // запускаю там запрос
           .then( dataString => {
              for (var key in clients) {
                clients[key].send(dataString);
              }
            })
            .catсh( err => {/* Не знаю чего тут */})ж
}, 5000);

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

[Abcdefgk]

ch-aqwer, О! Какая мне проблемка маленькая в голову пришла! Но я сразу же и проверил (а чё мне ещё делать?)
Процесс setInterval запускается каждый раз, снова - ещё один, при каждом новом коннекте. В результате скорость, получается, увеличивается в два раза при втором клиенте... и т.д.
Надо иметь переменную таймера и - при каждом коннекте - предыдущий запуск сетИнтервала выключать. Работает.

[ch-aqwer]

Abcdefgk, что-то я не совсем понял что вы имеете в виду.
Если можете покажите кусок кода.
В любом случае ответьте на вопрос, отмечу решением, вы мне помогли)

[Abcdefgk]

ch-aqwer, Да собсно, вот весь сервер, отправляющий Hello, World! всем подключившимся по ws клиентам каждые три секунды - вне зависимости от числа подключившихся:

var WebSocketServer = new require('ws');

var clients = {};
var timerId;                                 // переменная таймера

var webSocketServer = new WebSocketServer.Server({
	port: 3001
}, function() {console.log('WebSocketServer-PORT: 3001')});

webSocketServer.on('connection', function(ws) {
	var id = Math.random();
	clients[id] = ws;
	console.log("connect " + id);
	
	clearInterval(timerId);       // выключить запущенный прошлым подключением процесс
	
	timerId = setInterval(function() {
		for (var key in clients) {
			clients[key].send('Hello, World!!!');
		}
	}, 3000);

	ws.on('close', function() {
		console.log('disconnect ' + id);
		delete clients[id];
		console.log(Object.keys(clients));
	});
});

(с некоторыми оповещениями коннектов/дисконнектов - чтобы код выглядел немного подлиннее)

Answer 1

[Abcdefgk]

Хотя, конечно, ставить setInterval вообще в зависимость от коннектов - это ерунда.
Вот так более лучше.

var WebSocketServer = new require('ws');
var EventEmitter = require('events');
function MyEmitter() {}
MyEmitter.prototype = Object.create(EventEmitter.prototype);

var clients = {};

var webSocketServer = new WebSocketServer.Server({
  port: 3001
}, function() {console.log('WebSocketServer-PORT: 3001')});

webSocketServer.on('connection', function(ws) {
  var id = Math.random();
  clients[id] = ws;
  console.log("connect " + id);

  ws.on('close', function() {
    console.log('disconnect ' + id);
    delete clients[id];
    console.log(Object.keys(clients));
  });
}); 

var myEmitter = new MyEmitter();
myEmitter.on('start', () => {
	setInterval(function() {
		for (var key in clients) {
			clients[key].send('Hello, World!!!');
		}
	}, 3000);
});
myEmitter.emit('start');

Comments

[ch-aqwer]

Спасибо большое!)
Еще вопрос... начал нормально разбираться с нодой, дошел до Stream-ов. Целесообразно ли будет их здесь использовать?

[Abcdefgk]

ch-aqwer, Про какие Stream-ы речь? Если про те, которыми потоки бинарных данных пуляют (например, в AJAX), то не просто не целесообразно - но они в WebSocket и не работают. Вебсокет, вообще, пересылает любого размера файл (картинку, нопремер) - одним непрерывным куском. Никаких chunk-ов, короче.
Ну, можно использовать createStream, и будет даже работать (с принудительным закрытием потока), но это бессмысленно.

[ch-aqwer]

Abcdefgk, А если у меня первый запрос большой будет(40тис. обектов)?

[Abcdefgk]

ch-aqwer, Так ответ-то - всяко разно строка. В сравнении с какой-нибудь GIF-анимашкой - говно вопрос.
Полное собрание сочинений Уильяма Шекспира - строка объёмом 5 мегабайт.

Answer 2

[Александр Аксентьев]

2. Будет ли все нормально работать если данных будет много (~100 тыс объектов)?
3. Как грузить и обрабатывать такие объемы данных?

Нет.
Не надо так делать.

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

Вебсокет здесь вообще причём? Реалтайм и 100тыщ объектов как-то так себе идея.

Comments

[ch-aqwer]

Как тогда сделать нормально?
Сейчас у меня стоит setInterval и каждые 4 секунды дергает урл с новыми параметрами, дальше на сервере пхп код проверяет что изменилось и отдает новые объекты, то есть 100 тыс. это максимальная первая загрузка, далее сервер отдает те что изменились макс. 1000 объектов.
Если создавать несколько соединений?

[Александр Аксентьев]

ch-aqwer, что за данные?
В 99% случаев пользователю не нужно столько данных.

1% под графики какие-нибудь можно выделить, и то нужно агрегировать данные и группировать перед отдачей клиенту.
Потому что это будет слайдшоу если отдавать обрабатывать все данные не клиент.

[ch-aqwer]

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

[Александр Аксентьев]

ch-aqwer, ну тогда тем более они не нужны.
Или вы сразу на все 100 тыщ смотрите на карте?
И не зумите, и не делаете кластеры...

[ch-aqwer]

Александр Аксентьев, Вопрос, как доставать данные? Вы рекомендуете оставить setInterval?