Скрипт отправки данных AJAX в чате, с помощью JQuery

Недавно столкнулся с такой проблемой, делал чат. И AJAXом отправлялись сообщения. Была бага, когда слишком часто отправляешь сообщения то некоторые из - них не доходили, или бывало такое что некоторые доходили позже чем отправленные ранее сообщения. Это все из-за того было, что на каждое нажатие кнопки "Отправить" создавался AJAX запрос. И поэтому получалось наложение этих запросов.

Для тех кто не знаком с понятием Ajax , и как он работает на JQuery, я написал подробную статью.

Я решил сделать что-то вроде стека. При нажатии отправить сообщения записывались в массив и запускалась отправка , если не была запущена ранее. Забыл сказать все это реализовано на JQuery. Итак как может примерно выглядеть чат на JQuery примерно так

function chat_query_post(id){
	arr_post_messages.push($("chatmsg").val());
	$("chatmsg").attr('value','');
	$("chatmsg").focus();
	if (now_post!=1){
		chat_post(id);
	}
	return false;
}

то есть получаем все сообщения записываем в arr_post_messages , с помощью метода push - который помещает добавляемый элемент в конец массива, как нам и надо. переменная now_post, как раз и отвечает за то отправляются сейчас данные или нет.

Теперь сама функция отправки сообщения.

function chat_post(id){
	now_post=1;
	$.ajax({
	type: "POST",
	url: "/ajax/chat/"+id+"/post",
	data: { 'msg': arr_post_messages[0] },
	error: function (){
		now_post=0;
		if (arr_post_messages.length>0){
			chat_post(id);
		}
	},
	success: function(msg){
		arr_post_messages.splice(0,1);
		now_post=0;
		if (arr_post_messages.length>0){
			chat_post(id);
		}
	}
	});
}

Как видно выше при запуске этой функции ставится переменная now_post значит запрос пошел и выше описанной функцией не будет вызвана еще одна копия, при успешной отправке и ошибке освобождается эта переменная, и проверяется, есть ли еще что-нибудь в массиве сообщения с помощью length - этот метод возвращает длину массива. при успешной отправке также удаляется первый элемент массива с помощью splice.

splice -  удаляет часть массива. 1 параметр это индекс с какого элемента удалить, 2 параметр - сколько элементов удалить. то есть splice(0,1) - удалит первый элемент, что нам и нужно.

Запись опубликована в рубрике JQuery, Веб-программирование. Добавьте в закладки постоянную ссылку.

14 комментариев: Скрипт отправки данных AJAX в чате, с помощью JQuery

  1. Джедай говорит:

    У вас в функции «chat_query_post» ошибочка
    if (now_post!=1){
    chat_post(id);
    }»"
    из за нее не будет работать скрипт.

    • Антон говорит:

      все верно там, 100% рабочий скрипт, скопирован с реально работающего проекта. эта проверка как раз на то что если переменная now_post = 1 значит не надо запускать еще один аякс. Изначально она равна 0.

  2. seobw говорит:

    «/ajax/chat/»+id+»/post»

    это что за УРЛ такой???? зачем ID меняется, что-то ничего не пойму

  3. seobw говорит:

    автор, давай еще по ajax’u статей. Тут самое понятное объяснение….

  4. seobw говорит:

    Можешь помочь?? Смотри, я написал мини чатик на сайте http://mashintop.ru/
    Когда я оставляю сообщение, то все хорошо, оно сразу же появляется в чате. А вот когда другой человек пишет в чате, чтобы мне увидеть его сообщение мне нужно либо перезагрузить страницу полностью, либо что-то написать в чате. Т.е. просто сидеть и читать чать, при этом не лазя по сайту, не получится. Как это можно исправить??

    • Антон говорит:

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

  5. seobw говорит:

    10 секунд это сильно много.
    Поставил 1 секунду обновления страницы. Теперь вверху видно, что страница все время обновляется:( как это можно исправить??
    и еще, если человек смотрит нижний элемент чата, а при этом страница обновилась, то его перекидывает наверх….

    • Антон говорит:

      1 секунда это мало слишком, у вас инет может очень стабильный, но вы подумали о пользователях, у которых может выпадать инет, и не будет успевать обрабатываться запрос за секунду, думаю хотя бы секунд 3-5. И плюс к этому у вас не Аякс получился, у вас каждую секунду страница целиком обновляется. :)

  6. seobw говорит:

    В общем у меня черер фрейм подгружается страничка chat.php
    в ней идет вывод всего чата, а так же код обновления каждые 10 секунд..
    setTimeout(function(){window.location.reload(true);},10000);

    но что-то как-то медленно это все работает, обновляет долго.. что делать??
    И еще, вы сказали, что у меня не через аякс… добавление я сделал через аякс, а как вывод сделать нормальный?? а то это все тормозит сильно:(

    • Антон говорит:

      А зачем фрейм то, ф топку его. В простом диве делайте и все.
      function chat_load(time){
      $.ajax({
      type: «POST»,
      url: «/ajax/chat/load»,
      data: { ‘time’: time},
      error: function (){
      ….
      },
      success: function(msg){
      $(‘#div_s_chatov’).append(msg)
      }
      });
      }
      этим скриптом отправляется в бекенд время запроса о новых сообщениях. Бекенд проверяет были ли сообщения с того момента, если были то возвращает их, и они дописываются в конец чата.
      Написано на коленке, но общий принцип думаю понятен.
      Да и не забудьте каждый раз time предавать текущий.