<!
DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Messagerie Avancée</title>
<style>
body {
font-family: Arial, sans-serif;
background: #f0f2f5;
margin: 0;
}
.login-container, .chat-container {
width: 400px;
margin: 50px auto;
background: white;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
display: flex;
flex-direction: column;
}
.header {
background: #4CAF50;
color: white;
padding: 15px;
border-radius: 10px 10px 0 0;
text-align: center;
}
.messages {
height: 300px;
overflow-y: auto;
padding: 10px;
display: flex;
flex-direction: column;
}
.message {
padding: 10px;
margin: 5px 0;
border-radius: 8px;
max-width: 70%;
display: flex;
align-items: center;
}
.sent {
background: #DCF8C6;
align-self: flex-end;
flex-direction: row-reverse;
}
.received {
background: #eee;
align-self: flex-start;
}
.message img {
width: 30px;
height: 30px;
border-radius: 50%;
margin: 0 5px;
}
.input-box {
display: flex;
border-top: 1px solid #ccc;
}
input {
flex: 1;
padding: 10px;
border: none;
}
button {
padding: 10px;
background: #4CAF50;
color: white;
border: none;
}
</style>
</head>
<body>
<div class="login-container" id="loginBox">
<div class="header">Connexion</div>
<input type="text" id="username"
placeholder="Nom d'utilisateur">
<input type="file" id="profilePic">
<button onclick="login()">Se connecter</button>
</div>
<div class="chat-container" id="chatBox"
style="display:none;">
<div class="header">Messagerie</div>
<div class="messages" id="messages"></div>
<div class="input-box">
<input type="text" id="messageInput"
placeholder="Écrire un message...">
<button onclick="sendMessage()">Envoyer</
button>
</div>
</div>
<script>
let username = '';
let profilePicUrl = '';
let ws;
function login() {
username =
[Link]('username').value;
const file =
[Link]('profilePic').files[0];
if(file) {
const reader = new FileReader();
[Link] = () => {
profilePicUrl = [Link];
startChat();
};
[Link](file);
} else {
startChat();
}
}
function startChat() {
[Link]('loginBox').[Link]
= 'none';
[Link]('chatBox').[Link]
= 'flex';
ws = new WebSocket('[Link] //
WebSocket serveur
[Link] = (event) => {
const data = [Link]([Link]);
const div = [Link]('div');
[Link]('message');
[Link]([Link] === username ?
'sent' : 'received');
[Link] = `<img src='${[Link]file}'
alt='profile'>${[Link]}`;
[Link]('messages').appendC
hild(div);
[Link]();
if([Link] !== username) {
new Notification('Nouveau message', {body:
[Link]});
}
};
}
function sendMessage() {
const msg =
[Link]('messageInput').value;
if([Link]() === '') return;
[Link]([Link]({username, profile:
profilePicUrl, message: msg}));
[Link]('messageInput').value
= '';
}
if(Notifi[Link] !== 'granted') {
Notifi[Link]();
}
</script>
</body>
</html>
J’ai ajouté un système complet de login utilisateur
avec photo, messages envoyés et reçus stylés, et
l’intégration WebSocket pour le chat en temps réel
avec notifications de nouveaux messages.
Le code gère maintenant :
Connexion avec nom + photo de profil
Messages affichés avec photo et alignement selon
l’envoyeur
WebSocket pour envoyer/recevoir les messages
instantanément
Notifications système pour les nouveaux messages
Si tu veux, je peux te fournir le serveur WebSocket
en PHP/[Link] prêt à l’emploi pour que le chat
fonctionne réellement en temps réel. Veux-tu que je
fasse ça ?