Создаем чат для сайта: HTML, JS, PHP и AJAX

<div class='chat'>
	<div class='chat-messages'>
		<div class='chat-messages__content' id='messages'>
			Загрузка...
		</div>
	</div>
	<div class='chat-input'>
		<form method='post' id='chat-form'>
			<input type='text' id='message-text' class='chat-form__input' placeholder='Введите сообщение'> <input type='submit' class='chat-form__submit' value='=>'>
		</form>
	</div>
</div>

function update() {
	send_request('load');
}
interval = setInterval(update,500);

sendForm.onsubmit = function () {
	send_request('send');
	return false; //Возвращаем ложь, чтобы остановить классическую отправку формы
};

function send($db,$message) {
	if(auth($db,$_SESSION['login'],$_SESSION['password'])) {//Если авторизация удачна
		$message = htmlspecialchars($message);//Заменяем символы ‘<’ и ‘>’на ASCII-код
		$message = trim($message); //Удаляем лишние пробелы
		$message = addslashes($message); //Экранируем запрещенные символы
		$result = mysqli_query($db,"INSERT INTO messages (user_id,message) VALUES ('$_SESSION[id]','$message')");//Заносим сообщение в базу данных
	}
	return load($db); //Вызываем функцию загрузки сообщений
}

//Получаем переменные из супермассива $_POST
//Тут же их можно проверить на наличие инъекций
if(isset($_POST['act'])) {$act = $_POST['act'];}
if(isset($_POST['var1'])) {$var1 = $_POST['var1'];}
if(isset($_POST['var2'])) {$var2 = $_POST['var2'];}

switch($_POST['act']) {//В зависимости от значения act вызываем разные функции
	case 'load': 
		$echo = load($db); //Загружаем сообщения
	break;
	
	case 'send': 
		if(isset($var1)) {
			$echo = send($db,$var1); //Отправляем сообщение
		}
	break;
	
	case 'auth': 
		if(isset($var1) && isset($var2)) {//Авторизуемся
			if(auth($db,$var1,$var2)) {
				$echo = load($db);
			}
		}
	break;
}

echo $echo;//Выводим результат работы кода

<form method='post' id='chat-form'>
<div class='emojis-container emojis-container_hidden' id='emojis'></div>
	<img src='/images/emojis/happy.png' class='emoji-img' id='emoji-button'>
<input type='text' id='message-text' class='chat-form__input' placeholder='Введите сообщение'> 
<input type='submit' class='chat-form__submit' value='=>'>
</form>

.emojis-container {
	position:absolute;
	z-index:100;
	background:#555;
	border:1px solid #333;
	padding:2px;
	max-width:38%;
	top:20px;
}

.emojis-container_hidden {
	left:-9999999999999999px;
}

.emoji-img {
	vertical-align:middle;
	width:20px;
	margin:1px;
	cursor:pointer;
}

//Создаем переменные
var emojis__container = document.getElementById('emojis');
var emojis__button = document.getElementById('emoji-button');
var showed = false;

function getEmojis() {//Получаем смайлики из PHP-файла
	$.post('/includes/chat.php',{act: 'load-emojis'}).done(function (data) {
		emojis__container.innerHTML = data;
	});
}

function showEmojis() {//Добавляем отображение и скрытие окна
	if(showed) {
		emojis__container.setAttribute('class','emojis-container emojis-container_hidden');
		showed = false;
	} else {
		emojis__container.setAttribute('class','emojis-container');
		showed = true;
	}
}

function addEmoji(title) {
	messageInput.value += " " + title + " ";
//Тут же можно добавить закрытие контейнера
messageInput.focus();
}

$(document).ready(function (){
	$(".emoji-add").on("click", function () {addEmoji($(this).attr('title'));});//Добавление
});
emojis__button.addEventListener('click',showEmojis); 

getEmojis(); //Сразу же вызываем получение смайликов

function getEmojis() {
	$dir = '../images/emojis';
	$echo = "";
	$files = scandir($dir);
	
	for($i = 0; $i != count($files); $i++) {
		$ext = explode('.',$files[$i]);
		if($ext[1] == 'png') {
			$echo .= "<img src='/images/emojis/".$files[$i]."' title=':"</span>.$ext[<span class="hljs-number" style="color: #ff73fd;">0</span>].<span class="hljs-string" style="color: #a8ff60;">":' class='emoji-img emoji-add'> ";
		} 
	}
	return $echo;
}

case 'load-emojis': 
	$echo = getEmojis();
break;

function transformEmoji($message) {
	$pattern = '/(\:\S*\:)/i'; //Паттерн смайлика
	if(preg_match($pattern,$message,$matches)) {//Ищем все совпадения для смайлика одного типа — только :happy: или только :sad:
		$path = explode(":",$matches[0]);
		if(file_exists("../images/emojis/".$path[1].".png")) {//Проверяем, существует ли такое изображение
			$message = preg_replace("/".$matches[0]."/","<img src='/images/emojis/$path[1].png' class='emoji-img'>",$message);//Заменяем код на изображение
		}
		$message = transformEmoji($message); //Повторяем, пока в $message есть коды смайликов
	}
	return $message;
}

$echo .= "<div class='chat__message chat__message_$user[nick_color]'><b><span class='answer-span'>$user[login]</span>:</b> $array[message]</div>";

function addAnswer(login) {
	messageInput.value = login + ", " + messageInput.value;
	messageInput.focus();
}

$(document).ready(function (){
	$(".add-answer").on("click", function () {addEmoji($(this).text());});
});