Как правильно реализовать задержку в чате?

Question

[Space]

Привет. Вот у меня есть чат. Я на клиентской стороне реализовал задержку отправки сообщений. Это чтобы не флудили чат. Используется node.js, php, socket. Вот мой код задержки. Но любой желающий может удалить ее в консоле браузера. Как быть?

var socket = io.connect( 'http://localhost:8080' );
var socketEmitLastCallTime = 0;
$( "#messageForm" ).submit( function(e) { e.preventDefault();
	var nameVal = $( "#nameInput" ).val();
	var msg = $( "#messageInput" ).val();
	var canalVal = $( "#canalInput" ).val();
    var aqwsde = Date.now() - socketEmitLastCallTime;
	if(aqwsde >= 2 * 1000) {
		socketEmitLastCallTime = Date.now();
		socket.emit( 'message', { name: nameVal, message: msg, canal: canalVal } )
	    $( "#messageInput" ).val('');
			// Ajax call for saving datas
		$.ajax({
			url: "./ajax/insertNewMessage.php",
			type: "POST",
			data: { name: nameVal, message: msg, canal: canalVal },
			success: function(data) {
			}
		});
   }else {
   var alert = $('span.alert');
alert.show();
alert.html('Time!!!');
alert.fadeOut(3000);
   //$('span.alert').html('Нельзя отправлять сообщения чаще, чем раз в 2 секунды');
   //alert('Нельзя отправлять сообщение чаще 2 секунд');
   }
});



socket.on( 'message', function( data ) {
	var actualContent = $( "#messages" ).html();
	var newMsgContent = '<li> <strong>' + data.name + '</strong> : ' + data.message
																					.replace(new RegExp("&#D83DDE04",'gi'),"<img src='../packs/basic/D83DDE04.png' height='21' width='21'>")
																					.replace(new RegExp("&#D83DDC8A",'gi'),"<img src='../packs/basic/D83DDC8A.png' height='21' width='21'>") + '</li>';
	var content = newMsgContent + actualContent;
	$( "#messages" ).html( content );
});

Comments

[Space]

Слышал есть шифрование скрипта. Как вы на это смотрите?

[Space]

Так как я на клиентской части еще использую php, может мне через php задержку реализовать? Помогите кто-нибудь.

[Space]

var socket = require( 'socket.io' );
var express = require( 'express' );
var http = require( 'http' );

var app = express();
var server = http.createServer( app );

var io = socket.listen( server );

io.sockets.on( 'connection', function( client ) {
	console.log( "New client !" );
	
	client.on( 'message', function( data ) {
		console.log( 'Message received ' + data.name + "1" + data.message + data.canal );
		
		//client.broadcast.emit( 'message', { name: data.name, message: data.message } );
		io.sockets.emit( 'message', { name: data.name, message: data.message, canal: data.canal } );
	});
});

server.listen( 8080 );

Answer 1

[Dunadan]

Только проверка на сервере.
Иначе обиженный ребенок сможет написать скрипт-флудилку.
По коду не вполне ясно, зачем Вы отправляете данные и в ноду, и дергаете пхп-скрипт.
Используйте что-то одно. В крайнем случае - проксируйте данные с ноды в пхп, иначе у Вас может наступить рассинхронизация состояний.

Comments

[Space]

@Dunadan как можно реализовать проверку на сервере. Всм у меня скрипт отправляет данные всем а аяксом заношу сообщение. Ниже еще код. Который обрабатывает полученные данные. Что не так? Еще слышал что можно за шифровать скрипт. Как вы на такое смотрите?

[Space]

Php скрипт чтобы заносить сообщение в бд. Это связка ноды с пхп

[Dunadan]

1) Что мешает из ноды заносить данные в БД?
2) Когда мы писали чат - то было принято некоторые вещи проксировать из ноды в пхп (просто делался локальный вызов пхп для нужного хоста и ответ от пхп передавался браузеру).
3) По поводу отправки сообщений мы делали как: скрипт отправляет сообщение демону на ноде, а уже демон на ноде по сессии пользователя определяет - когда юзер писал последний раз. Если слишком часто - выдаем предупреждение. Если все хорошо - то демон рассылал всем подключенным клиентам (broadcast) уведомление о новом сообщении.

[Space]

Как из ноды заносить данные в мускл?

[Space]

@DunadanИ насчет второго пункта не понял

[Space]

@Dunadan вот сервер, подскажите как реализовать задержку?

var socket = require( 'socket.io' );
var express = require( 'express' );
var http = require( 'http' );

var app = express();
var server = http.createServer( app );

var io = socket.listen( server );

io.sockets.on( 'connection', function( client ) {
	console.log( "New client !" );
	
	client.on( 'message', function( data ) {
		console.log( 'Message received ' + data.name + ":" + data.message + data.canal );
		
		//client.broadcast.emit( 'message', { name: data.name, message: data.message } );
		io.sockets.emit( 'message', { name: data.name, message: data.message, canal: data.canal } );
	});
});

server.listen( 8080 );

[Dunadan]

1) Есть набор модулей для коннекта нода - мыскль. О них писали на Хабре, например - habrahabr.ru/post/198738 тут.
2) Судя по коду, Вам надо еще подумать над тем, что бы не совали SQL / XSS и других гадостей ;)
3) С socket.io не работал - нам хватало простых возможностей Ноды.

[Space]

@Dunadan насчет второго пункта есть статьи у вас?

[Space]

@Dunadan и еще, получается на клиенте у меня происходит replace символов, их тоже на сервере что ли реализовывать ?

[Dunadan]

Если для Вас более знаком пхп, чем JS - есть прекрасный ресурс phpjs.org, где переписывают ф-ции из мира пхп на js. Например, htmlspecialchars :)

Про реплейс символов немного непонятно.
Например, мы отсекали матершину на сервере, но смайлики выводили на клиенте уже.

[Space]

@Dunadan спасибо за сайт. гляну. вот реплейс

.replace(new RegExp("&#D83DDE04",'gi'),"<img src='../packs/basic/D83DDE04.png' height='21' width='21'>")
																					.replace(new RegExp("&#D83DDC8A",'gi'),"<img src='../packs/basic/D83DDC8A.png' height='21' width='21'>") + '</li>';

Его тоже можно ведь подменить поменяв путь?

[Space]

@Dunadan И еще гляньте вот такую реализацию чата habrahabr.ru/sandbox/51453 как вам?

[Dunadan]

А, ну смайлики мы похожим образом заменяем на клиенте.
На сервере - только матюки.

По поводу примера - да, там правильнее сделано.
// htmlencode
msg = escapeHtml(msg);

над этой строчкой получаете текущее время и сверяете с последним временем, когда этот пользователь что-то писал.

Если меньше 2-3 секунд - отправляете лесом.

[Space]

@Dunadan ну все пошел делать. Спасибо. Пока что тему не закрываю.

[Space]

@Dunadan А почему матюки на сервере реализовали?

[Space]

@Dunadan И еще, на ваш взгляд скрипт как написан? Быстро хоть отправлять будет. А то встречал на просторах рунета такие, что задержка по несколько секунд. Мой то скрипт моментально отправляет.

[Dunadan]

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

[Space]

@Dunadan

// Кто отправил, кому отправил
				socket.userGet = idUserGet;
				socket.userSend = rows[0].id;
				
				// Лог, чисто для себя, чтобы примерно понимать что происходить
				console.log(socket.userSend+' has been logined ');
				socket.join(socket.userSend);
				
				// Мое имя.
				socket.user = rows[0].username;

А как сделать отправку всем находящимся в чате? И будет ли это грузить?

[Dunadan]

Собирать открытые коннекты в массив и зассылать по ним
Грузить что?

[Space]

@Dunadan Да я все о скорости забочусь. Имел ввиду будет ли это нагрузкой в данном скрипте.

[Space]

@ruslite А как можно id в этом скрипте? Чтобы не собирать открытые коннекты. Это я задумываюсь о будущих уведомлениях.

[Dunadan]

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

[Space]

@Dunadan писал на лонг-полинг, поэтому перешел уже посерьезнее. Я просто переспрашиваю, т.к. там пишу одно, в другом другое, в третьем третье.

[Space]

Тем более потом собираюсь передавать файлы и т.д.

[Dunadan]

ну сокет.ио - это просто враппер над технологиями.

Из того кода, что Вы показали, вполне очевидно, что механизм работы клиент-серверных приложений еще не все свои секреты раскрыл Вам :).

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

Допустим, пункт "в" возьмет на себя сокет.ио. Но первые два - должны сделать Вы.

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

Когда будете уверены, что все работает, как Вам нужно - то уже подключайте сокет.ио или любую другую штуку по Вашему вкусу.

[Dunadan]

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

[Space]

@Dunadan ок. Скрипт который мой, он удаляет клиентов которые не активны. У вас есть статья, пример, чата на node.js?

[Space]

А зачем пинговать? Не совсем понятно. Мне бы реальный нормальный живой пример. Чтобы потом я мог и с сокетами и т.д.

[Dunadan]

Нет, статей на эту тему я не писал.
Хотя, возможно, имеет смысл :)
При лонг-пуллинге полезно в открытый сокет писать что то с определенным интервалом, что бы коннект не обрывался.

[Space]

Капец, тот чат который я вам скинул.. точнее статью... объяснил он мало понятно. Как можно погуглить? Чат на node.js?

[Space]

@ruslite Капец, тот чат который я вам скинул.. точнее статью... объяснил он мало понятно. Как можно погуглить? Чат на node.js?

[Space]

@Dunadan

return String(str)
		  .replace(/&/g, "&")
		  .replace(/</g, "<")
		  .replace(/>/g, ">")
		  .replace(/"/g, """)
		  .replace(/'/g, "'")
		   .replace(/\//g, "⁄");
	}

Что еще надо, чтобы предотвратить вставку SQL / XSS и других гадостей?

[Dunadan]

Экранируемые символы NUL (ASCII 0), \n, \r, \, ', ", и Control-Z.

[Dunadan]

Это для Мыскля.
И попробуйте гуглить на английском, есть вполне доступные примеры.

[Space]

@Dunadan а как задержка реализована в примере по ссылке? Можно подробнее?

[Space]

вопрос закрыт. спасибо за помощь. реализовал тоже самое, что на клиенте, только на сервере. проблем то.

Answer 2

[Yuri Shikanov]

Реализовать задержку на сервере, ваш К.О.

Comments

[Space]

@dizballanzeЭто мне понятно. Только как? Я запускаю северный скрипт но он только проверяет что зашел/ушел клиент, и фиксирует отправку сообщений.

[nochkin]

Проверку можно делать в момент фиксации сообщений. Например, если сообщение пришло слишком рано если сравнивать со временем предыдущего, то отклонить и выдать предупреждение.

[Space]

@nochkin теория это хорошо. Мне бы примерчик.

[nochkin]

@ruslite, всё ведь зависит от серверной реализации. Точный пример без информации сложно дать. Если очень упрощённо, то хранить сообщение со временем в базе данных. Когда приходит новое сообщение, то сначала брать выборку этого пользователя за последние три секунды (такой вроде интервал?) и если ответов нет, то всё нормально и можно передавать работу непосредственно обработчику сообщений.
Что-то типа: select count(userid) from messages where userid=? and time>(unix_timestamp()-3) limit 1
Если вернуло 0, то сообщений не было. Если вернуло 1, то были.

[Space]

@nochkin наверху есть реализация клиента. Ниже сервера. Выборку я на странице всех сообщений делаю на php. Проверку там же делать что ли?

[nochkin]

Да, проверку там же если тот же скрипт принимает новые сообщения и записывает их в базу.

[Space]

@nochkin от реализации через php лучше откажусь:)

[nochkin]

Зря. Такие вещи лучше делать на сервере, а не на клиенте. Данным клиента нельзя верить.

[Space]

@nochkin так я и реализовал на сервер конечно) Только средствами js

Answer 3

[Dmitry Demin]

Проще не использовать задержку на клиенте, а на сервере притормаживать все запросы до поры. Например, получаем время последнего обращения и тормозим так, чтобы клиент всяко получил ответ не менее через n секунд после пред. обновления. Главное - не переборщить, иначе ошибка 408 обеспечена. Проблема DDOS'а из браузера отпадает т.к. они сами лимитируют количество подключений к одному хосту.

Comments

[Space]

@keksmen Я по теории то понимаю, а вот по практической части 0. Как можно реализовать в моем коде. Код сервера наверху. Нет, я не ленивый. Желательно статью какую-нибудь или ваш пример. спасибо

[Dmitry Demin]

Сервер, как я понял, на NodeJS стоит.
Тогда времена обновлений клиентов можно хранить прямо в памяти, а запросы (еще лучше) не будут тормозить, а ждать в очереди.
Примерный алгоритм:
var timing={};
server.onRequest(function(request) {
var time=0;
if (!!timing[request.ip])
time=timing[request.ip]-Date.now()+2000; //Задержка 2 сек.
setTimeout(function() {
timing[request.ip]=Date.now();
//а тут мы ответим на запрос:)
},time);
});
Таким образом запрос дождется 2 сек. после предыдущего обновления и обработается. В случае, когда прошло более 2 сек. задержка будет <=0 и функция просто встанет в очередь без ожидания.
Стоит также помнить, что подобным образом нужно тормозить лишь ajax запросы. Видимые тормоза никто не любит.
Конечно, это нельзя просто взять и скопировать, я лишь показал суть реализации.

[Space]

@keksmen Да на ноде. Как понять видимые?

[Dmitry Demin]

@ruslite я имею ввиду, не стоит тормозить запросы, которые отдают html страницы браузеру.

[Space]

@keksmen эх, что-то совсем не пойму. Я хочу, чтобы выводилось сообщение в html`е. А не в память сохраняло, а потом отправляло. Вы можете хотя бы коряво-коряво реализовать в моем коде?

[Dmitry Demin]

@ruslite он не сохраняет в памяти сообщение, а лишь время обращения. В моем коде замените server.onRequest(function(request) { на привязку к запросу о новом сообщении, а request.ip на получение IP адреса (или любого другого идентификатора пользователя). И в //а тут мы ответим на запрос:) как и раньше отдавайте данные клиенту)

[Space]

@keksmen вот код

var socket = require( 'socket.io' );
var express = require( 'express' );
var http = require( 'http' );

var app = express();
var server = http.createServer( app );

var io = socket.listen( server );

io.sockets.on( 'connection', function( client ) {
	console.log( "New client !" );
	
		var timing={};
		client.on( 'message', function( data ) {
		var time=0;

		if (!!timing[data.name])
			time=timing[data.name]-Date.now()+2000; //Задержка 2 сек.
			setTimeout(function() {
			timing[data.name]=Date.now();
			console.log( 'Message received ' + data.name + "1" + data.message + data.canal );
				
			//client.broadcast.emit( 'message', { name: data.name, message: data.message } );
			io.sockets.emit( 'message', { name: data.name, message: data.message, canal: data.canal } );
		},time);
	});
});
server.listen( 8080 );

Получилось так: отправил сообщение. Потом отправляю еще одно, и если не прошло 2сек, то сервер ждет пока они пройдут, а потом отправляет. Что не так?

[Dmitry Demin]

@ruslite вроде норм, попробуйте запустить код

[Space]

@keksmen всм я проверял, отправил сообщение. Потом отправляю еще одно, и если не прошло 2сек, то сервер ждет пока они пройдут, а потом отправляет все те сообщения которые я отправил в течение выжидания время. Мне не надо задерживать. Мне надо просто прекратить прием сообщений. А получается, что в сокеты сохраняется что ли, а потом отсылает. Хотя сокеты ничего не хэшируют.

[Space]

@keksmen плюс что заметил у себя. Если сервер выключен, а сообщения отправлять, то они не появляются(это понятно почему), но стоит включить сервак, то все эти отправленные сообщение будут переданы.

[Dmitry Demin]

@ruslite так не нужно задерживать отправку, попробуйте сделать два разных запроса для отправки и обновления данных. А по поводу доставки недоставленных сообщений: может просто таймаут для соединения не настал и браузер еще не успел убить соединения, отправляющие сообщения?

[Space]

@keksmen не понял, что именно мне сделать?