Как создать простой чат с нуля

[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]

Страница 1 из 1
1

Nis

Дата: Суббота, 10.09.2011, 17:00 | Сообщение # 1

Basicminator

Группа: Администраторы

Сообщений: 46

Репутация: 32767

Статус: Offline

Что мы будем делать? А делать мы будем простой чат, который Вы видите ниже.

Чат, который мы будем делать сейчас - очень прост. Он будет состоять из системы входа и выхода, функций в стили AJAX, а также поддержки нескольких пользователей.
ШАГ 1. HTML
Начнём с того, что создадим файл под именем index.php

Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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>

Мы начали наш HTML документ с обычного объявления тегов DOCTYPE, html, head, body. В теге head мы указываем название, а также прикрепляем нашу каскадную страницу стилей (style.css)
В теге body мы создаём #wrapper div. У нас 3 блока: простое меню, экран чата, и поле для ввода сообщения, у каждого соответствующий div и id.
#menu div состоит из 2 параграфов (<p>). Первый - это приветствие, второй - ссылка "Выход"
#chatbox div состоит только из записей чата. Мы будем загружать наши записи из отдельного файла использую так называемый jQuery's ajax.
#wrapper div - это и есть наша форма, которая состоит из поля для ввода и кнопки "отправить"
В конце мы вставим скрипты, чтоб наша страница загружалась быстрее. Сначала мы сошлёмся на Google jQuery CDN, так как мы используем библиотеку jQuery. Второй скрипт будет загружать весь наш код после того, как документ готов.
ШАГ 2. CSS
Мы добавим немного css кода, чтоб наш чат был красивым. Данный код нужно добавить в файл style.css

Code

/* 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. Создаём форму для входа на PHP
Сейчас мы создадим простую форму, которая бы просила ввести имя перед использованием чата.

Code

<?
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>';
     }
}
?>

Функция loginForm() представляет собой простую форму для входа, которая просит ввести имя. Затем мы используем оператор if-else чтоб проверить, ввёл ли пользователь имя. Если пользователь ввёл имя, то оно сохраняется в переменной $_SESSION['name'] . Так как мы используем основанную на кукис сессию (cookie-based session) для хранения имени, то мы должны сначала вызвать функцию session_start().
Один из основных пунктов, на который нужно обратить внимание - это использование функции htmlspecialchars(), которая конвертирует специальные символы в элементы HTML, чтоб переменная имени не стала жертвой межсайтового скриптинга (Cross-site scripting (XSS)).
Отображение формы входа
Для того, чтобы форма входа отображалась только если пользователь не вошёл и не создана сессия, мы используем очередной оператор if-else. Работать это у нас будет следующим образом: если пользователь не ввёл имя, то ему предлагается ввести его. Иначе отображается имя пользователя и появляется чат.

Code

<?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
}
?>

Приветствие и выход
Мы только-что закончили разработку системы входа в чат. Но нам так же необходимо сделать, чтоб пользователь мог в любое время выйти из чата, закрыв сессию. Как Вы помните, мы уже создали ссылку для выхода, но давайте вернёмся назад, и добавим немного PHP кода, чтоб наше меню было более функционально.

Для начала давайте добавим имя пользователя в приветствие. Сделать мы можем это следующим образом:

Code

<p class="welcome">Welcome, <b><?php echo $_SESSION['name']; ?></b></p>

Для того, чтобы дать возможность пользователю покинуть чат, давайте "прыгнем вперёд", и вставим jQuery.

Code

Приведённый выше код jQuery просто выводит подтверждающее окошко когда пользователь нажимает на "Выход". Если пользователь подтверждает, что он хочет выйти, то мы отправляем его по адресу index.php?logout=true. Если Вы не знаете что это значит, то объясню: просто создаётся переменная logout значение которой true.

Code

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
}

При помощи функции isset() мы проверяем, существует ли переменная 'logout' . Если переменная передана через url, как мы это делали выше, то сессия закрывается. Но перед тем, как уничтожить сессию, мы выводим простое сообщение в окне чата, что пользователь вышел. Мы делаем это, используя функции fopen(), fwrite(), fclose() для манипуляции нашим файлом log.html, в котором хранятся записи чата.

После уничтожения сессии, мы перенаправляем пользователя на туже самую страницу, где теперь появляется форма ввода имени.
ШАГ 4. Обработка ввода пользователя
После того, как пользователь отправит форму, мы должны обработать содержимое ввода и добавить данную запись в наш файл с записями, чтоб она отобразилась в окне чата. Для этого мы должны синхронизировать работу jQuery и PHP на стороне клиента и сервера.
jQuery
Почти всё, что мы собираемся сделать с jQuery для обработки данных будет связано с запросом jQuery на отправку.

Code

//если пользователь отправил форму
$("#submitmsg").click(function(){
     var clientmsg = $("#usermsg").val();
     $.post("post.php", {text: clientmsg});
     $("#usermsg").attr("value", "");
     return false;
});

Перед тема, как что-либо делать, мы должны перехватить ввод пользователя или то, что было введено в поле #submitmsg. Сделать это мы можем при помощи функции val(), которая получает значение, введённое в поле формы. Теперь это значение мы храним в переменной clientmsg.
Далее идёт самая важная часть: запрос jQuery. Он отправляет запрос методом POST файлу post.php, который мы создадим чуть позже. Т.е. отправляется то, что ввёл пользователь или то, что хранится в переменной clientmsg.
Далее мы очищаем поле ввода #usermsg установив его значение = " ".
PHP - post.php
Чуть выше мы отправили содержимое формы ввода файлу post.php методом POST. Теперь наша цель - получить эти данные и добавить их в наш файл с записями.

Code

<?
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);
}
?>

Мы начинаем наш файл post.php с функции session_start(), так как мы будем использовать сессию, а именно будем выводить имя пользователя.
Далее используем булеан функцию isset() для проверки, существует ли у нас сессия для 'name'
Затем мы получаем данные, отправлнные через jQuery данному файлу. Мы храним эти данные в переменной $text.
Эти данные, как и все введённый пользователем, будут храниться в файле log.html. Для этого мы открываем файл с помощью функции fopen() в режиме 'a', которая согласно php.net "открывает файл только для записи; помещает указатель в конец файла. Если файл не существует, то пытается создать его". Далее мы записываем сообщение в файл с помощью функции fwrite()
Сообщение, которое мы будем записывать, заключено в msgln div. Оно содержит дату и время, сгенерированные при помощи функции date(), имя пользователя, и текст, который также обрабатывается функцией htmlspecialchars(), чтоб защитить его от межсайтового скриптинга (Cross-site scripting (XSS))
Затем мы закрываем файл при помощи функции fclose().
[b]ШАГ 5. Отображение содержимого файла log.html (вывод сообщений чата)[/b]
Всё, что вводит пользователь, обрабатывается и отправляется используя jQuery. Всё, что осталось сделать - это отображение записей чата.

Code

<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>

То, что мы сделаем здесь - очень похоже с действиями, проделанными выше с файлом post.php.
Запрос jQuery.ajax
Запрос ajax - это сердце всего, что мы делали. Данный запрос позволяет нам не только отправлять и получать данные форм без обновления страницы, но также позволяет обрабатывать запросы.

Code

//Load the file containing the chat log
     function loadLog(){

         $.ajax({
             url: "log.html",
             cache: false,
             success: function(html){
                 $("#chatbox").html(html); //Insert chat log into the #chatbox div
             },
         });
     }

Мы поместили наш ajax запрос в тело функции. Зачем мы это сделали - мы увидим позже. Как Вы можете видеть выше, мы используем только 3 объекта jQuery ajax.

url: строка url для запроса. Мы используем файл с записями log.html
cache: предотвращает кэширование нашего файла. Это даст гарантию нам, что содержимое окна чата будет обновлять каждый раз, когда мы будем отправлять запрос.
sucess: позволяет нам прикрепить функцию, которая будет передавать данные, которые мы запрашиваем.
Как Вы видите, дальше мы перемещаем данные, которые запрашивали (html), в #chatbox div.
Автопрокрутка
Как Вы могли видеть в других чатах, содержимое автоматически прокручивается вниз, когда контейнер с записями (#chatbox) переполняется. Мы собираемся реализовать одно очень нужно дополнение: мы будем сравнивать высоту прокручиваемого контейнера до и после ajax запроса. Если после запроса высота больше, то мы прокручиваем #chatbox div используя анимированный эффект jQuery.

Code

//Load the file containing the chat log
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
             }
         },
     });
}

Мы записываем значение высоты #chatbox div в переменную oldscrollHeight перед тем, как сделать запрос.
После того, как наш запрос был успешно выполнен, мы храним значение высоты #chatbox div в переменной newscrollHeight.
Затем мы сравниваем обе переменные со значением высоты используя оператор if. Если newscrollHeight больше oldscrollHeight то мы прокручиваем #chatbox div используя анимированный эффект.
Постоянное обновление записей чата
Сейчас может возникнуть один вопрос: как можно постоянно обновлять данные?

setInterval (loadLog, 2500); //Reload file every 2500 ms or x ms if you wish to change the second parameter
Ответ на Ваш вопрос и есть функция setInterval (). Данная функция будет запускать нашу функцию loadLog() каждые 2.5 секунды.

Заключение
Ну вот мы и закончили! Надеюсь, Вы поняли, как работает простой чат. Если есть какие-либо предложения и пожелания - то рад буду выслушать.

Alexey

Дата: Воскресенье, 26.01.2014, 10:36 | Сообщение # 2

Рядовой

Группа: Пользователи

Сообщений: 1

Репутация: 0

Статус: Offline

намного проще создать почти такой-же чат из 4 фолов
Создаем файл index.php
Код
<?
session_start();

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
}

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>';
}
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Chat - Customer Module</title>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>

<?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"><?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>

<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(){
//If user submits the form
$("#submitmsg").click(function(){
var clientmsg = $("#usermsg").val();
$.post("post.php", {text: clientmsg});
$("#usermsg").attr("value", "");
return false;
});

//Load the file containing the chat log
function loadLog(){
var oldscrollHeight = $("#chatbox").attr("scrollHeight") - 20;
$.ajax({
url: "log.html",
cache: false,
success: function(html){
$("#chatbox").html(html); //Insert chat log into the #chatbox div
var newscrollHeight = $("#chatbox").attr("scrollHeight") - 20;
if(newscrollHeight > oldscrollHeight){
$("#chatbox").animate({ scrollTop: newscrollHeight }, 'normal'); //Autoscroll to bottom of div
}
},
});
}
setInterval (loadLog, 2500); //Reload file every 2.5 seconds

//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>
<?php
}
?>
</body>
</html>

Создаем файл log.html его можно оставить пусным

Создаем файл post.php

Код
<?
session_start();
if(isset($_SESSION['name'])){
$text = $_POST['text'];

$fp = fopen("log.html", 'a');
fwrite($fp, "<div class='msgln'><b>".$_SESSION['name']."</b>: ".stripslashes(htmlspecialchars($text))."<br></div>");
fclose($fp);
}
?>

и последний файл style.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:#FF0000;
width:504px;
border:1px solid #ACD8F0; }

#loginform { padding-top:18px;background:#FF0000; }

#loginform p { margin: 5px; }

#chatbox {
text-align:left;
margin:0 auto;
margin-bottom:25px;
padding:10px;
background:#0000FF;
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:right; }

.msgln { margin:0 0 2px 0; }

mr-admin

Дата: Четверг, 06.02.2014, 15:44 | Сообщение # 3

Рядовой

Группа: Пользователи

Сообщений: 1

Репутация: 0

Статус: Offline

Интересно! а возможно с правого боку сделать имена пользователей типо такого

Цитата

http://hkar.ru/plxp

Как создать простой чат с нуля

Страница 1 из 1
1

Мой сайт