Дописать web-чат

@CodexGigs · Регистрация: 26.11.2016

Студворк — интернет-сервис помощи студентам

Всем привет, у меня есть задача написать чат, используя исключительно php, js, html, css, я поигрался дня 4 и решил что мне нужна помощь вот все что у меня есть на данный момомент,

Index.php

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
  
  <?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="index.php" include"post.php" method="post">  
        <?php
        if (isset ($_post['enter'])){
            if ($_post['message']!=""){
                $_session['massege']=stripslashes(htmlspecialchars($_POST['massege']));  
            }
        }
        ?>
        <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=""></script>  
<script type="text/javascript">  
$(document).ready(function(){  
});  
</script>  
<?php  
}  
?>  
 
  
  </body>  
</html>

style.css

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 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; }

post.php

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?  
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);  
}  
?> 
<?  
session_start();  
if(isset($_SESSION['message'])){  
    $text = $_POST['text'];  
    $fp = fopen("log.html", 'b');  
    fwrite($fp, "<div class='msgln'>(".date("g:i A").") <b>".$_SESSION['message']."</b>: ".stripslashes(htmlspecialchars($text))."<br></div>");  
    fclose($fp);  
}  
?>

log.html

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>  
<head>  
<title>save</title>  
<link type="text/css" rel="stylesheet" href="style.css" />  
</head>  
  <body>
<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 class='msgln'/n>

приму любую помощь, желательно с пошаговыми комментариями)

@Complex138 · 16.12.2016, 23:43

Главная страница всего гемороя

index.php

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<?
session_start(); // Запускаем сессию
 
if(isset($_GET['logout'])){  //Если пришел запрос на выход
    
    // Если тело свалило из чата
    $fp = fopen("log.html", 'a'); //Открываем лог файл и пишем туда
    fwrite($fp, "<div class='msgln'><i>Участник ". $_SESSION['name'] ." вышел из чата</i><br></div>"); //Участник НУБ свалил из чата
    fclose($fp); // закрываем лог файл
    
    session_destroy(); //Убиваем к .!. собачим сесию
    header("Location: index.php"); // Отправляем в ад неформала
}
 
function loginForm(){  // Функция вывода формы авторизации
    echo'
    <div id="loginform">
    <form action="index.php" method="post">
        <p>Пожалуйста, напишите ваш имя и нажмите кнопку войти</p>
        <label for="name">Имя:</label>
        <input type="text" name="name" id="name" />
        <input type="submit" name="enter" id="enter" value="Войти в чат" />
    </form>
    </div>
    ';
}
 
if(isset($_POST['enter'])){ // Если существует пост отправки сообщения
    if($_POST['name'] != ""){ // И если поля имени не пустое
        $_SESSION['name'] = stripslashes(htmlspecialchars($_POST['name'])); // То экранируем всю дичь и удаляем АШ-ТИ-ЭМ-ЭЛЬ теги и разАчаровываем ШКОЛОХАКЕРОВ
    }
    else{
        echo '<span class="error">Пожалуйста, введите свое имя</span>'; // Иначе шлем его куда подальше
    }
}
?>
<head>
<title>НубоЧат By Complex138 | CyberForum</title>
  <meta content="text/html; charset=windows-1251" http-equiv="Content-Type" />
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
 
<?php
if(!isset($_SESSION['name'])){ // Если не существует сессия с именем, то
    loginForm(); // Вызываем функцию формы авторизации
}
else{ //Иначе инициализируем форму чата
?>
<div id="wrapper">
    <div id="menu">
        <p class="welcome">Здарова! <b><?php echo $_SESSION['name']; ?></b></p>
        <p class="logout"><a id="exit" href="#">Свалить!</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="Отправить" />
    </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).ready(function(){
    //Если нуб отправил сообщение
    $("#submitmsg").click(function(){   
        var clientmsg = $("#usermsg").val();
        $.post("post.php", {text: clientmsg});              
        $("#usermsg").attr("value", "");
        return false;
    });
    
    //Подключаем файл в котором содержиться вся переписка пользователей
    function loadLog(){     
        var oldscrollHeight = $("#chatbox").attr("scrollHeight") - 20;
        $.ajax({
            url: "log.html",
            cache: false,
            success: function(html){        
                $("#chatbox").html(html);               
                var newscrollHeight = $("#chatbox").attr("scrollHeight") - 20;
                if(newscrollHeight > oldscrollHeight){
                    $("#chatbox").animate({ scrollTop: newscrollHeight }, 'normal'); //Автоматически крутить чат на последнее сообщение
                }               
            },
        });
    }
    setInterval (loadLog, 2500);    //Обновляем окно чата каждые 2,5 секунды, чтобы не засирать MEMORY
    
    //Если он надумал сделать ноги, ПАКА АДМЕНА нет
    $("#exit").click(function(){
        var exit = confirm("Вы уверены что хотите закончить общение?");
        if(exit==true){window.location = 'index.php?logout=true';
        alert('Ну и вали накуй от сюда, еще раз зайдеЖ винду слАмаю!')}    //И на последок соли ему xD
            
    });
});
</script>
<?php
} // Эта скопка закрывает условия ELSE между которых находиться скрипт! НЕ УДАЛЯТЬ!!!
?>
</body>
</html>

Это файл обработки отправляемых сообщений

post.php

PHP
1
2
3
4
5
6
7
8
9
10
<?
session_start();
if(isset($_SESSION['name'])){ //Если существует сессия с именем
    $text = $_POST['text']; // Присваеваем переменной $text значение из ПОСТ запроса, тоесть мессагу нуба
    
    $fp = fopen("log.html", 'a'); // Открываем лог чата и пишем
    fwrite($fp, "<div class='msgln'><span>(".date("g:i").")</span> <b>".$_SESSION['name']."</b>: ".stripslashes(htmlspecialchars($text))."<br></div>");// Записываем в формате (время) Ник: Сообщение | (00:00) Complex: Hello World |
    fclose($fp);// закрываем лог чата
}
?>

Ну и тут стиль оформления

style.css

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
body {
    font:12px arial;
    color: #222;
    text-align:center;
    padding:35px;
    color: #333333;
    font-family: Arial,Helvetica,sans-serif;
    margin: 0;
    padding: 0;
    }
 
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;
    margin-top:150px;
    padding-bottom:25px;
    background:#EBF4FB;
    width:704px;
    border:1px solid #b8b8b8; 
    
    background:#fff url('img/top_bg.jpg') top center repeat-x;
    }
 
#loginform { padding-top:18px; }
 
    #loginform p { margin: 5px; }
    
    #loginform  label{font-weight:bold}
#loginform p{margin-bottom:20px}
 
#chatbox {
    text-align:left;
    margin:0 auto;
    margin-bottom:25px;
    padding:10px;
    background:#fff;
    height:270px;
    width:630px;
        border:1px solid #b8b8b8; 
    overflow:auto; }
 
#usermsg {
    width:565px;
    border:1px solid #b8b8b8;
 
height:20px;    }
 
#submit { width: 60px; }
 
.error { color: #ff0000; display:block; margin:0 auto; margin-bottom:-15px;}
 
#menu { padding:12.5px 25px 12.5px 25px; }
 
.welcome { float:left; }
 
.logout { float:right; color:#000}
.logout a { color:#000; }
 
.msgln { margin:0 0 5px 0; }
.msgln span{font-size:10px; }
.msgln b{ color:#e96e45 }

======================================== =========
Только не забудь создать файл лога чата.
log.html

@Vshining · 16.12.2016, 23:49

В чём конкретно проблема?

@Pi Ey · 17.12.2016, 12:41

Зачем в файл записывать ?
Можно просто в БД

и вытаскивать (MYSQL)

PHP
1
2
3
4
5
6
7
8
9
10
11
$data['server'] = 'Сервер';
$data['username'] = 'Имя пользователя';
$data['password'] = 'Пароль';
$data['db'] = 'База данных';
if( $connect = mysql_connect($data['server'], $data['username'], $data['password']) ) {
  mysql_select_db($data['db'], $connect);
  $sql = mysql_query('SELECT * FROM messages');  
  while($x=mysql_fetch_array($sql)){
   echo "<p><b>Message #{$x['id']}</b><br/>[{$x['time']}] <b>{$x['username']}</b>: {$x['message']}</p>";
  }
}

Не так уж и сложно, не правда ли !?

@CodexGigs · 17.12.2016, 21:40 **[ТС]**

Спасибо, все понятно написал) и даже все круто пояснил + юмор)

Новые блоги и статьи Все статьи Все блоги /
Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .
Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .

@Vshining 65 / 65 / 47 Регистрация: 04.12.2016 Сообщений: 214
	16.12.2016, 23:49
	В чём конкретно проблема? 0

@CodexGigs 0 / 0 / 0 Регистрация: 26.11.2016 Сообщений: 33
	17.12.2016, 21:40 [ТС]
	Спасибо, все понятно написал) и даже все круто пояснил + юмор) 0

Дописать web-чат

Решение