<!doctype html><html lang="fr"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>CaraChat – le chat Caramail des années 2000, recréé en PHP (gratuit, en ligne)</title> <meta name="description" content="CaraChat recrée en PHP le client de chat Caramail de 2002 : salons, privés, pseudos colorés, texte arc-en-ciel et vague, et les smileys dessinés d'origine. Gratuit, dans le navigateur."> <link rel="canonical" href="https://{{DOMAIN}}/"> <link rel="alternate" hreflang="fr" href="https://{{DOMAIN}}/"> <link rel="alternate" hreflang="en" href="https://{{DOMAIN}}/en/"> <link rel="alternate" hreflang="es" href="https://{{DOMAIN}}/es/"> <link rel="alternate" hreflang="de" href="https://{{DOMAIN}}/de/"> <link rel="alternate" hreflang="it" href="https://{{DOMAIN}}/it/"> <link rel="alternate" hreflang="pt" href="https://{{DOMAIN}}/pt/"> <link rel="alternate" hreflang="nl" href="https://{{DOMAIN}}/nl/"> <link rel="alternate" hreflang="pl" href="https://{{DOMAIN}}/pl/"> <link rel="alternate" hreflang="ru" href="https://{{DOMAIN}}/ru/"> <link rel="alternate" hreflang="uk" href="https://{{DOMAIN}}/uk/"> <link rel="alternate" hreflang="tr" href="https://{{DOMAIN}}/tr/"> <link rel="alternate" hreflang="ja" href="https://{{DOMAIN}}/ja/"> <link rel="alternate" hreflang="zh" href="https://{{DOMAIN}}/zh/"> <link rel="alternate" hreflang="ko" href="https://{{DOMAIN}}/ko/"> <link rel="alternate" hreflang="x-default" href="https://{{DOMAIN}}/"> <link rel="icon" href="images/favicon.png"> <meta property="og:type" content="website"> <meta property="og:title" content="CaraChat – le chat Caramail des années 2000"> <meta property="og:description" content="Salons, privés, couleurs, arc-en-ciel et les smileys d'origine : le chat de 2002 recréé en PHP."> <meta property="og:url" content="https://{{DOMAIN}}/"> <meta property="og:image" content="https://{{DOMAIN}}/images/og.png"> <meta property="og:locale" content="fr_FR"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="CaraChat – le chat Caramail des années 2000"> <meta name="twitter:description" content="Salons, privés, couleurs, arc-en-ciel et les smileys d'origine : le chat de 2002 recréé en PHP."> <meta name="twitter:image" content="https://{{DOMAIN}}/images/og.png"> <script type="application/ld+json">{ "@context": "https://schema.org", "@type": "WebApplication", "name": "CaraChat", "description": "Le client de chat Caramail de 2002 recréé en PHP avec JumPHP : salons, privés, couleurs, texte arc-en-ciel et vague, smileys dessinés d'origine.", "url": "https://{{DOMAIN}}/", "applicationCategory": "CommunicationApplication", "operatingSystem": "Web browser, Linux, Windows, macOS", "image": "https://{{DOMAIN}}/images/og.png", "screenshot": ["https://{{DOMAIN}}/images/chat.png", "https://{{DOMAIN}}/images/rooms.png", "https://{{DOMAIN}}/images/search.png", "https://{{DOMAIN}}/images/private.png", "https://{{DOMAIN}}/images/phone.png", "https://{{DOMAIN}}/images/login.png"], "isAccessibleForFree": true, "offers": {"@type": "Offer", "price": "0", "priceCurrency": "EUR"}, "potentialAction": {"@type": "UseAction", "target": "https://{{DOMAIN}}/play/"}} </script> <script type="application/ld+json">{ "@context": "https://schema.org", "@type": "FAQPage", "mainEntity": [ {"@type": "Question", "name": "Comment faire un smiley ?", "acceptedAnswer": {"@type": "Answer", "text": "Comme en 2002 : des yeux, un nez et une bouche, par exemple :-) ;-) 8-) :o) ou :#) pour le père Noël. Le nez est obligatoire. Un chiffre après le smiley change sa couleur (:-)2), #c ou #d lui ajoute une main. #00 à #14 sont des dessins : #13 est un cœur."}}, {"@type": "Question", "name": "Faut-il un serveur ?", "acceptedAnswer": {"@type": "Answer", "text": "Oui : le serveur de chat CaraChat Serveur (PHP, sans base de données) se lance dans Docker sur n'importe quelle machine, puis on indique son adresse et son port (4500) dans la fenêtre de connexion."}} ]} </script> <style> :root { --gris: #c0c0c0; --bleu: #0000ff; --nuit: #1a1a8c; --rose: #ff00c8; } * { box-sizing: border-box; } body { margin: 0; font-family: Helvetica, Arial, sans-serif; background: var(--gris); color: #000; line-height: 1.5; } header { background: #404040; color: #fff; padding: 12px 16px; } header .wrap { display: flex; align-items: center; gap: 12px; } header img { width: 40px; height: 40px; image-rendering: pixelated; } header strong { font-size: 1.4rem; color: #fff; } .wrap { max-width: 1040px; margin: 0 auto; } main { padding: 0 16px 40px; } .langs { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; margin: 10px 0 0; padding: 0; } .langs a { color: var(--nuit); } h1 { color: var(--bleu); font-size: 2.2rem; margin: 28px 0 8px; } h2 { color: var(--nuit); border-bottom: 2px solid #808080; padding-bottom: 4px; margin-top: 40px; } .lead { font-size: 1.15rem; max-width: 760px; } .play { display: inline-block; background: var(--bleu); color: #fff; font-weight: bold; font-size: 1.25rem; padding: 14px 28px; border-radius: 6px; text-decoration: none; margin: 12px 0 24px; } .play:hover { background: var(--nuit); } figure { margin: 0; background: #fff; border: 1px solid #808080; padding: 6px; } figure img { display: block; width: 100%; height: auto; } figcaption { font-size: .9rem; color: #646464; padding: 6px 2px 0; } .grid { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; } .card { background: #fff; border: 1px solid #808080; padding: 12px 16px; } code { background: #eeeeff; padding: 1px 4px; border-radius: 3px; } .help h3 { color: #990000; font-size: 1.05rem; margin: 18px 0 6px; } .help .note { color: #646464; font-size: .9rem; } .rainbow span:nth-child(9n+1) { color: #ff00c8 } .rainbow span:nth-child(9n+2) { color: #6e265f } .rainbow span:nth-child(9n+3) { color: #7d0000 } .rainbow span:nth-child(9n+4) { color: #1a1a8c } .rainbow span:nth-child(9n+5) { color: #0000ff } .rainbow span:nth-child(9n+6) { color: #147300 } .rainbow span:nth-child(9n+7) { color: #9b9b14 } .rainbow span:nth-child(9n+8) { color: #ff9d00 } .rainbow span:nth-child(9n) { color: #ff0000 } .shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .shots .phone img { max-width: 260px; margin: 0 auto; } @media (max-width: 720px) { .shots { grid-template-columns: 1fr; } } footer { font-size: .85rem; color: #404040; padding: 24px 16px; border-top: 1px solid #808080; } @media (max-width: 720px) { .grid { grid-template-columns: 1fr; } h1 { font-size: 1.7rem; } } </style></head><body><header><div class="wrap"><img src="images/favicon.png" alt="Le smiley clin d'œil de l'applet" width="40" height="40"><strong>CaraChat</strong></div></header><main class="wrap"> <nav class="langs" aria-label="Langues"> <strong lang="fr" aria-current="page">Français</strong> <a href="en/" lang="en" hreflang="en">English</a> <a href="es/" lang="es" hreflang="es">Español</a> <a href="de/" lang="de" hreflang="de">Deutsch</a> <a href="it/" lang="it" hreflang="it">Italiano</a> <a href="pt/" lang="pt" hreflang="pt">Português</a> <a href="nl/" lang="nl" hreflang="nl">Nederlands</a> <a href="pl/" lang="pl" hreflang="pl">Polski</a> <a href="ru/" lang="ru" hreflang="ru">Русский</a> <a href="uk/" lang="uk" hreflang="uk">Українська</a> <a href="tr/" lang="tr" hreflang="tr">Türkçe</a> <a href="ja/" lang="ja" hreflang="ja">日本語</a> <a href="zh/" lang="zh" hreflang="zh">中文</a> <a href="ko/" lang="ko" hreflang="ko">한국어</a> </nav> <h1>Le chat des années 2000, de retour</h1> <p class="lead">CaraChat recrée en PHP l'applet de chat Caramail de 2002 : les salons, les privés, les pseudos roses et bleus, le texte <span class="rainbow"><span>a</span><span>r</span><span>c</span><span>-</span><span>e</span><span>n</span><span>-</span><span>c</span><span>i</span><span>e</span><span>l</span></span> et la vague, et les smileys dessinés exactement comme à l'époque.</p> <a class="play" href="play/?lang=fr">Entrer sur le chat</a> <figure> <img src="images/chat.png" alt="Le salon Accueil de CaraChat : phrases colorées, smileys, liste des présents et onglets" width="1024" height="700"> <figcaption>Un salon : les phrases en couleur, l'arc-en-ciel, les smileys, les présents à droite et un privé qui clignote en orange.</figcaption> </figure> <h2>Les onglets de l'applet</h2> <div class="shots"> <figure><img src="images/rooms.png" alt="L'onglet Salons : les salons permanents, la création d'un salon public ou privé" width="1024" height="700" loading="lazy"><figcaption>Salons : les salons permanents et ceux des membres, la création d'un salon.</figcaption></figure> <figure><img src="images/search.png" alt="L'onglet Connecté(e)s : la liste des connectés et la recherche par pseudo, âge, sexe" width="1024" height="700" loading="lazy"><figcaption>Connecté(e)s : la recherche par pseudo ou par ville, âge et sexe.</figcaption></figure> <figure><img src="images/private.png" alt="Un dialogue privé avec ses options et la palette de smileys spéciaux" width="1024" height="700" loading="lazy"><figcaption>Un dialogue privé, ses options et les smileys spéciaux.</figcaption></figure> <figure class="phone"><img src="images/phone.png" alt="CaraChat sur un téléphone" width="390" height="760" loading="lazy"><figcaption>Sur téléphone.</figcaption></figure> </div> <h2>Ce qui revient</h2> <div class="grid"> <div class="card"> <ul> <li><strong>L'interface de l'applet</strong>, redessinée à l'identique : onglets Salons, Connecté(e)s, Options, Ami(e)s, le salon et un onglet par privé (20 au plus) qui passe en orange, cadres « Dialogue » et « Membres du salon », « Message privé », « Pas de nouveaux PVs », « Problème de comportement ».</li> <li><strong>Sur téléphone</strong> aussi, et dans 14 langues (celle du navigateur, à changer dans l'onglet Options).</li> <li><strong>Les salons</strong> permanents et ceux des membres, publics ou privés ; un salon plein (40) déborde dans « Salon* ».</li> <li><strong>Les privés</strong> : double-clic sur un pseudo, ou <code>/pseudo message</code> depuis le salon.</li> <li><strong>La recherche</strong> par pseudo ou par ville, avec tranche d'âge et sexe.</li> <li><strong>Les couleurs</strong> (12, dont l'arc-en-ciel) et les tailles (dont la vague), les pseudos colorés selon le profil, votre pseudo en gras quand on vous parle.</li> <li><strong>La modération</strong> : éjection, appel d'un modérateur, ignorer quelqu'un, « pas de nouveaux privés », occupé.</li> </ul> </div> <figure> <img src="images/login.png" alt="La fenêtre de connexion : pseudo, âge, ville, sexe et serveur" width="520" height="447"> <figcaption>La connexion : votre profil et le serveur.</figcaption> </figure> </div> <h2>Les smileys d'origine</h2> <p>Ils n'étaient pas des images mais du code de dessin : ce code a été lu dans l'applet et rejoué au pixel près. Des yeux <code>:;8B%</code>, un nez qui choisit la tête <code>-o#!*$</code> (clown, père Noël, chope, masque…), une bouche <code>)(DPO|</code> : <code>:-)</code>, <code>;-)</code>, <code>8-)</code>, <code>:o)</code>, <code>:#)</code>. Un chiffre colore le visage (<code>:-)2</code>), <code>#c</code> / <code>#d</code> ajoutent une main, et <code>#00</code> à <code>#14</code> sont des dessins : bombe, nounours, sapin, dauphin, cœur <code>#13</code>… Et les 60 images de la palette « Smileys » (le hamburger <code>@00</code>, le cœur <code>@11</code>, le gâteau <code>@09</code>…) viennent du <code>smiley.gif</code> d'origine.</p> <figure> <img src="images/smileys.png" alt="Des phrases du salon avec les smileys dessinés : visages, cœur, sapin, note de musique" width="900" height="319"> </figure> <h2>Le mode d'emploi d'origine</h2> <p>L'aide en ligne du dialogue en direct de Caramail (1999), reprise telle quelle : <a href="aide.html">qu'est-ce que le dialogue en direct, la création de salons publics ou privés, l'envoi de messages privés</a>.</p> <h2>Le serveur</h2> <p>Le serveur <strong>CaraChat Serveur</strong> est réécrit en PHP 8 à partir des sources de 2012, sans base de données, et tourne dans Docker sur jumphp.net. Il parle exactement le protocole de l'applet (une ligne par trame, des champs séparés par des tabulations), en TCP comme à l'époque ou en WebSocket sur le port 443 (<code>wss://caramail.jumphp.net/ws</code>) : la connexion passe partout, même derrière un pare-feu.</p> <a class="play" href="play/?lang=fr">Ouvrir CaraChat</a></main><footer class="wrap">CaraChat est une recréation non officielle, faite avec JumPHP. L'applet d'origine (net.spray.chat, 2002) et le serveur PHP « NewCaraChat » (2012) appartiennent à leurs auteurs.</footer></body></html>