1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139
| <html>
<title>Multi-chats avec Socket.io par Atinux.fr</title>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/kube.min.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<body>
<div id="content">
<h3 class="title">Multi chats</h3>
<form id="choixChat" class="forms columnar bgWhite">
<fieldset>
<ul>
<li>
<label class="bold">Groupe</label>
<select class="chambre" name="chambre">
<option value="chatHommesFemmes">Chat hommes/femmes</option>
<option value="chatHommes">Chat hommes</option>
<option value="chatFemmes">Chat femmes</option>
<option value="chatAnimaux">Chat animaux</option>
</select>
</li>
<li>
<label class="bold">Pseudonyme</label>
<input type="text" class="username" name="username">
</li>
<li class="push">
<input type="submit" name="enter" value="Entrer" class="btn">
</li>
</ul>
</fieldset>
</form>
<div class="chat" style="display:none;">
<div class="back bgWhite">
<button class="close btn">Close this chat</button>
</div>
<div class="overflowMessages">
<table class="messages bordered bgWhite"></table>
</div>
<form id="send" class="forms columnar bgWhite">
<fieldset>
<ul>
<li style="margin-bottom: 0px;">
<label class="bold" style="width: 50px;">Message</label>
<input type="text" name="message" class="message" value="" style="width: 400px;">
<input type="submit" class="btn" name="send" value="envoyer">
</li>
</ul>
</fieldset>
</form>
</div>
<div class="loader bgWhite" style="display: none;">
<ul><li></li><li></li><li></li><li></li><li></li><li></li></ul>
</div>
<h5>Par <a href="http://www.twitter.fr/Atinux" target="_blank">Sébastien Chopin</a> pour <a href="http://www.atinux.fr" target="_blank">Atinux.fr</a></h5>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
<script type="text/javascript">
$(function () {
// Utils
function htmlspecialchars(string) { return $('<span>').text(string).html(); }
// Variables jQuery
var $chat = $('.chat'),
$loader = $('.loader'),
$title = $('.title'),
$messages = $('.messages', $chat);
$message = $('.message', $chat);
// Variables "globales"
var socket,
username;
// Fonctions
function newMessage(hash) {
$('<tr>').html('<td class="username bold">'+htmlspecialchars(hash.username)+'</td><td>' + htmlspecialchars(hash.text) + '</td>').appendTo($messages);
$messages.find('.noMess').remove();
$('.overflowMessages').stop().animate({
scrollTop: $messages.height()
}, 400);
}
// On attends qu'il choisisse son chat
$('#choixChat').submit(function () {
// On récupère le namespace choisit
var namespace = $('.chambre', this).val();
username = $('.username', this).val() || ('User'+ Math.ceil(Math.random() * 100000));
$(this).hide();
$loader.show();
// on se connecte à ce namespace
socket = io.connect('/'+namespace, {
"force new connection": true // Juste pour pouvoir bien re-rentrer dans l'evénement "connected"
});
// Envoie l'évènement que j'ai bien sauvegardé
socket.on('connected', function (res) {
// On affiche le chat
$loader.hide();
$chat.show();
$title.html(res.title);
// Si aucun messages...
if (!res.messages.length) {
$messages.html('<tr class="noMess"><td>Aucun messages pour le moment, qu\'attendez vous ?</td></tr>');
}
else {
// On affiche le titre personnalisé à ce chat
for (var i = 0, l = res.messages.length; i < l; i++) {
newMessage(res.messages[i]);
}
}
// Focus sur l'input
$message.focus();
});
// Pour chaque nouveau message...
socket.on('newMessage', newMessage);
// On previent l'évènement de continuer et de raffrichir la page
return false;
});
// Quand il publie un message sur son chat
$('#send').submit(function () {
var text = $.trim($message.val());
if (!text.length) return false;
var hash = {
username: username,
text: text
};
$message.val('').focus();
socket.emit('message', hash);
newMessage(hash)
return false;
});
$('.close').click(function () {
socket.disconnect();
$chat.hide();
$title.html('Multi chats');
$messages.html('');
$message.val('');
$('#choixChat').show();
});
});
</script>
</body>
</html> |
Partager