Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.03.2013, 12:56
Новичок на форуме
Посмотреть профиль Найти все сообщения от crazygangster77
 
Регистрация: 22.03.2013
Сообщений: 8

Добавление звукового оповещения в ajax чат
Добрый День форумчане!
Сразу скажу, что в скриптах почти не разбираюсь но все же)
Есть сайт на Modx revolution , к нему установил дополнение Онлайн консультант (не путать со фреймом со сторонних сайтов),
Работает он следующим образом:
Посетитель заходит в нужный раздел на сайте. Если он заходит первый раз — его просят представиться (только имя). После этого создается ресурс в дереве MODX в заранее указанном контейнере, куда пишется вся беседа.
Пользователь пишет вопросы, консультант — ответы. Каждый сидит на своем разделе сайта, страницу консультанта можно закрыть средствами самого MODX (назначит группу юзеров) или тупо по ip в настройках сниппета.

Переписка обновляется при отправке нового сообщения, или по таймауту, через каждые 15 секунд (можно изменить).
Если вы отправили сообщение — таймаут переставляется опять на 15 секунд. То есть, при активной беседе у вас все будет обновляться и без таймаута.

У консультанта, помимо переписки, обновляется еще и окно бесед. Появляются новые и переносятся наверх неактивные беседы, в которых посетитель что то написал.
Как сделать чтобы при создании новой беседы(или при получении сообшения) звучал звуковой или флеш файл на стороне консультанта?

работает это дело на jqury и form.jqury + страница приветствия и сама обработка:
$(document).ready(function() {
	$('#wellcome input[type="text"]:first').focus();
		$('#wellcome').submit(function() {
			$(this).ajaxSubmit({
				replaceTarget: true,
				beforeSubmit: function() {
				
				if ($('#wellcome input[name="name"]').val() == '') {
					alert ('Напишите свое имя!');
					$('#wellcome input[name="name"]').focus();
					return false;
				}
			},
			target: '#wellcome_box'
		})
		return false;
	})
})



$(document).ready(function() {
  
  refresh = setInterval(function() {
      updateConversation()
    }, time+'000'
  )

  
  $('#outgoing .input').focus();
  
  Scroll('conversation');
  
  $('#outgoing .input').keydown(function(event) {
    if (event.which == 13 && !event.shiftKey ) {
       $('#outgoing').submit();
       return false;
    }
  });
  
  $('#outgoing').live('submit', function() {

    $(this).ajaxSubmit({
      target: '#conversation',
      success: function() {
        $('#outgoing .input').val('');
        Scroll('conversation');
        clearInterval(refresh);
        
        refresh = setInterval(function() {
            updateConversation()
          }, time+'000'
        )        
      }
	})
    return false;
  })
  
  $('#conversation').ajaxStart(function() {
    $(this).addClass('loading');
  })
  
  $('#conversation').ajaxStop(function() {
    $(this).removeClass('loading');
  })
  
  
  $('#conversations li').live('click', function() {
    $('#conversations li').removeClass('active');
    $(this).removeClass('new').addClass('active');
    var uid = $(this).data('uid');
    $.post(url, {action: 'getConversation', uid: uid}, function(data) {
      $('#conversation').html(data);
      Scroll('conversation');
      $('#outgoing .message').focus();
    })
  })
  

})

function Scroll(elem) {
  height = document.getElementById(elem).scrollHeight;
  $('#' + elem).animate({scrollTop: height + 'px'}, 1200);
}

function updateConversation() {
  if ($('div').is('#conversations')) {
    updateConversations();
  }
  $.post(url, {action: 'getMessages'}, function(data) {
    if (data == false) {
      document.location = document.location;
    }
    else {
      $('#conversation').html(data);
      Scroll('conversation');
    }
  })
}

function updateConversations() {
  $.post(url, {action: 'getConversations'}, function(data) {
    $('#conversations').html(data);
  })
}



Страница консультанта:
<script type='text/javascript'>
  url = '[[++site_url]][[~[[*id]]]]';
  time = [[+refresh]];
  $(document).ready(function() {
  $('#conversations li:first').trigger('click');
    
  })  
</script>  

<div id="[[+element]]">
  <table>
    <tr>
      <td><div id="conversation">[[+conversation]]</div></td>
      <td><div id="conversations"><ul>[[+conversations]]</ul></div></td>
    </tr>
  </table>
  <div id="messages">
    <form action="/[[~[[*id]]]]" method="post" id="outgoing">
      <input type="hidden" name="action" value="submitMessage" />
      <table>
        <tr>
          <td><textarea name="message" class="input"></textarea></td>
          <td><input class="button" type="submit" value="Отправить" />
 
</td>

        </tr>
      </table>
    </form>
  </div>
</div>


Приветствие и Страница клиента:
<div id="wellcome_box">
<script type="text/javascript" src="[[+snippet_url]]js/wellcome.js"></script>  

<h2>Для начала беседы, представьтесь, пожалуйста.</h2>
  <form action="/[[~[[*id]]]]" method="post" id="wellcome">
  <input type="hidden" name="action" value="createConversation" />
  
  <div class="name">Ваше имя <span class="required">*</span></div>
  <input type="text" name="name" value="" /><input type="submit" class="button" value="Отправить" />
 
</form>
</div>

<script type='text/javascript'>
  url = '[[++site_url]][[~[[*id]]]]';
  time = [[+refresh]];
</script>

<div id="[[+element]]">
  <table>
    <tr>
      <td><div id="conversation">[[+conversation]]</div></td>
    </tr>
  </table>  
  <div id="messages">
    <form action="/[[~[[*id]]]]" method="post" id="outgoing">
      <input type="hidden" name="action" value="submitMessage" />
      <table>
        <tr>
          <td><textarea name="message" class="input"></textarea></td>
          <td><input class="button" type="submit" value="Отправить" /></td>
        </tr>
      </table>
    </form>
  </div>
</div>

Посмотреть в работе можно здесь:
http://ibooknet.ru/oconsultation/
http://ibooknet.ru/vopros-online/

Еще при первом входе на страницу вопросов набираем текст, отправляем… но сообщение уходит в никуда и поле очищается. при повторной отправке и в дальнейшем все идет нормально

Сборка jqury:
jquery-1.5.1.min.js

jQuery Form Plugin:
version: 2.67
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
AJAX. Добавление комментариев. Видимость формы. fanks Элементы интерфейса 3 01.12.2012 15:37
Добавление в чат новых сообщений. xJAMESx jQuery 4 29.05.2012 23:13
ajax чат проблема с записью сообщения в базу данных mysql. Niksik AJAX и COMET 4 15.01.2012 14:04
Ajax добавление в массив сессии kiff86 AJAX и COMET 0 29.10.2011 11:48
Добавление сайта на ajax в закладки NeoMurderer AJAX и COMET 9 30.08.2011 19:25