0

Estoy haciendo una aplicación de un web chat con php y jquery, a este chat le agregue la opción de usar emojis, estoy usando el plugin EmojiOne Textarea Picker

Esto es lo que tengo de código:

JS:

$(document).ready(function(){
  $( "textarea" ).emojionePicker({
   pickerTop: 5,
   pickerRight: 1,
   type: "unicode"
  });

  setInterval(function(){ ajax(); }, 1000);
});

function ajax()
{
    $.ajax({
        url:  'chat.php',
        success: function(response){
            $("#chat").html(response);
        }
     });
}

HTML:

<?php
 include_once("class.Database.php");
?>
<div id="contenedor">
 <div id="caja-chat"> 
  <div id="chat">
  </div>
 </div>
 <form action="index.php" method="post">
  <input type="text" name="nombre" placeholder="Ingresa tu nombre">
  <textarea id="mensaje" name="mensaje" placeholder="Escribe tu mensaje"></textarea>
  <input type="submit" name="enviar" value="Enviar">
 </form>
 <?php
  if(isset($_POST["enviar"]))
  {
    $nombre = $_POST["nombre"];
    $mensaje = trim($_POST["mensaje"]);

    $consulta = "INSERT INTO chat(nombre, mensaje, fecha) VALUES('$nombre', '$mensaje', NOW())";
    $ejecutar = Database::insert($consulta);

    if($ejecutar)
    {
        echo "<embed loop='false' src='audio/pling_facebook.mp3' hidden='true' autoplay='true'>"; 
    }       
  }
 ?>
</div>

chat.php

<?php
include_once("class.Database.php");

function formatearFecha($fecha)
{
    return Date("g:i a", strtotime($fecha));
}

$consulta = "SELECT * FROM chat ORDER BY id_chat DESC";
$ejecutar = Database::select($consulta);

if(is_array($ejecutar))
{
 foreach($ejecutar as $fila)
 {  
?>
  <div id="datos-chat">
   <span style="color: #1C62C4;"><?php echo $fila["nombre"]; ?>:</span>
   <span style="color: #848484;"><?php echo $fila["mensaje"]; ?></span>
   <span style="float: right; margin-right: 10px;"><?php echo formatearFecha($fila["fecha"]); ?></span>
  </div>
<?php
 }
}
?>

El problema es que el emoji que se selecciona no lo guarda correctamente en la base de datos pues lo guarda así: ???? con esos signos de interrogación.

Como podria hacer para solucionar esto??

3
  • 1
    Que motor de base de datos usar? Si usas mysql, prueba con el charset: Utf8mb4 y el cotejamiento: utf8mb4_unicode_ci
    – varTob
    Commented el 8 abr. 2019 a las 17:04
  • @varTob así es, tuve que cambiar el cotejamiento de utf8 a utf8mb4_unicode_ci Commented el 8 abr. 2019 a las 17:19
  • Excelente!, voy a responder en la sección de respuestas para que marques como resuelta tu pregunta, además te recomiendo editar tu pregunta mencionando que usas MySQL
    – varTob
    Commented el 8 abr. 2019 a las 17:41

1 respuesta 1

2

En un motor de base de datos MySQL para guardar emojis de manera correcta debes usar como charset Utf8mb4 y cotejamiento utf8mb4_unicode_ci, te respondo basándome en mi experiencia trabajando con Laravel, moodle, wordpress.

Te dejo un ejemplo de como crear/editar una bd y una tabla con los charset/cotejamientos mencionados:

CREATE DATABASE `myDatabase` /*!40100 DEFAULT CHARACTER SET utf8mb4 */;

USE myDatabase;

CREATE TABLE `miTabla` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `emoji` varchar(191) COLLATE utf8mb4_unicode_ci NOT NULL,
  `field` int(11) NOT NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

Editar base de datos y tabla existente:

-- editar base de datos
ALTER DATABASE `myDatabase` CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

-- editar tabla
USE myDatabase;
ALTER TABLE `miTabla` CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
2
  • agrega las referencias a tu respuesta y si es posible un trozo de codigo para que tu respuesta sea bien recibida Commented el 8 abr. 2019 a las 17:43
  • Genial a mi me funciono, muchas gracias. Estoy usando Quill JS como editor y me mostraba los emoji de esta manera. ¿emoji? Commented el 5 nov. 2020 a las 3:09

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.