¡Hay una versión actualizada de esto!
El plan
En este tutorial vamos a crear un pequeño programa de chat que es realmente fácil de poner en marcha en cualquier servidor que ejecute PHP. No se requiere base de datos – ya que el chat se almacenará en un simple Archivo de texto. Las tecnologías utilizadas:
- PHP – Manejará todas las cosas del lado del servidor
- Escribir mensajes nuevos en el archivo de texto
- Leer mensajes nuevos del archivo de texto
- Recuperando el “estado” del archivo de texto
- Seguridad básica
-
jQuery / JavaScript – Manejará las cosas del lado del cliente. Esta es una aplicación AJAX-y, lo que significa que los mensajes aparecen en la pantalla (tanto los suyos como los de otros) sin necesidad de actualizar la página.
- Preguntar periódicamente al servidor si hay nuevos mensajes que se han publicado.
- Agregar nuevos mensajes al chat
- Desplazar el chat hacia abajo hasta los mensajes más recientes
- Preguntar y configurar el nombre de usuario
- Limitar la entrada de texto para evitar mensajes gigantescos y ridículos
- Seguridad básica
- Archivo de texto – Almacena el chat
NO el plan
Este tutorial cubre todo tipo de cosas interesantes y tecnología interesante y el resultado final es definitivamente una sala de chat. Lo que no es es la sala de chat con más funciones del mundo. No se puede echar a la gente o prohibir a la gente. Potencialmente, las personas pueden tener el mismo nombre. No puede ver a todos los miembros actuales del chat. En otras palabras, esto no es IRC. Es solo una demostración divertida y totalmente funcional en varias situaciones. Si desea tomar esto y ejecutarlo y hacerlo más completo, ¡sea nuestro invitado!
Estructura HTML básica
<div id="page-wrap">
<h2>jQuery/PHP Chat</h2>
<p id="name-area"></p>
<div id="chat-wrap"><div id="chat-area"></div></div>
<form id="send-message-area">
<p>Your message: </p>
<textarea id="sendie" maxlength="100"></textarea>
</form>
</div>Precioso pequeño margen de beneficio aquí, amigos. Incluso lo que está viendo arriba no está relacionado en un 50% con la funcionalidad específica de este tutorial. El ajuste de página sirve para centrar las cosas. Lo que ocurre con los dobles divs con el ajuste de chat y el área de chat es solo para lograr el efecto de doble borde totalmente innecesario (pero genial) en el área de chat.
Las dos áreas más importantes son el área de texto con la identificación de “sendie” y el div del área de chat. JavaScript se dirigirá a estos.
La mitad JavaScript del motor
Vamos a estar un poco orientados a objetos con nuestro JavaScript. Crearemos una función de “Chat” que es padre de un montón de otras funciones para tratar con cosas relacionadas con el chat.
function Chat () {
this.update = updateChat;
this.send = sendChat;
this.getState = getStateOfChat;
}updateChat le preguntará al servidor si hay nuevas líneas en el archivo de texto. Si los hay, los devolverá como JSON y luego esta función agregará esas nuevas líneas al chat. sendChat será llamado cuando se ingrese un mensaje en el área de texto y se presione retorno. La función pasará esos datos al servidor para que haga lo que haga con ellos. getStateOfChat pregunta al servidor básicamente cuántas líneas tiene el archivo de texto actual, por lo que tiene algo con lo que comparar y saber cuándo las líneas son “nuevas” o no. Esta información también se devuelve como JSON. Y esas funciones se ven así:
//gets the state of the chat
function getStateOfChat() {
if(!instanse){
instanse = true;
$.ajax({
type: "POST",
url: "process.php",
data: {'function': 'getState', 'file': file},
dataType: "json",
success: function(data) {state = data.state;instanse = false;}
});
}
}
//Updates the chat
function updateChat() {
if(!instanse){
instanse = true;
$.ajax({
type: "POST",
url: "process.php",
data: {'function': 'update','state': state,'file': file},
dataType: "json",
success: function(data) {
if(data.text){
for (var i = 0; i < data.text.length; i++) {
$('#chat-area').append($("
"+ data.text[i] +"
"));
}
}
document.getElementById('chat-area').scrollTop = document.getElementById('chat-area').scrollHeight;
instanse = false;
state = data.state;
}
});
}
else {
setTimeout(updateChat, 1500);
}
}
//send the message
function sendChat(message, nickname) {
updateChat();
$.ajax({
type: "POST",
url: "process.php",
data: {'function': 'send','message': message,'nickname': nickname,'file': file},
dataType: "json",
success: function(data){
updateChat();
}
});
}Las tres funciones hacen uso de las capacidades AJAX de jQuery y se comunican con un archivo PHP llamado process.php, que por supuesto necesitaremos construir.
La mitad PHP del motor
Parte de los datos que se pasan con las llamadas AJAX es un valor (arbitrario) llamado “función”. Esto es solo para que el archivo PHP sepa qué tipo de cosas necesitamos hacer. Como tal, lo primero que haremos es enganchar ese valor y configurar una declaración de cambio que cubra cada función posible. También configuramos una matriz en blanco para almacenar valores que finalmente se codificarán en JSON al final y se devolverán.
Cuando estamos tratando de getState, se lee el archivo de texto y se devuelve el número de líneas. Cuando nosotros actualizar, se lee el archivo y se vuelven a sintonizar las nuevas líneas. Cuando enviamos, el mensaje se procesa y luego se escribe en el archivo de texto como una nueva línea.
<?php
$function = $_POST['function'];
$log = array();
switch($function) {
case('getState'):
if (file_exists('chat.txt')) {
$lines = file('chat.txt');
}
$log['state'] = count($lines);
break;
case('update'):
$state = $_POST['state'];
if (file_exists('chat.txt')) {
$lines = file('chat.txt');
}
$count = count($lines);
if ($state == $count){
$log['state'] = $state;
$log['text'] = false;
} else {
$text= array();
$log['state'] = $state + count($lines) - $state;
foreach ($lines as $line_num => $line) {
if ($line_num >= $state){
$text[] = $line = str_replace("n", "", $line);
}
}
$log['text'] = $text;
}
break;
case('send'):
$nickname = htmlentities(strip_tags($_POST['nickname']));
$reg_exUrl = "/(http|https|ftp|ftps)://[a-zA-Z0-9-.]+.[a-zA-Z]{2,3}(/S*)?/";
$message = htmlentities(strip_tags($_POST['message']));
if (($message) != "n") {
if (preg_match($reg_exUrl, $message, $url)) {
$message = preg_replace($reg_exUrl, '<a href="'.$url[0].'" target="_blank">'.$url[0].'</a>', $message);
}
fwrite(fopen('chat.txt', 'a'), "<span>". $nickname . "</span>" . $message = str_replace("n", " ", $message) . "n");
}
break;
}
echo json_encode($log);
?>Empezando todo
Necesitaremos hacer algunas cosas con JavaScript para que esta fiesta comience. Necesitaremos cargar jQuery, cargar el “motor” y luego realizar algunas funciones rápidas para recopilar el nombre de los participantes del chat para unirse al chat.
Ya que estamos en eso, pongamos las cosas para limitar la longitud del texto ingresado y enviar el texto presionando la tecla de retorno.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="chat.js"></script>
<script>
// ask user for name with popup prompt
var name = prompt("Enter your chat name:", "Guest");
// default name is 'Guest'
if (!name || name === ' ') {
name = "Guest";
}
// strip tags
name = name.replace(/(<([^>]+)>)/ig,"");
// display name on page
$("#name-area").html("You are: <span>" + name + "</span>");
// kick off chat
var chat = new Chat();
$(function() {
chat.getState();
// watch textarea for key presses
$("#sendie").keydown(function(event) {
var key = event.which;
//all keys including return.
if (key >= 33) {
var maxLength = $(this).attr("maxlength");
var length = this.value.length;
// don't allow new content if length is maxed out
if (length >= maxLength) {
event.preventDefault();
}
}
});
// watch textarea for release of key press
$('#sendie').keyup(function(e) {
if (e.keyCode == 13) {
var text = $(this).val();
var maxLength = $(this).attr("maxlength");
var length = text.length;
// send
if (length <= maxLength + 1) {
chat.send(text, name);
$(this).val("");
} else {
$(this).val(text.substring(0, maxLength));
}
}
});
});
</script>Comprobación periódica de mensajes nuevos
Necesitamos usar la función “actualizar” de nuestro chat para sondear el archivo de texto en busca de nuevos mensajes y agregarlos si es necesario. Así que necesitaremos llamar a esa función de actualización de forma regular, y usaremos la función setInterval () de JavaScript para eso:
<body onload="setInterval('chat.update()', 1000)">Los bienes
Descargar archivos
Nota: Recuerde que esto funciona con PHP, por lo que no puede simplemente descargar los archivos y abrirlos en su máquina local y hacer que funcione, a menos que esté ejecutando un servidor PHP local. También recuerde cambiar los permisos de archivo del archivo chat.txt para que el servidor pueda escribirlo cuando lo cargue en su propia ubicación de prueba.