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> |
