Выпуск №17.
Создание чата
Просмотров: 22300 Если видео не загружается, то можно посмотреть его здесь
Очень часто я получаю просьбу рассказать о том, как сделать чат. Поскольку вопросы на эту тему получаю постоянно, я решил сделать выпуск, в котором покажу, как создаётся чат. Задача это комплексная: нам придётся использовать HTML, CSS, JavaScript и, разумеется, PHP.
Фактически, целый набор знаний требуется, чтобы создать даже простой чат. Особенностью данного чата будет то, что здесь отсутствуют громоздские библиотеки JQuery и Ajax, а также неудобные и "проблемные" фреймы. Просмотрев урок, Вы узнаете:
- Где хранить сообщения чата.
- Как вывести чат на страницу.
- Как сделать возможность отправки новых сообщений.
- Как сделать автоматическое обновление чата без перезагрузки страницы.
Если Вы хотите скачать видео к себе на компьютер, то посмотрите инструкцию: как скачивать с YouTube.
P.S. Если у Вас возникли некоторые трудности с пониманием HTML, CSS, JavaScript или PHP, то рекомендую Вам свой Видеокурс "Создание и Раскрутка от А до Я", где все эти языки подробнейшим образом разбираются: https://srs.myrusakov.ru/kurs
Комментарии (33):
Добавить комментарий:
находится в xmlhttp.send("update=1");
XMLHttpRequest cannot load file:///D:/UNDERTALE_AU/www/php/functions.php. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource
Бан чата
<script type="text/javascript">
var array = new Array();
/* Данная функция создаёт кроссбраузерный объект XMLHTTP */
function getXmlHttp() {
var xmlhttp;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
function chat()
{
var xmlhttp = getXmlHttp();
xmlhttp.open("POST","functions.php",true);
xmlhttp.setRequestHeader("Content-type","aplication/x-www-form-urlencoded");
xmlhttp.send("update=1");
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4){
if(xmlhttp.status == 200){
var response = xmlhttp.responseText;
response = JSON.parse(response);
if(array.length == response.length ) return;
var start = array.length;
array = response;
var messages = document.getElementById("chat").innerHTML;
for(i = start; i < array.length;i++){
messages = messages + "<p><b>"+array[i].name + ":</b> "+ array[i].message + "</p>";
}
document.getElementById("chat").innerHTML = messages;
}
}
}
setTimeout("chat()",1000);
}
function addMessage(){
var name = document.getElementById("name").value;
var message = document.getElementById("message").value;
var xmlhttp = getXmlHttp();
xmlhttp.open("POST","functions.php",true);
xmlhttp.setRequestHeader("Content-type","aplication/x-www-form-urlencoded");
xmlhttp.send("name=" + encodeURIComponent(name) + "&message=" + encodeURIComponent(message));
}
</script>
<?php
if(isset($_POST['name'])){
$name = $_POST['name'];
$message = $_POST['message'];
file_put_contents("messages.txt",file_get_contents("messages.txt")."\n$name;$message");
}elseif(isset($_POST['update'])){
$string = file_get_contents("messages.txt");
$array = explode("\n",$string);
$result = array();
for($i = 0;$i<count($array);$i++){
$temp = explode(";",$array[$i]);
$result[$i]['name']=$temp[0];
$result[$i]['message']=$temp[1];
}
echo json_encode($result);
}
?>
Петя;привет
1)У меня за месть русских букв выбивают какие то иероглифы
2)Я сделал чат по Вашему видео уроку, но сообщение с messages.txt не выводит, более того при нажатии кнопки отправка оно не отправляется.Почему не могу разобраться.Помогите!!!
Я думаю всем бы это понравелось чтобы на каждом уроке были исходнеки!!!
Блог очень полезный, тут есть всё, что нужно чтобы улучшить свой РНР и Mysql сайт, огромное спасибо Михаил!