Чат + форма будут иметь вид:
onkeypress="ctrlEnter(event, this);" - этим добавим отслеживание сочетания клавиш.<h2>Чат</h2> <form method="post" onkeypress="ctrlEnter(event, this);"> Ваше имя: <input type="text" id="name" name="name" value="" required/> Сообщение: <textarea id="message" type="text" name="message" class="message form-control" value="" required></textarea> <input type="submit" id="submit" value="Отправить" class="btn btn-success" /> </form> <div id="chat"></div>
Отправка формы будет происходить методом AJAX в файл chat.php, для этого добавим JS:
encodeURIComponent() - добавляем для экранирования спецсимволов в сообщении, например знак "+" без этой функции проходить не будет.$(function() { $("#submit").click(function() { // получаем то, что написал пользователь var name = $("#name").val(); var message = encodeURIComponent($("#message").val()); if(message != "") { // Формируем строку запроса var data = 'name='+ name +'&message='+ message; // ajax вызов $.ajax({ type: "POST", url: "chat.php", data: data, success: function(html){ // после получения результата $("#chat").slideToggle(500, function(){ $(this).html(html).slideToggle(500); $("#message").val(""); }); } }); } else { alert("А сообщение ввести?!"); } return false; }); });
Для автоматического обновления чата без обновления страницы добавим:
И обработчик chat.php:function refresh_chat() { var data = 'refresh=1'; $.ajax({ type: "POST", url: "chat.php", data: data, success: function(html){ $("#chat").html(html); } }); } //заполнить страницу в первый раз refresh_chat(); // обновить каждые 15 секунд setInterval("refresh_chat()", 15000);
И дамп MySQL таблицы:<?php /* mysql хост */ $hostname = 'localhost'; /* mysql пользователь */ $username = 'root'; /* mysql пароль */ $password = ''; $dbname = 'chat'; try { $dbh = new PDO("mysql:host=$hostname;dbname=$dbname", $username, $password); /* Если админ нажал на кнопку удаления записи */ if($_POST['delid']) { $sql = "DELETE FROM chat WHERE id = :id"; $stmt = $dbh->prepare($sql); $stmt->bindParam(':id', $_POST['delid'], PDO::PARAM_INT); $stmt->execute(); } if($name) { $message = $_POST['message']; $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); $sql = "INSERT INTO chat (date_time, name, message) VALUES (NOW(), :name, :message)"; $stmt = $dbh->prepare($sql); $stmt->bindParam(':name', $name, PDO::PARAM_STR); $stmt->bindParam(':message', $message, PDO::PARAM_STR); if ($stmt->execute()) { chat(); } } } catch(PDOException $e) { echo $e->getMessage(); } if($_POST['refresh']) { chat(); } function chat() { global $dbh; $sql = "select * from chat order by date_time desc limit 16"; echo '<ul>'; foreach ($dbh->query($sql) as $row) { echo '<li>'; echo '<small class="tag tag-pill tag-success">'.date("H:i", strtotime($row['date_time'])).'</small> '; echo '<span>'.$row['name'].'</span>'; echo '<span> '.$row['message'].'</span>'; // Добавим кнопку удаления сообщений для админа с 127.0.0.1 =) if($_SERVER['REMOTE_ADDR'] == '127.0.0.1') { echo ' <a class="btn btn-danger" onclick="deletechatmes('.$row['id'].')" style="font-size:9px;padding:3px 5px;">X</a>'; } echo '</li>'; } echo '</ul>'; } ?>
CREATE TABLE `chat` ( `id` int(11) NOT NULL, `date_time` datetime NOT NULL, `name` varchar(20) NOT NULL, `message` varchar(255) DEFAULT NULL, ) ENGINE=MyISAM DEFAULT CHARSET=utf8;