Shoutbox en ajax et format UTF8 non pris en compte

Résolu/Fermé

Integreur Messages postés 86 Date d'inscription jeudi 1 décembre 2016 Statut Membre Dernière intervention 4 octobre 2022 - Modifié le 22 mars 2018 à 17:09
Integreur Messages postés 86 Date d'inscription jeudi 1 décembre 2016 Statut Membre Dernière intervention 4 octobre 2022 - 23 mars 2018 à 19:02

Bonjour,

Je cherche une petite shoutbox pour mon site web et je suis tombé sur un vieux mais bon petit projet open source.Le but est de faire une shoutbox très simple sans MySQL.

Tout va bien mais le problème concerne l'affichage des messages avec caractères spéciaux (ç é è)...

Je mets le code ci-dessous, comme vous pouvez le voir utf8 est bien mentionné dans le html, je pense que c'est du coté d'ajax que ça coince car quand j'ouvre mon fichier chat.txt avec mousepad il me dit que celui-ci n'est pas en utf8 par défaut.

Code de index.html:

<!DOCTYPE html>
<html lang="fr"> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style type="text/css">
body             { padding-left:40px; background:#57767F; font-family:arial;}
input, textarea  { font-family: courier new; font-size: 12px; }
#content         { width:800px; text-align:left; margin-left:60px; }

#chatwindow      { border:1px solid #aaaaaa; padding:4px; background:#232D2F; color:white;}
#chatnick        { border: none; border-bottom:1px solid #aaaaaa; padding:4px; background:#57767F;}
#chatmsg         { border: none; border-bottom:1px solid #aaaaaa; padding:4px; background:#57767F; }

#info            { text-align:left; padding-left:0px; font-family:arial; }
#info td         { font-size:12px; padding-right:10px; color:#DFDFDF;  }
#info .small     { font-size:10px; padding-left:10px; padding-right:0px; }

#info a          { text-decoration:none; color:white; }
#info a:hover    { text-decoration:underline; color:#CF9700; }
</style>
    </head>
    <body>
        <div id="info">
        <br>
            <table border="0">
                <tr>
                    <td colspan="2">
                        <a href="/projects/most-simple-ajax-chat-ever/"><font style="font-size:14px">most simple ajax chat</a> (v3)</font><br>
                    </td>
                </tr>
                <tr>
                    <td class="small">author</td>
                    <td class="small"><a href="mailto:chris@linuxuser.at">chris at linuxuser dot at</a></td>
                </tr>
                <tr>
                    <td class="small">home</td>
                    <td class="small"><a href="/projects/most-simple-ajax-chat-ever/">www.linuxuser.at</a></td>
                </tr>
                <tr>
                    <td class="small">source</td>
                    <td class="small"><a href="https://github.com/metachris/most-simple-ajax-chat-ever">Github</a></td>
                </tr>
                <tr><td> </td></tr>
                <tr>
                    <td colspan="2" class="small">toggle: <a href="#" onclick="javascript:show_newmsg_on_bottom=!show_newmsg_on_bottom">top/bottom display</a> | <a href="#" onclick="javascript:chatwindow.style.fontWeight= (chatwindow.style.fontWeight=='bold') ? 'normal' : 'bold';">bold</a></td>
                </tr>
            </table>

        </div>
        <br>
        <div id="content">
            <textarea id="chatwindow" rows="19" cols="95" readonly></textarea><br>

            <input id="chatnick" type="text" size="9" maxlength="10" placeholder="username"> 
            <input id="chatmsg" type="text" size="80" maxlength="80"  onkeyup="keyup(event.keyCode);" placeholder="message">
            <input type="button" value="add" onclick="submit_msg();" style="cursor:pointer;border:1px solid gray;"><br><br>
        </div>

    </body>
</html>

<script type="text/javascript">
/* most simple ajax chat script (www.linuxuser.at) (GPLv2) */
var nick_maxlength=10;
var http_request=false;
var http_request2=false;
var intUpdate;

/* http_request for writing */
function ajax_request(url){http_request=false;if(window.XMLHttpRequest){http_request=new XMLHttpRequest();if(http_request.overrideMimeType){http_request.overrideMimeType('text/xml');}}else if(window.ActiveXObject){try{http_request=new ActiveXObject("Msxml2.XMLHTTP");}catch(e){try{http_request=new ActiveXObject("Microsoft.XMLHTTP");}catch(e){}}}
if(!http_request){alert('Giving up :( Cannot create an XMLHTTP instance');return false;}
http_request.onreadystatechange=alertContents;http_request.open('GET',url,true);http_request.send(null);}
function alertContents(){if(http_request.readyState==4){if(http_request.status==200){rec_response(http_request.responseText);}else{}}}

/* http_request for reading */
function ajax_request2(url){http_request2=false;if(window.XMLHttpRequest){http_request2=new XMLHttpRequest();if(http_request2.overrideMimeType){http_request2.overrideMimeType('text/xml');}}else if(window.ActiveXObject){try{http_request2=new ActiveXObject("Msxml2.XMLHTTP");}catch(e){try{http_request2=new ActiveXObject("Microsoft.XMLHTTP");}catch(e){}}}
if(!http_request2){alert('Giving up :( Cannot create an XMLHTTP instance');return false;}
http_request2.onreadystatechange=alertContents2;http_request2.open('GET',url,true);http_request2.send(null);}
function alertContents2(){if(http_request2.readyState==4){if(http_request2.status==200){rec_chatcontent(http_request2.responseText);}else{}}}

/* chat stuff */
chatmsg.focus()
var show_newmsg_on_bottom=1;     /* set to 0 to let new msg´s appear on top */
var waittime=1000;        /* time between chat refreshes (ms) */

intUpdate=window.setTimeout("read_cont();", waittime);
chatwindow.value = "loading...";

function read_cont()         { zeit = new Date(); ms = (zeit.getHours() * 24 * 60 * 1000) + (zeit.getMinutes() * 60 * 1000) + (zeit.getSeconds() * 1000) + zeit.getMilliseconds(); ajax_request2("chat.txt?x=" + ms); }
function display_msg(msg1)     { chatwindow.value = msg1.trim(); }
function keyup(arg1)         { if (arg1 == 13) submit_msg(); }
function submit_msg()         { clearTimeout(intUpdate); if (chatnick.value == "") { check = prompt("please enter username:"); if (check === null) return 0; if (check == "") check="..."; chatnick.value=check; } if (chatnick.value.length > nick_maxlength) chatnick.value=chatnick.value.substring(0,nick_maxlength); spaces=""; for(i=0;i<(nick_maxlength-chatnick.value.length);i++) spaces+=" "; v=chatwindow.value.substring(chatwindow.value.indexOf("\n")) + "\n" + chatnick.value + spaces + "| " + chatmsg.value; if (chatmsg.value != "") chatwindow.value=v.substring(1); write_msg(chatmsg.value,chatnick.value); chatmsg.value=""; intUpdate=window.setTimeout("read_cont();", waittime);}
function write_msg(msg1,nick1)     { ajax_request("w.php?m=" + escape(msg1) + "&n=" + escape(nick1)); }
function rec_response(str1)     { }

function rec_chatcontent(cont1) {
    if (cont1 != "") {
        out1 = unescape(cont1);
        if (show_newmsg_on_bottom == 0) { out1 = ""; while (cont1.indexOf("\n") > -1) { out1 = cont1.substr(0, cont1.indexOf("\n")) + "\n" + out1; cont1 = cont1.substr(cont1.indexOf("\n") + 1); out1 = unescape(out1); } }
        if (chatwindow.value != out1) { display_msg(out1); }
        intUpdate=window.setTimeout("read_cont()", waittime);
    }
}
</script>

Code de write.php (w.php):

<?php
header('Content-typ: content="text/html; charset=UTF-8');
    /**

 Author: chris at linuxuser.at     * Licence: MIT     */    $fn = "chat.txt";    $maxlines = 200;    $nick_maxlength = 10;    /* Set this to a minimum wait time between posts (in sec) */    $waittime_sec = 0;    /* spam keywords */    $spam[] = "cum";    $spam[] = "dick";    $spam[] = "EAT coon";    /* IP's to block */    $blockip[] = "72.60.167.89";    /* spam, if message IS exactly that string */    $espam[] = "ajax";    $msg = $_REQUEST["m"];    $n = $_REQUEST["n"];    if ($waittime_sec > 0) {        $lastvisit = $_COOKIE["lachatlv"];        setcookie("lachatlv", time());        if ($lastvisit != "") {            $diff = time() - $lastvisit;            if ($diff < $waittime_sec) { die(); }        }    }    if ($msg != "") {        if (strlen($msg) < 2) { die(); }        if (strlen($msg) > 3) {            /* Smilies are ok */            if (strtoupper($msg) == $msg) { die(); }        }        if (strlen($msg) > 150) { die(); }        if (strlen($msg) > 15) {            if (substr_count($msg, substr($msg, 6, 8)) > 1) { die(); }        }        foreach ($blockip as $a) {            if ($_SERVER["REMOTE_ADDR"] == $a) { die(); }        }        $mystring = strtoupper($msg);        foreach ($spam as $a) {             if (strpos($mystring, strtoupper($a)) === false) {                 /* Everything Ok Here */             } else {                 die();             }        }        foreach ($espam as $a) {            if (strtoupper($msg) == strtoupper($a)) { die(); }        }        $handle = fopen ($fn, 'r');        $chattext = fread($handle, filesize($fn)); fclose($handle);        $arr1 = explode("\n", $chattext);        if (count($arr1) > $maxlines) {            /* Pruning */            $arr1 = array_reverse($arr1);            for ($i=0; $i<$maxlines; $i++) { $arr2[$i] = $arr1[$i]; }            $arr2 = array_reverse($arr2);        } else {            $arr2 = $arr1;        }        $chattext = implode("\n", $arr2);        // Last spam filter: die if message has already been in the chat history        if (substr_count($chattext, $msg) > 2) { die(); }        $spaces = "";        if (strlen($n) > $nick_maxlength-1) $n = substr($n, 0, $nick_maxlength-1);        for ($i=0; $i<($nick_maxlength - strlen($n)); $i++) $spaces .= " ";        $out = $chattext . $n . $spaces . "| " . $msg . "\n";        $out = str_replace("\'", "'", $out);        $out = str_replace("\\\"", "\"", $out);        $handle = fopen ($fn, 'w'); fwrite($handle, $out.trim()); fclose($handle);    }?>

Merci de m'éclaircir sur ce problème d'encodage.

A voir également:

Shoutbox en ajax et format UTF8 non pris en compte
Supprimer compte instagram - Guide
Compte facebook piraté - Guide
Telecharger format factory - Télécharger - Conversion & Codecs
Créer un compte gmail - Guide
Créer un compte google - Guide

2 réponses

Réponse 1 / 2

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
23 mars 2018 à 09:10

Bonjour,
Commence par regarder le chapitre 1 de ce lien :
https://forums.commentcamarche.net/forum/affich-37584944-php-html-caracteres-accentues-et-l-utf8

Integreur Messages postés 86 Date d'inscription jeudi 1 décembre 2016 Statut Membre Dernière intervention 4 octobre 2022
23 mars 2018 à 10:32

Bonjour,

J'utilise gedit et mousepad en éditeur de texte , j'ai cherche un peu dans les options sans trouver ou se trouve par défaut l'encodage avec utf-8.

Quand j'ouvre mon fichier chat.txt (fichier qui stocke les messages) avec mousepad j'ai le droit a ce message, je vous le met en image c'est plus simple que d'expliquer: https://www.zupimages.net/up/18/12/67jf.png

Dans mon html j'ai bien ceci dans l'head:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

Dans mon php j'ai placé un header en 1er ligne, sans résultat non plus apparemment:

header('Content-Type: text/html; charset=utf-8');

Réponse 2 / 2

Integreur Messages postés 86 Date d'inscription jeudi 1 décembre 2016 Statut Membre Dernière intervention 4 octobre 2022
Modifié le 23 mars 2018 à 11:34

Je viens de m'apercevoir en enregistrant mes fichier shoutbox en utf-8 que mon fichier chat.txt se remet en iso8859-1 a chaque message envoyé, il ne garde pas l'enregistrement au format utf-8 puisque a chaque fois que je l'ouvre pour le ré enregistrer je vois iso-8859-1 qui apparait comme format par défaut...

Je précise que j'ai bien placé un header indiquant utf-8 en 1er ligne du script php, donc je vois pas d'ou ça peut venir.

Voici un retour de la comande file:

file -i *
chat.txt:        text/plain; charset=iso-8859-1
index.html:      text/html; charset=utf-8
w.php:           text/x-php; charset=us-ascii

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
23 mars 2018 à 14:33

Pour écrire ton fichier, utilises l'instruction file_put_contents en forçant l'éncodage
https://www.php.net/manual/fr/function.file-put-contents.php

par exemple :

$data = mb_convert_encoding($TexteAEnregistrer, 'UTF-8', 'OLD-ENCODING');
file_put_contents($chemin_vers_fichiers, $data);

Integreur Messages postés 86 Date d'inscription jeudi 1 décembre 2016 Statut Membre Dernière intervention 4 octobre 2022
23 mars 2018 à 19:02

Excuse ma nulitée en php mais je dois placer ce morceau de code ou exactement ?

Voici la fin du fichier php qui traite les données.


        $out = $chattext . $n . $spaces . "| " . $msg . "\n";
        $out = str_replace("\'", "'", $out);
        $out = str_replace("\\\"", "\"", $out);
        $handle = fopen ($fn, 'w'); fwrite($handle, $out.trim()); fclose($handle);
    }
        
?>

Discussions similaires

Mode non pris en charge TV Samsung / connexion HDMI

Discussions similaires

Newsletters