Чат + форма будут иметь вид:
<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>
onkeypress="ctrlEnter(event, this);" - этим добавим отслеживание сочетания клавиш.Отправка формы будет происходить методом AJAX в файл chat.php, для этого добавим JS:
$(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;
});
});
encodeURIComponent() - добавляем для экранирования спецсимволов в сообщении, например знак "+" без этой функции проходить не будет.
Для автоматического обновления чата без обновления страницы добавим:
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);
И обработчик chat.php:
<?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>';
}
?>
И дамп MySQL таблицы:
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;