Generando mensajes Push en Navegador Mysql + php + push.js

Iniciado por HckDrk, Enero 13, 2018, 03:25:55 AM

Tema anterior - Siguiente tema

0 Miembros y 2 Visitantes están viendo este tema.

Enero 13, 2018, 03:25:55 AM Ultima modificación: Enero 13, 2018, 03:29:33 AM por HckDrk
Que tal amigos!!

Viendo que está un poco solo por aquí, decidí compartir un pequeño código que hice hace tiempo para un sistema que hice. El código era mucho mas, solo que lo he tratado de simplificar solo para mostrar los puntos indispensables y lo puedan integrar a su proyecto.

El código consta de 2 archivos php, 1 html, la libreria llamada push.js escrita en jquery y una tabla en mysql llamada "mensajes" (o como quieran ponerle XD)

El primer archivo php es el que inserta en la base de datos el mensaje y el nombre del remitente. a continuación se muestra el codigo algo comentado:

Código: php
<?

function conecta(){
$mysqli = new mysqli("servidor", "usuario", "password", "basededatos"); //conexión ala base de datos por medio de misqli poo

if($mysqli->connect_errno > 0){ //si retorna algun error
return("Imposible conectarse con la base de datos [" . $mysqli->connect_error . "]"); //se muestra el error
}else{ //si no retorna el error
$mysqli->query("SET NAMES 'utf8'"); //codifica las consultas a utf-8
return $mysqli; //retorna la conexión a la base de datos mysql
}
}

if($_POST['enviar']=='ok'){ //si se envía el mensaje

$nombre=$_POST['nombre'];
$mensaje=$_POST['mensaje'];

$mysqli=conecta(); //conecta la base de datos
$mysqli->query("INSERT INTO mensajes (id_propietario,nombre_quien_envia,mensaje,status_activo) VALUES ('1','$nombre','$mensaje','1');"); //inserta en la base de datos



}




?>
<form method="post" action="">
nombre: <input type="text" name="nombre"><br>
mensaje: <input type="text" name="mensaje"><br>
<input type="submit" value="Enviar"><br>
<input type="hidden" name="enviar" value="ok">
</form>



El segundo código php es el que recupera los mensajes que se encuentran en la base de datos que aun no están leidos.


Código: php
<?php
header('Content-Type: application/json'); //mediante header establece que es un archivo json
$id=$_REQUEST['id_propietario']; //obtiene la variable id por post o get

function conecta(){
$mysqli = new mysqli("servidor", "usuario", "password", "basededatos"); //conexión ala base de datos por medio de misqli poo

if($mysqli->connect_errno > 0){ //si retorna algun error
return("Imposible conectarse con la base de datos [" . $mysqli->connect_error . "]"); //se muestra el error
}else{ //si no retorna el error
$mysqli->query("SET NAMES 'utf8'"); //codifica las consultas a utf-8
return $mysqli; //retorna la conexión a la base de datos mysql
}
}


$mysqli = conecta(); //conecta la base de datos
$verifica = $mysqli->query("SELECT * FROM mensajes WHERE id_propietario='$id' AND leido='0' AND status_activo='1'"); //consulta los mensajes no leidos=0 y activos=1 del propietario
$num_msg = $verifica->num_rows; //verifica el numero de mensajes

if($num_msg > 0){ // si el numero de mensajes es mayor a 0

while ($mensaje = mysqli_fetch_array($verifica, MYSQLI_ASSOC)) { //genera el while para recorrer todos los mensajes

$msg[]=array('num_msg'=>$num_msg,'texto'=>$mensaje['mensaje'],'emisor'=> $mensaje['nombre_quien_envia']); //los almacena en un arreglo de arreglos
$mysqli->query("UPDATE mensajes SET leido='1' WHERE  id = '".$mensaje['id']."'"); //hace el update de mensaje leido

}

}else{ //si no hay información retorna un array vacio que posteriormente se convertira a un json nulo

$msg[]=array('num_msg'=>$num_msg,'texto'=>$mensaje['mensaje'],'emisor'=> $mensaje['nombre_quien_envia']);

}

echo json_encode($msg,JSON_PRETTY_PRINT); //lo codifica a json, JSON_PRETTY_PRINT lo hace agradable a la vista


?>


El archivo HTML es el que incluye la librería push.min.js que trabaja con jquery, esta librería es la que nos ayuda a realizar el mensaje para que aparezca en nuestro navegador.

Código: html
<script src="jquery-1.11.1.js"></script> <!-- incluye jquery para usar ajax -->
<script src="push.min.js"></script> <!-- incluye la libreria push -->
<script>

function ver(){

$.ajax({ //se inicia la petición ajax al archivo que consulta los mensajes en la base de datos
type : 'GET', //consulta mediante get
url : 'consulta_msg.php', //url del archivo a consultar
data : {'id_propietario':'1'}, //consulta el id del propietario
dataType : 'json', //se espera retornar un json
success : function(data) { //si fue satisfactorio la petición ajax retorna la variable data con la información
$.each(data, function(i, item) { //recorremos el json para obtener los mensajes
var texto = item.texto;
var emisor = item.emisor;
var num_msg = item.num_msg;

if(num_msg>0){

Push.create(emisor, { //llamamos al objeto push escrito en jquery
body: texto, //ingresamos el texto recuperado de la petición ajax
timeout: 4000, //con este valor indica que despues de 4000 ms se cierre automaticamente el mensaje
onClick: function () { //al hacer click en la notificación se cerrará
window.focus();
this.close();
}
});
}

});
},
});

}

setInterval(ver,10000); //cada 10000 ms se ejecuta la función ver para obtener los mensajes recibidos

//recordar que cada 1000 ms es lo mismo que 1 segundo

</script>



Esta sería la estructura de la tabla mysql

Código: sql


CREATE TABLE `mensajes` (
  `id` int(11) NOT NULL,
  `id_propietario` int(11) NOT NULL,
  `nombre_quien_envia` varchar(255) COLLATE utf8_spanish_ci NOT NULL,
  `mensaje` text COLLATE utf8_spanish_ci NOT NULL,
  `leido` int(11) NOT NULL,
  `status_activo` int(11) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_spanish_ci;

ALTER TABLE `mensajes`
ADD PRIMARY KEY (`id`);
ALTER TABLE `mensajes`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;COMMIT;



===========================
         INFORMACIÓN ADICIONAL
===========================
1. Mas información directo en su página: No tienes permitido ver enlaces. Registrate o Entra a tu cuenta
2. Pueden descargar de esta url la libreria push.js -> No tienes permitido ver enlaces. Registrate o Entra a tu cuenta
3. En este código, las notificaciones solo funcionan con el html abierto y ejecutandose. En lo personal no tenia mucho tiempo para hacerla funcionar para que funcionaran sin tener abierto el html que consulta los mensajes. Si alguien nos pudiera compartir como se realiza sin tener abierto el html sería fabuloso.
4. Si necesitas ver el funcionamiento, me indican para pasarles una url demo.
5. Dejo una imagen de como aparece en el navegador:


Espero les sea de utilidad!

Saludos!

Tenes algun repositorio en github de este ejemplo?
Estoy buscando ejemplos de integración pero no encuentro, tu ejemplo es el mas parecido a lo que quiero hacer.
Tengo un cliente en .net que ingresa datos a una bd mysql (a la tabla transacciones por asi decirlo)
Lo que necesito es mostrar en la web, notificaciones cada ves que alguien ingrese datos a la tabla transacciones y me muestre una notificacion al usuario que afecto esa transaccion.

Hola,gracias por el aporte. podrias por favor pasar la url del ejemplo?
No me funciona y no se porque

muchas gracias