-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
133 lines (114 loc) · 4.02 KB
/
index.html
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
<!doctype html>
<html>
<head>
<title>Socket.IO chat</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font: 13px Helvetica, Arial;
}
form {
background: #000;
padding: 3px;
position: fixed;
bottom: 0;
width: 100%;
}
form input {
border: 0;
padding: 10px;
width: 90%;
margin-right: .5%;
}
form button {
width: 9%;
background: rgb(130, 224, 255);
border: none;
padding: 10px;
}
#messages {
list-style-type: none;
margin: 0;
padding: 0;
}
#messages li {
padding: 5px 10px;
}
#messages li:nth-child(odd) {
background: #eee;
}
</style>
</head>
<body>
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script>
$(function () {
var socket = io();
// On demande le pseudo, on l'envoie au serveur et on l'affiche dans le titre
var mute= [];
var pseudo = prompt('Quel est votre pseudo ?');
socket.emit('nouveau_client', pseudo);
document.title = pseudo + ' - ' + document.title;
socket.on('chat message', function (data) {
//$('#messages').append($('<li>').text(msg));
if (!mute.includes(data.pseudo)) {
if (data.msg.startsWith('/whisper')) {
if (data.msg.startsWith('/whisper ' + pseudo)) {
if (data.pseudo != pseudo) { insereMessage(data.pseudo, data.msg) }
}
}
else {
if (data.pseudo != pseudo) { insereMessage(data.pseudo, data.msg) }
}
}
});
// Quand un nouveau client se connecte, on affiche l'information
socket.on('nouveau_client', function (pseudo) {
$('#messages').append('<p><em>' + pseudo + ' a rejoint le Chat !</em></p>');
})
$('form').submit(function (e) {
e.preventDefault(); // prevents page reloading
var message = $('#m').val();
//socket.emit();
if (message.startsWith('/mute')) {
if (!mute.includes(message.substring(6))) {
mute.push(message.substring(6));
insereMessage(pseudo, message); // Affiche le message aussi sur notre page
$('#m').val('');
}
} else if (message.startsWith('/unmute')) {
var temp = mute.indexOf(message.substring(6), 1);
mute.splice(temp, 1)
insereMessage(pseudo, message); // Affiche le message aussi sur notre page
$('#m').val('');
} else {
socket.emit('chat message', message); // Transmet le message aux autres
insereMessage(pseudo, message); // Affiche le message aussi sur notre page
$('#m').val('');
}
return false;
});
});
// Ajoute un message dans la page
function insereMessage(pseudo, message) {
var liste=['windows', 'microsoft'];
for (const item of liste) {
var star ='*';
var num =item.length;
var subs=star.repeat(num);
message=message.replace(item, subs);
}
$('#messages').append('<p><strong>' + pseudo + '</strong> ' + message + '</p>');
}
</script>
</body>
</html>