Говорят, что создание сайта - очень длительный и трудоемкий процесс. Мы скажем - НЕТ! Ведь с новыми технологиями, такими как HTML5, CSS3, PHP и MySql можно быстро и легко научиться создавать сайты любой сложности.
Два сумасшедших веб-мастера покажут где что лежит и как этим пользоваться.
Авторизация
Новый
Забыл
Пожалуйста, заполните поля выше. Это нужно сделать обязательно, иначе ничего не получится.
PHP Статейки /

Создание простого вэб-чата

  • Вторник, 16 ноября 2011, 04:09 |
  • Автор: karpovi4 |
  • Просмотров: 27471 |
  • Комментарии: 36 |
  • В закладки:
В этой статье я покажу вам как создать простой вэб-чат с помощью php и jquery. Может пригодится, к примеру, при организации обратной связи или поддержки на сайте. Все организовано просто и красиво.

Вступление
Создание простого вэб-чата

Как видно на картинке, наш чат получится довольно простым и милым.
Исходники данного урока - source.zip [2.69 Kb] (cкачиваний: 784)

Стэп уан: HTML
Начнем все с создания файла index.php
<!DOCTYPE">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<title>Chat - Customer Module</title>  
<link type="text/css" rel="stylesheet" href="style.css" />  
</head>  
  
<div id="wrapper">  
    <div id="menu">  
        <p class="welcome">Welcome, <b></b></p>  
        <p class="logout"><a id="exit" href="#">Exit Chat</a></p>  
        <div style="clear:both"></div>  
    </div>  
  
    <div id="chatbox"></div>  
  
    <form name="message" action="">  
        <input name="usermsg" type="text" id="usermsg" size="63" />  
        <input name="submitmsg" type="submit"  id="submitmsg" value="Send" />  
    </form>  
</div>  
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>  
<script type="text/javascript">  
// jQuery Document  
$(document).ready(function(){  
  
});  
</script>  
</body>  
</html>


Шаг второй: CSS стайлинГ
Для того, чтобы наш чат-апликейшн выглядел круче (чем со стандартными браузерскими стилями) сами объявляем стили.
/* CSS Document */  
body {  
    font:12px arial;  
    color: #222;  
    text-align:center;  
    padding:35px; }  
  
form, p, span {  
    margin:0;  
    padding:0; }  
  
input { font:12px arial; }  
  
a {  
    color:#0000FF;  
    text-decoration:none; }  
  
    a:hover { text-decoration:underline; }  
  
#wrapper, #loginform {  
    margin:0 auto;  
    padding-bottom:25px;  
    background:#EBF4FB;  
    width:504px;  
    border:1px solid #ACD8F0; }  
  
#loginform { padding-top:18px; }  
  
    #loginform p { margin: 5px; }  
  
#chatbox {  
    text-align:left;  
    margin:0 auto;  
    margin-bottom:25px;  
    padding:10px;  
    background:#fff;  
    height:270px;  
    width:430px;  
    border:1px solid #ACD8F0;  
    overflow:auto; }  
  
#usermsg {  
    width:395px;  
    border:1px solid #ACD8F0; }  
  
#submit { width: 60px; }  
  
.error { color: #ff0000; }  
  
#menu { padding:12.5px 25px 12.5px 25px; }  
  
.welcome { float:left; }  
  
.logout { float:rightright; }  
  
.msgln { margin:0 0 2px 0; }


Шаг 3 : Создание формы входа
Функция loginForm() содержит простую форму входа, которая спрашивает имя пользователя. Далее мы проверяем это имя на спец. символы и не пустое ли оно. Если все норм, то определяем это имя как $_SESSION['name'].
<?  
session_start();  
  
function loginForm(){  
    echo'
    <div id="loginform">
    <form action="index.php" method="post">
        <p>Please enter your name to continue:</p>
        <label for="name">Name:</label>
        <input type="text" name="name" id="name" />
        <input type="submit" name="enter" id="enter" value="Enter" />
    </form>
    </div>
    ';  
}  
  
if(isset($_POST['enter'])){  
    if($_POST['name'] != ""){  
        $_SESSION['name'] = stripslashes(htmlspecialchars($_POST['name']));  
    }  
    else{  
        echo '<span class="error">Please type in a name</span>';  
    }  
}  
?>  

Показываем форму логина
Все просто. Если для пользователя создана сессия - показываем ему окно чата. В ином случае - форму входа.
<?php  
if(!isset($_SESSION['name'])){  
    loginForm();  
}  
else{  
?>  
<div id="wrapper">  
    <div id="menu">  
        <p class="welcome">Welcome, <b><?php echo $_SESSION['name']; ?></b></p>  
        <p class="logout"><a id="exit" href="#">Exit Chat</a></p>  
        <div style="clear:both"></div>  
    </div>  
    <div id="chatbox"></div>  
  
    <form name="message" action="">  
        <input name="usermsg" type="text" id="usermsg" size="63" />  
        <input name="submitmsg" type="submit"  id="submitmsg" value="Send" />  
    </form>  
</div>  
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>  
<script type="text/javascript">  
// jQuery Document  
$(document).ready(function(){  
});  
</script>  
<?php  
}  
?>  

Создание простого вэб-чата

Приветствие и выход
Прежде всего, добавляем имя пользователя в приветствии.
<p class="welcome">Welcome, <b><?php echo $_SESSION['name']; ?></b></p>

Получатся вот так:
Создание простого вэб-чата

С помощью jquery пишем функцию завершения сессии:
<script type="text/javascript">  
// jQuery Document  
$(document).ready(function(){  
    //If user wants to end session  
    $("#exit").click(function(){  
        var exit = confirm("Are you sure you want to end the session?");  
        if(exit==true){window.location = 'index.php?logout=true';}  
    });  
});  
</script>

Если пользователь изъявляет желание выйти (что стремиться к нулю, но все же) выскакивает окно подтверждения. Далее, при нажатии на "ок" перенаправляем пользователя на главную страницу с параметром logout=true.
Создание простого вэб-чата

if(isset($_GET['logout'])){   
  
    //Simple exit message  
    $fp = fopen("log.html", 'a');  
    fwrite($fp, "<div class='msgln'><i>User ". $_SESSION['name'] ." has left the chat session.</i><br></div>");  
    fclose($fp);  
  
    session_destroy();  
    header("Location: index.php"); //Redirect the user  
}


Четвертый шаг: Обработка ввода
Добиваемся синхронной работы на стороне клиента и сервера.
jQuery
В этой части, jquery мы используем для post-запросов к /post.php
$("#submitmsg").click(function(){  
    var clientmsg = $("#usermsg").val();  
    $.post("post.php", {text: clientmsg});  
    $("#usermsg").attr("value", "");  
    return false;  
});

PHP – post.php
<?  
session_start();  
if(isset($_SESSION['name'])){  
    $text = $_POST['text'];  
  
    $fp = fopen("log.html", 'a');  
    fwrite($fp, "<div class='msgln'>(".date("g:i A").") <b>".$_SESSION['name']."</b>: ".stripslashes(htmlspecialchars($text))."<br></div>");  
    fclose($fp);  
}  
?>


Шаг 5 : Выводим журнал чата (log.html)
Все, что постит пользователь обрабатывается с помощью jquery, передается в post.php и, с помощью php, записывается в журнал чата.
ДЛя сохранения времени:
<div id="chatbox"><?php  
if(file_exists("log.html") && filesize("log.html") > 0){  
    $handle = fopen("log.html", "r");  
    $contents = fread($handle, filesize("log.html"));  
    fclose($handle);  
  
    echo $contents;  
}  
?></div>

jQuery.ajax запросы
Аjax запросы - самое главное из всего что мы делали) Мы сможем получать новую информацию не перезагружая страницы.
    function loadLog(){       
  
        $.ajax({  
            url: "log.html",  
            cache: false,  
            success: function(html){  
                $("#chatbox").html(html); //Insert chat log into the #chatbox div  
            },  
        });  
    }  

Автопрокрутка
Как вы могли видеть, во многих чатах реализована автопрокрутка контента при поступлении новых сообщений. Мы тоже это сделаем)
function loadLog(){  
    var oldscrollHeight = $("#chatbox").attr("scrollHeight") - 20; //Scroll height before the request  
    $.ajax({  
        url: "log.html",  
        cache: false,  
        success: function(html){  
            $("#chatbox").html(html); //Insert chat log into the #chatbox div    
  
            //Auto-scroll  
            var newscrollHeight = $("#chatbox").attr("scrollHeight") - 20; //Scroll height after the request  
            if(newscrollHeight > oldscrollHeight){  
                $("#chatbox").animate({ scrollTop: newscrollHeight }, 'normal'); //Autoscroll to bottom of div  
            }  
        },  
    });  
}  

Постоянное обновление чата
setInterval (loadLog, 2500);

Эта функция будет обнавлять наш loadLog() каждые 2.5 секунд со всеми вытекающими)

Вот и все) С уважением, Карпович


Возможно вам будет интересно почитать материал про самые простые техники адаптивной верстки.

А если у Вас есть автомобиль, нелишним будет узнать, где продаются б у резина и диски.
  • Тэги публикацииphp, jQuery
  • Пишет: Юра (Гости) |
  • Сообщений: 0 |
  • 15 октября, 23:10
  • #1
хуйня твой чат. ты хоть пробовал сам запустить его? Он же не работает
  • Пишет: Сергей (Гости) |
  • Сообщений: 0 |
  • 16 ноября, 15:11
  • #2
Спасибо за чат!
Все прекрасно работает под Denwer`ом. Автор не виноват что у кого-то руки ниже пояса ростут
  • Пишет: я (Гости) |
  • Сообщений: 0 |
  • 18 ноября, 16:11
  • #3
спасибо за чат
как раз то что я искал
  • Пишет: Marchell (Гости) |
  • Сообщений: 0 |
  • 5 декабря, 13:12
  • #4
That's a srhwed answer to a tricky question
  • Пишет: Radik (Гости) |
  • Сообщений: 0 |
  • 5 декабря, 18:12
  • #5
Нормально работает, только на UTF-8 не получается
  • Пишет: RAMS (Гости) |
  • Сообщений: 0 |
  • 29 декабря, 17:12
  • #6
Спасибо огромное за чат! взял его за основу и перевёл на mysql - работает обалденно. Никакой проблемы с кодировками нет.
Очень хорошо. Проверил, чат отлично работает. Правда переделал под себя, но принцип оставил тот же. Мне данный материал очень пригодился. Если бы не эта статья, то я бы сделал чат по дурачкому, ибо хотел делать совсем по другой схеме.

Спасибо!

Юра, из первого поста, ты придурок!
  • Пишет: Эли (Гости) |
  • Сообщений: 0 |
  • 18 марта, 20:03
  • #8
Я не хуя не понял...


Я не хуя не понял...
Добавить комментарий