<!doctype html><html lang="nl"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>CaraChat – de Caramail-chat van de jaren 2000, opnieuw gebouwd in PHP (gratis, online)</title> <meta name="description" content="CaraChat bouwt de Caramail-chatclient van 2002 na in PHP: kamers, privéchats, gekleurde nicknames, regenboog- en golftekst en de oorspronkelijk getekende smileys. Gratis, in de browser."> <link rel="canonical" href="https://{{DOMAIN}}/nl/"> <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 – de Caramail-chat van de jaren 2000"> <meta property="og:description" content="Kamers, privéchats, kleuren, regenboog en de originele smileys: de chat van 2002, opnieuw gebouwd in PHP."> <meta property="og:url" content="https://{{DOMAIN}}/nl/"> <meta property="og:image" content="https://{{DOMAIN}}/images/og.png"> <meta property="og:locale" content="nl_NL"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="CaraChat – de Caramail-chat van de jaren 2000"> <meta name="twitter:description" content="Kamers, privéchats, kleuren, regenboog en de originele smileys: de chat van 2002, opnieuw gebouwd in 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": "De Caramail-chatclient van 2002, met JumPHP nagebouwd in PHP: kamers, privéchats, kleuren, regenboog- en golftekst, oorspronkelijk getekende smileys.", "url": "https://{{DOMAIN}}/nl/", "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": "Hoe maak je een smiley?", "acceptedAnswer": {"@type": "Answer", "text": "Zoals in 2002: ogen, een neus en een mond, bijvoorbeeld :-) ;-) 8-) :o) of :#) voor de kerstman. De neus is verplicht. Een cijfer na de smiley verandert de kleur (:-)2), #c of #d voegt een hand toe. #00 tot #14 zijn tekeningen: #13 is een hart."}}, {"@type": "Question", "name": "Heb je een server nodig?", "acceptedAnswer": {"@type": "Answer", "text": "Ja: de chatserver CaraChat Serveur (PHP, zonder database) draait in Docker op elke machine; daarna geef je het adres en de poort (4500) op in het inlogvenster."}} ]} </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="De knipogende smiley van de applet" width="40" height="40"><strong>CaraChat</strong></div></header><main class="wrap"> <nav class="langs" aria-label="Talen"> <a href="../" lang="fr" hreflang="fr">Français</a> <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> <strong lang="nl" aria-current="page">Nederlands</strong> <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>De chat van de jaren 2000 is terug</h1> <p class="lead">CaraChat bouwt de Caramail-chatapplet van 2002 na in PHP: de kamers, de privéchats, de roze en blauwe nicknames, de <span class="rainbow"><span>r</span><span>e</span><span>g</span><span>e</span><span>n</span><span>b</span><span>o</span><span>o</span><span>g</span><span>t</span><span>e</span><span>k</span><span>s</span><span>t</span></span>en de golf, en de smileys, precies zoals toen getekend.</p> <a class="play" href="../play/?lang=nl">Naar de chat</a> <figure> <img src="../images/chat.png" alt="De kamer Accueil (Home) van CaraChat: gekleurde zinnen, smileys, lijst van aanwezigen en tabbladen" width="1024" height="700"> <figcaption>Een kamer: de gekleurde zinnen, de regenboog, de smileys, rechts de aanwezigen en een privéchat die oranje knippert.</figcaption> </figure> <h2>De tabbladen van de applet</h2> <div class="shots"> <figure><img src="../images/rooms.png" alt="Het tabblad Salons: de vaste kamers, een openbare of privékamer aanmaken" width="1024" height="700" loading="lazy"><figcaption>Salons (kamers): de vaste kamers en die van de leden, een kamer aanmaken.</figcaption></figure> <figure><img src="../images/search.png" alt="Het tabblad Connecté(e)s: de lijst van wie online is en zoeken op nickname, leeftijd, geslacht" width="1024" height="700" loading="lazy"><figcaption>Connecté(e)s (online): zoeken op nickname of op stad, leeftijd en geslacht.</figcaption></figure> <figure><img src="../images/private.png" alt="Een privégesprek met zijn opties en het palet met speciale smileys" width="1024" height="700" loading="lazy"><figcaption>Een privégesprek, zijn opties en de speciale smileys.</figcaption></figure> <figure class="phone"><img src="../images/phone.png" alt="CaraChat op een telefoon" width="390" height="760" loading="lazy"><figcaption>Op de telefoon.</figcaption></figure> </div> <h2>Wat terugkomt</h2> <div class="grid"> <div class="card"> <ul> <li><strong>De interface van de applet</strong>, identiek nagetekend: tabbladen Salons (kamers), Connecté(e)s (online), Options en Ami(e)s (vrienden), de kamer en een tabblad per privégesprek (maximaal 20) dat oranje wordt, kaders « Dialogue » en « Membres du salon » (leden van de kamer), « Message privé » (privébericht), « Pas de nouveaux PVs » (geen nieuwe privégesprekken), « Problème de comportement » (gedragsprobleem).</li> <li><strong>Ook op de telefoon</strong>, en in 14 talen (die van de browser, te wijzigen op het tabblad Options).</li> <li><strong>De kamers</strong>, vaste en die van de leden, openbaar of privé; een volle kamer (40) loopt over naar « Salon* ».</li> <li><strong>De privégesprekken</strong>: dubbelklik op een nickname, of <code>/nickname bericht</code> vanuit de kamer.</li> <li><strong>Zoeken</strong> op nickname of op stad, met leeftijdsklasse en geslacht.</li> <li><strong>De kleuren</strong> (12, waaronder de regenboog) en de groottes (waaronder de golf), nicknames gekleurd naar profiel, je eigen nickname vetgedrukt als iemand je aanspreekt.</li> <li><strong>De moderatie</strong>: eruit gooien, een moderator erbij roepen, iemand negeren, « geen nieuwe privégesprekken », bezet.</li> </ul> </div> <figure> <img src="../images/login.png" alt="Het inlogvenster: nickname, leeftijd, stad, geslacht en server" width="520" height="447"> <figcaption>Inloggen: je profiel en de server.</figcaption> </figure> </div> <h2>De originele smileys</h2> <p>Het waren geen afbeeldingen maar tekencode: die code is uit de applet gelezen en pixel voor pixel nagespeeld. Ogen <code>:;8B%</code>, een neus die het hoofd bepaalt <code>-o#!*$</code> (clown, kerstman, bierpul, masker…), een mond <code>)(DPO|</code>: <code>:-)</code>, <code>;-)</code>, <code>8-)</code>, <code>:o)</code>, <code>:#)</code>. Een cijfer kleurt het gezicht (<code>:-)2</code>), <code>#c</code> / <code>#d</code> voegen een hand toe, en <code>#00</code> tot <code>#14</code> zijn tekeningen: bom, teddybeer, kerstboom, dolfijn, hart <code>#13</code>… En de 60 plaatjes van het palet « Smileys » (de hamburger <code>@00</code>, het hart <code>@11</code>, de taart <code>@09</code>…) komen uit de originele <code>smiley.gif</code>.</p> <figure> <img src="../images/smileys.png" alt="Zinnen uit de kamer met de getekende smileys: gezichten, hart, kerstboom, muzieknoot" width="900" height="319"> </figure> <h2>De originele handleiding</h2> <p>De online help van de live chat van Caramail (1999), ongewijzigd overgenomen, in het Frans: <a href="../aide.html">wat live chatten is, openbare of privékamers aanmaken, privéberichten versturen (help in het Frans)</a>.</p> <h2>De server</h2> <p>De server <strong>CaraChat Serveur</strong> is herschreven in PHP 8 op basis van de bronnen uit 2012, zonder database, en draait in Docker op jumphp.net. Hij spreekt precies het protocol van de applet (één regel per frame, velden gescheiden door tabs), via TCP zoals toen of via WebSocket op poort 443 (<code>wss://caramail.jumphp.net/ws</code>): de verbinding komt overal doorheen, zelfs achter een firewall.</p> <a class="play" href="../play/?lang=nl">CaraChat openen</a></main><footer class="wrap">CaraChat is een onofficiële nabouw, gemaakt met JumPHP. De oorspronkelijke applet (net.spray.chat, 2002) en de PHP-server « NewCaraChat » (2012) zijn van hun makers.</footer></body></html>