Retourner à la page d'accueil de TJS

Script websock : Application de Chat via Web Socket sur un serveur Node.js

Partie III : Pour aller encore plus loin avec JavaScript / Chapitre 21 : Introductions à Node.js / Page 287

Exécution du script

Emulation de la console

Code source

<script>var ip="217.69.3.208";</script><html><head>  <title>WebSocket client : Création d'une application de Chat</title></head><body><form onsubmit="return false;" ><h1>Connexion WebSocket : Page Client du Chat</h1><div id="etape1">  <h2>Choisissez d'abord votre pseudo</h2>  <div id="pseudo">Votre pseudo : <input type="text" name="pseudo" value="" maxlength="10"> <input type="submit" value="Choisir" onclick="choisirPseudo(this.form)"></div></div><div id="etape2">  <h2>Fenêtre de conversation du Chat</h2>  <div id="chat">    <div id="messagerie"></div>    <div id="commandes">      <div id="message" >        <input type="text" name="message" value="" placeholder="Tapez ici votre message" style="width:90%">        <input type="submit" value="Envoyer" onclick="sendMessage(this.form)">      </div>    </div>  </div></div><h2>Console du Chat</h2><div id="log"></div></form>  <script>  var pseudo="";  var log=document.querySelector("div#log");  var messagerie=document.querySelector("div#messagerie")    /* Etape 1 : Validation du choix du pseudo de l'utilisateur */  function choisirPseudo(f) {    if (f.pseudo.value!="") {      pseudo=f.pseudo.value;      socket.send(encodeMessage("", "PSEUDO="+f.pseudo.value)); /* Envoi du pseudo au serveur */      document.querySelector("div#pseudo").innerHTML="Votre pseudo est <strong>"+htmlentities(f.pseudo.value)+"</strong>";      document.querySelector("div#etape2").style.visibility="visible";    }  }  /* Etape 2 : Chat activé après saisie du pseudo */  function sendMessage(f) {    if (f.message.value!="") {      socket.send(encodeMessage(pseudo, f.message.value)); /* Envoi du message au serveur */      f.message.value="";      f.message.focus();    }  }  /* Configuration de la connexion */  var socket=new WebSocket("ws://"+ip+":8080", "echo-protocol");  consoleLog("Création de la connexion "+socket.url);    /* Déclenché à la première ouverture de la connexion ws:// */  socket.addEventListener("open", function (event) {    socket.send(encodeMessage("", "Hello Serveur")); /* Envoi d'un premier message au serveur */  });    /* Déclenché quand le serveur coupe la connexion */  socket.addEventListener("close", function (event) {    var txt="Fermeture de la connexion";    consoleLog(txt);  });  /* Déclenché à la détection d'une erreur */  socket.addEventListener("error", function (error) {    var txt="Erreur détectée";    consoleLog(txt);  });    /* Déclenché à la réception de tout message */  socket.addEventListener("message", function (event) {    if (pseudo=="") { /* Tant que pas de pseudo choisi, on ne fait rien */      return;    }    var string=event.data;    var msg=decodeMessage(string);    if (msg) {      var txt="Message reçu du serveur : "+ string;      consoleLog(txt);      if (msg.auteur!="") {        if (msg.auteur=="Serveur") { // Message de notification issu du serveur          messagerie.innerHTML+="<div><div class=\"notification\">"+htmlentities(msg.message)+"</div></div>";        } else {          messagerie.innerHTML+="<div><div class=\"pseudo\">"+htmlentities(msg.auteur)+"</div><div class=\"message\">"+htmlentities(msg.message)+"</div></div>";        }      }    } else {      consoleLog("Erreur de message");    }  });    /* Formatage d'un message avant envoi */  function encodeMessage(auteur, texte) {    return JSON.stringify({auteur: auteur, message: texte});  }  /* Décodage d'un message reçu */  function decodeMessage(string) {    try {    var message=JSON.parse(string);    return message;    } catch (err) {    return null;    }  }    /* Affiche une information dans la console et dans div#affichage */  function consoleLog(txt) {    var div=document.createElement("div");    div.innerText=txt;    log.appendChild(div);    console.log(txt);    }  /* Sécurise du texte avant de l'afficher */  function htmlentities(c) {    var e='';    if (c) {      for (var i=0; i<c.length; i++) {      e+='&#'+c.charCodeAt(i)+';';    }    }    return e;  };</script><style type="text/css">  body {    font-family: arial;    min-height:800px;    background: #fff;  }  input {    font-size:13px;  }  h1, h2 {    margin:0px;    padding:0px;    margin-top:3px;    margin-bottom: 3px;  }  div#etape1 {    display:block;  }  div#etape2 {    visibility: hidden;  }    div#messagerie {    border:1px solid #999;    background: #fff;    padding:5px;    min-height:40%;  }    div#chat div.pseudo {    display: inline-block;    font-weight:bold;    margin-right:5px;    padding:1px;    border:1px solid #999;    border-radius: 3px;    background: #ccc;      }  div#chat div.message {    display: inline-block;    font-weight:normal;  }    div#chat div.notification {      font-style: italic;      color:#999;  }  div#messagerie div {    display: block;    margin-bottom:3px;      }    div#commandes {    background-color:#ccc;    width:100%;      }  div#commandes div#message {    display: inline-block;    margin:4px;    width:90%;      }  div#log {    background: #f6f6f6;    padding:5px;    box-shadow: 1px 1px 3px #666;    min-height:18%;  }  div#log div {    margin-bottom: 3px;    font-family: "courier new";    font-size:12px;  }</style></body></html>

Mon nouveau livre Tout JavaScript chez Dunod

Tout JavaScript le livre chez DunodEn savoir plus
Sortie le 6 février 2019

Version papier à 29€90
Format électronique à 21€90.

Commandez en ligne Dunod  Fnac  Amazon

Chercher une fonction, un objet, ...

Le graph des objets JavaScript



Chargement
en cours...

Nouveau service en ligne de TJS

cleanMyJS : Détectez toutes les erreurs JavaScript de vos sitescleanMyJS.com
Détectez, enregistrez et analysez toutes les erreurs JavaScript de vos sites
Le 22/02/2019 06:04:42 sur php7 en 53.02 ms