comment
IRC Chat
play_arrow
Este sitio utiliza cookies propias y de terceros. Si continúa navegando consideramos que acepta el uso de cookies. OK Más Información.

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

  • 1 Respuestas
  • 1673 Vistas

0 Usuarios y 3 Visitantes están viendo este tema.

Desconectado HckDrk

  • *
  • Underc0der
  • Mensajes: 55
  • Actividad:
    0%
  • Reputación 0
  • http://127.0.0.1
    • Ver Perfil
    • HckDrk
« en: Enero 13, 2018, 03:25:55 am »
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
  1. <?
  2.  
  3. function conecta(){
  4.         $mysqli = new mysqli("servidor", "usuario", "password", "basededatos"); //conexión ala base de datos por medio de misqli poo
  5.        
  6.         if($mysqli->connect_errno > 0){ //si retorna algun error
  7.                 return("Imposible conectarse con la base de datos [" . $mysqli->connect_error . "]"); //se muestra el error
  8.         }else{ //si no retorna el error
  9.                 $mysqli->query("SET NAMES 'utf8'"); //codifica las consultas a utf-8
  10.                 return $mysqli; //retorna la conexión a la base de datos mysql
  11.         }
  12. }
  13.  
  14.         if($_POST['enviar']=='ok'){ //si se envía el mensaje
  15.                
  16.                 $nombre=$_POST['nombre'];
  17.                 $mensaje=$_POST['mensaje'];
  18.                
  19.                 $mysqli=conecta();      //conecta la base de datos
  20.                 $mysqli->query("INSERT INTO mensajes (id_propietario,nombre_quien_envia,mensaje,status_activo) VALUES ('1','$nombre','$mensaje','1');"); //inserta en la base de datos
  21.                
  22.                
  23.                
  24.         }
  25.        
  26.        
  27.        
  28.  
  29. ?>
  30. <form method="post" action="">
  31. nombre: <input type="text" name="nombre"><br>
  32. mensaje: <input type="text" name="mensaje"><br>
  33. <input type="submit" value="Enviar"><br>
  34. <input type="hidden" name="enviar" value="ok">
  35. </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
  1. <?php
  2. No tienes permisos para ver links. Registrate o Entra con tu cuenta('Content-Type: application/json'); //mediante header establece que es un archivo json
  3. $id=$_REQUEST['id_propietario']; //obtiene la variable id por post o get
  4.  
  5. function conecta(){
  6.         $mysqli = new mysqli("servidor", "usuario", "password", "basededatos"); //conexión ala base de datos por medio de misqli poo
  7.        
  8.         if($mysqli->connect_errno > 0){ //si retorna algun error
  9.                 return("Imposible conectarse con la base de datos [" . $mysqli->connect_error . "]"); //se muestra el error
  10.         }else{ //si no retorna el error
  11.                 $mysqli->query("SET NAMES 'utf8'"); //codifica las consultas a utf-8
  12.                 return $mysqli; //retorna la conexión a la base de datos mysql
  13.         }
  14. }
  15.  
  16.  
  17. $mysqli = conecta(); //conecta la base de datos
  18. $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
  19. $num_msg = $verifica->num_rows; //verifica el numero de mensajes
  20.  
  21. if($num_msg > 0){ // si el numero de mensajes es mayor a 0
  22.  
  23.         while ($mensaje = No tienes permisos para ver links. Registrate o Entra con tu cuenta($verifica, MYSQLI_ASSOC)) { //genera el while para recorrer todos los mensajes
  24.                
  25.                 $msg[]=No tienes permisos para ver links. Registrate o Entra con tu cuenta('num_msg'=>$num_msg,'texto'=>$mensaje['mensaje'],'emisor'=> $mensaje['nombre_quien_envia']); //los almacena en un arreglo de arreglos
  26.                 $mysqli->query("UPDATE mensajes SET leido='1' WHERE  id = '".$mensaje['id']."'"); //hace el update de mensaje leido
  27.                
  28.         }
  29.        
  30. }else{ //si no hay información retorna un array vacio que posteriormente se convertira a un json nulo
  31.        
  32.         $msg[]=No tienes permisos para ver links. Registrate o Entra con tu cuenta('num_msg'=>$num_msg,'texto'=>$mensaje['mensaje'],'emisor'=> $mensaje['nombre_quien_envia']);
  33.        
  34. }
  35.  
  36. echo No tienes permisos para ver links. Registrate o Entra con tu cuenta($msg,JSON_PRETTY_PRINT); //lo codifica a json, JSON_PRETTY_PRINT lo hace agradable a la vista
  37.  
  38.  
  39. ?>

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: Text
  1. <script src="jquery-1.11.1.js"></script> <!-- incluye jquery para usar ajax -->
  2. <script src="push.min.js"></script> <!-- incluye la libreria push -->
  3. <script>
  4.  
  5. function ver(){
  6.  
  7.         $.ajax({ //se inicia la petición ajax al archivo que consulta los mensajes en la base de datos
  8.                 type : 'GET', //consulta mediante get
  9.                 url : 'consulta_msg.php', //url del archivo a consultar
  10.                 data : {'id_propietario':'1'}, //consulta el id del propietario
  11.                 dataType : 'json', //se espera retornar un json
  12.                 success : function(data) { //si fue satisfactorio la petición ajax retorna la variable data con la información
  13.                         $.each(data, function(i, item) { //recorremos el json para obtener los mensajes
  14.                                 var texto = item.texto;
  15.                                 var emisor = item.emisor;
  16.                                 var num_msg = item.num_msg;
  17.                                
  18.                                 if(num_msg>0){
  19.                                
  20.                                         Push.create(emisor, { //llamamos al objeto push escrito en jquery
  21.                                                 body: texto, //ingresamos el texto recuperado de la petición ajax
  22.                                                 timeout: 4000, //con este valor indica que despues de 4000 ms se cierre automaticamente el mensaje
  23.                                                 onClick: function () { //al hacer click en la notificación se cerrará
  24.                                                         window.focus();
  25.                                                         this.close();
  26.                                                 }
  27.                                         });
  28.                                 }
  29.                                
  30.                         });
  31.                 },
  32.         });
  33.  
  34. }
  35.  
  36. setInterval(ver,10000); //cada 10000 ms se ejecuta la función ver para obtener los mensajes recibidos
  37.  
  38. //recordar que cada 1000 ms es lo mismo que 1 segundo
  39.  
  40. </script>


Esta sería la estructura de la tabla mysql

Código: SQL
  1.  
  2. CREATE TABLE `mensajes` (
  3.   `id` INT(11) NOT NULL,
  4.   `id_propietario` INT(11) NOT NULL,
  5.   `nombre_quien_envia` VARCHAR(255) COLLATE utf8_spanish_ci NOT NULL,
  6.   `mensaje` text COLLATE utf8_spanish_ci NOT NULL,
  7.   `leido` INT(11) NOT NULL,
  8.   `status_activo` INT(11) NOT NULL
  9. ) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_spanish_ci;
  10.  
  11. ALTER TABLE `mensajes`
  12. ADD PRIMARY KEY (`id`);
  13. ALTER TABLE `mensajes`
  14. MODIFY `id` INT(11) NOT NULL AUTO_INCREMENT;COMMIT;
  15.  


===========================
         INFORMACIÓN ADICIONAL
===========================
1. Mas información directo en su página: No tienes permisos para ver links. Registrate o Entra con tu cuenta
2. Pueden descargar de esta url la libreria push.js -> No tienes permisos para ver links. Registrate o Entra con 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!
« Última modificación: Enero 13, 2018, 03:29:33 am por HckDrk »

Desconectado jaimefrankoweb

  • *
  • Underc0der
  • Mensajes: 1
  • Actividad:
    0%
  • Reputación 0
    • Ver Perfil
    • Email
« Respuesta #1 en: Agosto 06, 2018, 11:08:47 pm »
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.

 

¿Te gustó el post? COMPARTILO!



Crear imagenes desde base de datos Mysql

Iniciado por godmurdoc

Respuestas: 2
Vistas: 1510
Último mensaje Julio 03, 2011, 06:10:46 pm
por godmurdoc
[VIDEOTUTORIAL] Udemy – PHP y MYSQL desde cero (2015)

Iniciado por graphixx

Respuestas: 1
Vistas: 2558
Último mensaje Febrero 22, 2018, 04:14:12 am
por DuendeSlayeR
[Sencillo ejemplo] Paginar resultados con PHP y MySQL

Iniciado por graphixx

Respuestas: 2
Vistas: 1744
Último mensaje Enero 18, 2013, 03:58:56 am
por shellb_code
Crear un login y registro basico con PHP y MySQL

Iniciado por Xt3mP

Respuestas: 1
Vistas: 2656
Último mensaje Abril 21, 2012, 02:41:40 pm
por baron.power
Video curso de Master en PHP - 4 semanas de MYSQL

Iniciado por graphixx

Respuestas: 0
Vistas: 1556
Último mensaje Agosto 19, 2014, 10:26:51 am
por graphixx