bonjour le chameau
<-- conteneur du chat -->
var WebsocketClass = function(host){
this.socket = new WebSocket(host);
this.console = document.getElementsByClassName('console')[0];
};
var uId = ''; /* pseudo de l'utilisateur*/
var button = document.getElementsByClassName('sii-chat-send')[0]; /* bouton d'envoi du message */
var messageInput = document.getElementsByName('sii-chat-message')[0]; /* message à envoyer vers le serveur */
var buttonUser = document.getElementsByClassName('sii-chat-login')[0]; /* bouton de soumission du pseudo */
var contentMessage = document.getElementsByClassName('sii-chat-content')[0]; /* div contenant les messages reçus par le serveur*/
var WebsocketClass = function(host){
this.socket = new WebSocket(host);
this.console = document.getElementsByClassName('console')[0];
};
WebsocketClass.prototype = {
initWebsocket : function(){
var $this = this;
this.socket.onopen = function(){
$this.onOpenEvent(this);
};
this.socket.onmessage = function(e){
$this._onMessageEvent(e);
};
this.socket.onclose = function(){
$this._onCloseEvent();
};
this.socket.onerror = function(error){
$this._onErrorEvent(error);
};
this.console.innerHTML = this.console.innerHTML + 'websocket init Pseudo :
<-- pseudo à saisir pour le chat -->
<-- les messages apparaitront ici -->
'; }, _onErrorEvent :function(err){ console.log(err); this.console.innerHTML = this.console.innerHTML + 'websocket error
'; }, onOpenEvent : function(socket){ console.log('socket opened'); this.console.innerHTML = this.console.innerHTML + 'socket opened Welcome - status ' + socket.readyState + '
'; }, _onMessageEvent : function(e){ e = JSON.parse(e.data); if(e.msg.length > 0) e.msg = JSON.parse(e.msg); contentMessage.innerHTML = contentMessage.innerHTML + '>' + e.msg.from + ' : ' + e.msg.message + '
'; contentMessage.scrollTop = contentMessage.scrollHeight; /* permet de scroller automatiquement vers le bas dans la div contenant la réception des messages */ this.console.innerHTML = this.console.innerHTML + 'message event lanched
'; }, _onCloseEvent : function(){ console.log('connection closed'); this.console.innerHTML = this.console.innerHTML + 'websocket closed - server not running
'; uId = ''; document.getElementsByName('sii-chat-name')[0].value = ''; messageInput.disabled = 'disabled'; button.disabled = 'disabled'; }, sendMessage : function(){ var message = '{"from":"' + uId + '", "message":"' + messageInput.value + '"}'; this.socket.send('{"action":"ctrl/chat/out", "msg":' + JSON.stringify(message) + '}'); messageInput.value = ''; this.console.innerHTML = this.console.innerHTML + 'websocket message send
'; } }; var socket = new WebsocketClass('ws://localhost:11345/serveur.php'); /* on instancie un objet WebsocketClass avec l'URL en paramètre */ if(button.addEventListener){ buttonUser.addEventListener('click', function(e){ /* on écoute l'évènement 'click' sur le bouton permettant de valider son pseudo */ e.preventDefault(); /* on stoppe la propagation */ socket.initWebsocket(); /* initialisation de la connexion vers le serveur de socket */ uId = document.getElementsByName('sii-chat-name')[0].value; /* récupération de la valeur du pseudo de l'utilisateur */ messageInput.disabled = ''; /* on permet l'accès au chat (aux champs permettant d'envoyer des messages) */ button.disabled = ''; return false; /* on évite le rechargement de page */ }, true); button.addEventListener('click',function(e){ /* on écoute l'évènement 'click' sur le bouton permettant d'envoyer le message */ e.preventDefault(); socket.sendMessage(); /* on envoie un message vers le serveur*/ return false; }, true); } else{ console.log('votre navigateur n\'accepte pas le addevenlistener'); }