Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 31.05.2016, 16:25   #1
spirit-ua
Форумчанин
 
Аватар для spirit-ua
 
Регистрация: 04.06.2009
Сообщений: 351
По умолчанию Чат PHP+AJAX

Всем Привет!

Надыбал в инете код (под дулом автомата не вспомню с какого сайта), добавил (регистрацию, список пользователей, комнаты) и хотел прикрутить готовый скрип "красивого ComboBoxa" (SELECTa) который юзает библиотеку jquery.1.11.3 и вылез косяк...
дублируются сообщения чата

Сам чат юзает jquery-1.2.6

Как только подставляю более новую версию библиотеки начинают дублироваться сообщения

Понимаю что видимо в более новой библиотеке по новому переписаны функции но сам я не разберусь

Прилагаю исходник чата который нашел в инете, ПОМОГИТЕ
Вложения
Тип файла: zip phpajaxchat.zip (21.7 Кб, 12 просмотров)
Мне разрешено открывать только одну страницу - about :blank. Сперва было скучно, но потом я втянулся. Теперь у меня там живет 2 виртуальных друга, и я слышу голоса из розетки!
spirit-ua вне форума Ответить с цитированием
Старый 31.05.2016, 16:31   #2
spirit-ua
Форумчанин
 
Аватар для spirit-ua
 
Регистрация: 04.06.2009
Сообщений: 351
По умолчанию

css.css
PHP код:
* {
    
margin0;
    
padding0;
}

body {
    
fontnormal normal normal 16px "Trebuchet MS"ArialTimes;
    
color#000000;
}

/* Важное свойство */
.chat {
    
height500px;
    
overflowauto/* Это позволяет отображать полусу прокрутки */
    
positionrelative/* Это позволяет съезжать тексту в слое, не растягия страницу */
    
text-alignleft;
    
bordersolid #818181 1px;
}

.
chat div {
    
positionabsolute/* Страница остаётся тогоже размера */
}

.
chat span {
    
displayblock;
}

input[type=text],textarea {
    
width100%;
    
fontnormal normal normal 16px "Trebuchet MS"ArialTimes;
    
bordersolid #818181 1px;
}

/* Для CSS 3 */
.r4 {
    -
moz-border-radius4px;
    -
khtml-border-radius4px;
    -
webkit-border-radius4px;
    
border-radius4px;

ajax.php
PHP код:
<?php
// настройки для подключения к MySQl
$config = array( 'hostname' => 'localhost''username' => 'root''password' => '''dbname' => 'pacdb' );

// подключаемся к MySQL, если не вышло то выходим
if( !mysql_connect($config['hostname'], $config['username'], $config['password']) )
{
    exit(); 
}
// Выбираем базу данных, если не вышло то выходим
if( !mysql_select_db($config['dbname']) )
{
    exit();
}
mysql_query("SET NAMES 'utf8'"); // говорим MySQl'у то что мы будем работать с UTF-8

Header("Cache-Control: no-cache, must-revalidate"); // говорим браузеру что-бы он не кешировал эту страницу
Header("Pragma: no-cache");

Header("Content-Type: text/javascript; charset=utf-8"); // говорим браузеру что это javascript в кодировке UTF-8 

// проверяем есть ли переменная act (send или load), которая указываем нам что делать
if( isset($_POST['act']) ) 
{
    
// $_POST['act'] - существует
    
switch ($_POST['act'])
    {
        case 
"send" // если она раняется send, вызываем функцию Send()
            
Send();
            break;
        case 
"load" // если она раняется load, вызываем функцию Load()
            
Load();
            break;
        default : 
// если ни тому и не другому  - выходим
            
exit();
    }
}

// Функция выполняем сохранение сообщения в базе данных
function Send()
{
    
// тут мы получили две переменные переданные нашим java-скриптом при помощи ajax
    // это:  $_POST['name'] - имя пользователя
    // и $_POST['text'] - сообщение
    
    
$name substr($_POST['name'], 0200); // обрезаем до 200 символов 
    
$name htmlspecialchars($name); // заменяем опасные теги (<h1>,<br>, и прочие) на безопасные
    
$name mysql_escape_string($name); // функция экранирует все спец-символы в unescaped_string , вследствие чего, её можно безопасно использовать в mysql_query()
    
    
$text substr($_POST['text'], 0200); // обрезаем до 200 символов
    
$text htmlspecialchars($text); // заменяем опасные теги (<h1>,<br>, и прочие) на безопасные
    
$text mysql_escape_string($text); // функция экранирует все спец-символы в unescaped_string , вследствие чего, её можно безопасно использовать в mysql_query()
    
    // добавляем новую запись в таблицу messages
    
mysql_query("INSERT INTO messages (name,text) VALUES ('" $name "', '" $text "')");
}


// функция выполняем загрузку сообщений из базы данных и отправку их пользователю через ajax виде java-скрипта
function Load()
{
    
// тут мы получили переменную переданную нашим java-скриптом при помощи ajax
    // это:  $_POST['last'] - номер последнего сообщения которое загрузилось у пользователя 

    
$last_message_id intval($_POST['last']); // возвращает целое значение переменной
    
    // выполняем запрос к базе данных для получения 10 сообщений последних сообщений с номером большим чем $last_message_id
    
$query mysql_query("SELECT * FROM messages WHERE ( id > $last_message_id ) ORDER BY id DESC LIMIT 10");
    
    
// проверяем есть ли какие-нибудь новые сообщения
    
if( mysql_num_rows($query) > )
    {
        
// начинаем формировать java-скрипт который мы передадим клиенту
        
$js 'var chat = $("#chat_area");'// получаем "указатель" на div, в который мы добавим новые сообщения
        
        // следующий конструкцией мы получаем массив сообщений из нашего запроса
        
$messages = array();
        while ( 
$row mysql_fetch_array($query) )
        {
            
$messages[] = $row;
        }
        
        
// записываем номер последнего сообщения
        // [0] - это вернёт нам первый элемент в массиве $messages, но так как мы выполнили запрос с параметром "DESC" (в обратном порядке),
        // то это получается номер последнего сообщения в базе данных
        
$last_message_id $messages[0]['id'];
        
        
// переворачиваем массив (теперь он в правильном порядке)
        
$messages array_reverse($messages);
        
        
// идём по всем этементам массива $messages
        
foreach ( $messages as $value )
        {
            
// продолжаем формировать скрипт для отправки пользователю
            
$js .= 'chat.append("<span>' $value['name'] . '&raquo; ' $value['text'] . '</span>");'// добавить сообщние (<span>Имя &raquo; текст сообщения</span>) в наш div 
        
}
        
        
$js .= "last_message_id = $last_message_id;"// запишем номер последнего полученного сообщения, что бы в следующий раз начать загрузку с этого сообщения
        
        // отправляем полученный код пользователю, где он будет выполнен при помощи функции eval()
        
echo $js;
    }
}
?>
Мне разрешено открывать только одну страницу - about :blank. Сперва было скучно, но потом я втянулся. Теперь у меня там живет 2 виртуальных друга, и я слышу голоса из розетки!
spirit-ua вне форума Ответить с цитированием
Старый 31.05.2016, 16:31   #3
spirit-ua
Форумчанин
 
Аватар для spirit-ua
 
Регистрация: 04.06.2009
Сообщений: 351
По умолчанию

index.php
PHP код:
<?php
// Указываем тип и кодировку
Header("Content-Type: text/html; charset=utf-8");
?>
<!-- Указываем DOCTYPE -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>PhpAjaxChat</title>
<!-- У нас всё работает в UTF-8 -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!-- Загружаем стили для чата -->
<link rel="stylesheet" type="text/css" media="screen" href="css.css" />

<!-- Подключаем jQuery -->
<script type="text/javascript" src="jquery.js"></script>

<!-- Сам код нашего чата -->
<script type="text/javascript">

$(document).ready(function () {
    $("#pac_form").submit(Send); // вешаем на форму с именем и сообщением событие которое срабатывает кодга нажата кнопка "Отправить" или "Enter"
    $("#pac_text").focus(); // по поле ввода сообщения ставим фокус
    setInterval("Load();", 2000); // создаём таймер который будет вызывать загрузку сообщений каждые 2 секунды (2000 милесукунд)
});    

// Функция для отправки сообщения
function Send() {
    // Выполняем запрос к серверу с помощью jquery ajax: $.post(адрес, {параметры запроса}, функция которая вызывается по завершению запроса)
    $.post("ajax.php",  
    {
        act: "send",  // указываем скрипту, что мы отправляем новое сообщение и его нужно записать
        name: $("#pac_name").val(), // имя пользователя
        text: $("#pac_text").val() //  сам текст сообщения
    },
     Load ); // по завершению отправки вызвовем функцию загрузки новых сообщений Load()

    $("#pac_text").val(""); // очистим поле ввода сообщения
    $("#pac_text").focus(); // и поставим на него фокус
    
    return false; // очень важно из Send() вернуть false. Если этого не сделать то произойдёт отправка нашей формы, те страница перезагрузится
}

var last_message_id = 0; // номер последнего сообщения, что получил пользователь
var load_in_process = false; // можем ли мы выполнять сейчас загрузку сообщений. Сначала стоит false, что значит - да, можем

// Функция для загрузки сообщений
function Load() {
    // Проверяем можем ли мы загружать сообщения. Это сделанно для того, что бы мы не начали загрузку заново, если старая загрузка ещё не закончилась.
    if(!load_in_process)
    {
        load_in_process = true; // загрузка началась
        // отсылаем запрос серверу, который вернёт нам javascript
        $.post("ajax.php", 
        {
              act: "load", // указываем на то что это загрузка сообщений
              last: last_message_id, // передаём номер последнего сообщения который получил пользователь в прошлую загрузку
              rand: (new Date()).getTime()
        },
           function (result) { // в эту функцию в качестве параметра передаётся javascript код, который мы должны выполнить
            eval(result); // выполняем скрипт полученный от сервера
            $(".chat").scrollTop($(".chat").get(0).scrollHeight); // прокручиваем сообщения вниз
            load_in_process = false; // говорим что загрузка закончилась, можем теперь начать новую загрузку
        });
    }
}
</script>

<body>
<div style="padding: 100px;">
<h1>Php Ajax Chat</h1>
<!-- Вот в этих 2-х div'ах будут идти наши сообщения из чата -->
<div class="chat r4">
<div id="chat_area"><!-- Сюда мы будем добавлять новые сообщения --></div>
</div>
<form id="pac_form" action=""><!-- Наша форма с именем, сообщением и кнопкой для отправки -->
<table style="width: 100%;">
    <tr>
        <td>Имя:</td>
        <td>Сообщение:</td>
        <td></td>
    </tr>
    <tr>
        <!-- Поле ввода имени -->
        <td><input type="text" id="pac_name" class="r4" value="Гость"></td>
        
        <!-- Поле ввода сообщения -->
        <td style="width: 80%;"><input type="text" id="pac_text" class="r4" value=""></td>
        
        <!-- Кнопка "Отправить" -->
        <td><input type="submit" value="Отправить"></td>
    </tr>
</table>
</form>

</div>
</body>
</html>
sql.txt
PHP код:
CREATE TABLE `messages` (
  `
idint(5NOT NULL auto_increment,
  `
namechar(255character set utf8 NOT NULL,
  `
texttext character set utf8,
  
PRIMARY KEY  (`id`)
); 
Мне разрешено открывать только одну страницу - about :blank. Сперва было скучно, но потом я втянулся. Теперь у меня там живет 2 виртуальных друга, и я слышу голоса из розетки!
spirit-ua вне форума Ответить с цитированием
Старый 31.05.2016, 18:00   #4
spirit-ua
Форумчанин
 
Аватар для spirit-ua
 
Регистрация: 04.06.2009
Сообщений: 351
По умолчанию

почитал о методе POST проблему решил так:
кусок кода который был изначально
PHP код:
        $.post("ajax.php"
        {
              
act"load"// указываем на то что это загрузка сообщений
              
lastlast_message_id// передаём номер последнего сообщения который получил пользователь в прошлую загрузку
              
rand: (new Date()).getTime()
        },
           function (
result) { // в эту функцию в качестве параметра передаётся javascript код, который мы должны выполнить
            
eval(result); // выполняем скрипт полученный от сервера
            
$(".chat").scrollTop($(".chat").get(0).scrollHeight); // прокручиваем сообщения вниз
            
load_in_process false// говорим что загрузка закончилась, можем теперь начать новую загрузку
        
}); 
заменен на
PHP код:
        $.post("ajax.php"
        {
              
act"load"// указываем на то что это загрузка сообщений
              
lastlast_message_id// передаём номер последнего сообщения который получил пользователь в прошлую загрузку
              
rand: (new Date()).getTime()
        },
           function (
result) { // в эту функцию в качестве параметра передаётся javascript код, который мы должны выполнить
            //eval(result); // выполняем скрипт полученный от сервера
            
$(".chat").scrollTop($(".chat").get(0).scrollHeight); // прокручиваем сообщения вниз
            
load_in_process false// говорим что загрузка закончилась, можем теперь начать новую загрузку
        
},"script"); 
"косяк" был в функции eval которая была заремлена, а в саму функцию $.post был добавлен 3-й параметр "script"

расскажите на пальцах, почему так происходит? в разных библиотеках jquery по разному обрабатывается функция eval?
Мне разрешено открывать только одну страницу - about :blank. Сперва было скучно, но потом я втянулся. Теперь у меня там живет 2 виртуальных друга, и я слышу голоса из розетки!

Последний раз редактировалось spirit-ua; 31.05.2016 в 19:08.
spirit-ua вне форума Ответить с цитированием
Старый 31.05.2016, 18:35   #5
Fenex
Форумчанин
 
Аватар для Fenex
 
Регистрация: 15.02.2012
Сообщений: 823
По умолчанию

`eval` - это нативная функция javascript и не имеет отношения к jquery. Кстати, использование функции `eval` лучше избегать. Лучше сервером отдавать данные в JSON-формате, а на клиенте их обрабатывать, чем от сервера посылать выполняемый javascript-код.

Крайне скверная реализация данного чата, о ч е н ь плохой тон так делать.
^-.-^ My GitHub

Последний раз редактировалось Fenex; 31.05.2016 в 18:37.
Fenex вне форума Ответить с цитированием
Старый 31.05.2016, 18:47   #6
Fenex
Форумчанин
 
Аватар для Fenex
 
Регистрация: 15.02.2012
Сообщений: 823
По умолчанию

Надо чтобы было что-то вроде этого (не проверял работоспособность):

Код:
if( mysql_num_rows($query) > 0 ) 
    { 
        $messages = [];
        while ( $row = mysql_fetch_array($query) ) 
        { 
            $messages[] = $row; 
        }
        
        $last_message_id = $messages[0]['id'];

        $messages = array_reverse($messages);        

        print json_encode(["msg" => $messages, 'last' => $last_message_id]);
    }
Код:
$.post("ajax.php", 
        {
              act: "load",
              last: last_message_id,
              rand: (new Date()).getTime()
        },
           function (data) {
            data = JSON.parse(data);
            last_message_id = data.last;
            var chat = $("#chat_area");
            for(var i=0; i<data.msg.length; i++) {
                chat.append("<span>" + data.msg[i].name + "&raquo; " + data.msg[i].text + "</span>");
            }
            $(".chat").scrollTop($(".chat").get(0).scrollHeight); // прокручиваем сообщения вниз
            //load_in_process = false; // говорим что загрузка закончилась, можем теперь начать новую загрузку
        });
^-.-^ My GitHub
Fenex вне форума Ответить с цитированием
Старый 31.05.2016, 18:48   #7
spirit-ua
Форумчанин
 
Аватар для spirit-ua
 
Регистрация: 04.06.2009
Сообщений: 351
По умолчанию

Цитата:
`eval` - это нативная функция javascript и не имеет отношения к jquery
не силен в данном вопросе но почему с разными библиотеками ведет себя по разному?
Цитата:
Лучше сервером отдавать данные в JSON-формате
JSON еще не пробовал, знаю что это "переходник" для данных но нужно изучать
Цитата:
чем от сервера посылать выполняемый javascript-код
чем такая реализация "скверная"? если есть такой механизм значит он имеет право на жизнь.
Чем плох метод? уязвимость? нестабильность? кросбраузерность? наличие javascript? или ...

Очень хочу получить "разжованые" ответы
Мне разрешено открывать только одну страницу - about :blank. Сперва было скучно, но потом я втянулся. Теперь у меня там живет 2 виртуальных друга, и я слышу голоса из розетки!
spirit-ua вне форума Ответить с цитированием
Старый 01.06.2016, 01:17   #8
Fenex
Форумчанин
 
Аватар для Fenex
 
Регистрация: 15.02.2012
Сообщений: 823
По умолчанию

Цитата:
Сообщение от spirit-ua Посмотреть сообщение
чем такая реализация "скверная"? если есть такой механизм значит он имеет право на жизнь.
Чем плох метод? уязвимость? нестабильность? кросбраузерность? наличие javascript? или ...
Уязвимость - да. И к тому же получается каша. Вы пишите javascript код внутри PHP кода, т.е. смешиваете в кучу две совершенно разные вещи, которые делают разные задачи, да ещё и в разных местах (сервер\клиент).
^-.-^ My GitHub
Fenex вне форума Ответить с цитированием
Старый 01.06.2016, 08:55   #9
spirit-ua
Форумчанин
 
Аватар для spirit-ua
 
Регистрация: 04.06.2009
Сообщений: 351
По умолчанию

Цитата:
Вы пишите javascript код внутри PHP кода, т.е. смешиваете в кучу две совершенно разные вещи, которые делают разные задачи, да ещё и в разных местах (сервер\клиент)
код не мой, взял как пример, наберусь наглости попросить расписать как правильно реализовать чат

Сам код не нужен, интересует сама организация поэтапно, что то вроде блок-схемы, порядок операций шаг за шагом как клиента так и сервера
Мне разрешено открывать только одну страницу - about :blank. Сперва было скучно, но потом я втянулся. Теперь у меня там живет 2 виртуальных друга, и я слышу голоса из розетки!
spirit-ua вне форума Ответить с цитированием
Старый 01.06.2016, 14:41   #10
Fenex
Форумчанин
 
Аватар для Fenex
 
Регистрация: 15.02.2012
Сообщений: 823
По умолчанию

Цитата:
Сообщение от spirit-ua Посмотреть сообщение
код не мой, взял как пример, наберусь наглости попросить расписать как правильно реализовать чат
Это смотря какие технологии вы готовы применять. Можно конечно сделать через ajax, но тут больше подойдут сокеты. А сокеты в свою очередь проще и без костылей использовать с NodeJS чем с PHP. Либо можно взять вообще готовый чат-сервер, например xmpp, и останется написать только клиентскую часть (так сделано, например, на клавогонках).
^-.-^ My GitHub
Fenex вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
PHP + AJAX Fier PHP 2 10.12.2012 13:41
AJAX + PHP errload JavaScript, Ajax 11 19.05.2012 02:40
Чат PHP+MySql+Ajax Terazoid Фриланс 2 31.10.2011 07:26
Нужен чат на php + ajax. Abuhamed Фриланс 3 24.01.2011 22:11