-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathclient.html
102 lines (84 loc) · 3.95 KB
/
client.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Socket.io Chat Test with Unread Message Indicator</title>
<script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
<style>
.unread-indicator {
color: green;
font-weight: bold;
margin-left: 10px;
}
</style>
</head>
<body>
<h1>Chat Room Test with Unread Messages</h1>
<!-- User 1 and User 2 input fields -->
<label for="userId1">User ID 1:</label>
<input type="text" id="userId1" placeholder="Enter User ID 1"><br><br>
<label for="userId2">User ID 2:</label>
<input type="text" id="userId2" placeholder="Enter User ID 2"><br><br>
<!-- Button to join room and fetch messages -->
<button id="joinRoomBtn">Join Room and Fetch Last 24 Hours Messages</button>
<span id="unreadIndicator" class="unread-indicator" style="display: none;">Unread Messages!</span>
<br><br>
<!-- Message input and send button -->
<label for="messageContent">Message:</label>
<input type="text" id="messageContent" placeholder="Enter your message"><br><br>
<button id="sendMessageBtn">Send Message</button><br><br>
<!-- Chat messages section -->
<h3>Chat Messages:</h3>
<div id="chatMessages"></div>
<script>
const socket = io('https://hillffair-backend-2k24.onrender.com'); // Change to your server's address
let unreadMessages = 0;
// Join room and fetch messages
document.getElementById('joinRoomBtn').addEventListener('click', () => {
const userId1 = document.getElementById('userId1').value;
const userId2 = document.getElementById('userId2').value;
// Emit joinRoom event
socket.emit('joinRoom', userId1, userId2);
// Reset unread messages count and hide indicator
unreadMessages = 0;
document.getElementById('unreadIndicator').style.display = 'none';
});
// Send message
document.getElementById('sendMessageBtn').addEventListener('click', () => {
const userId1 = document.getElementById('userId1').value;
const userId2 = document.getElementById('userId2').value;
const messageContent = document.getElementById('messageContent').value;
// Emit joinRoomAndSendMessage event
socket.emit('joinRoomAndSendMessage', userId1, userId2, messageContent);
});
// Receive previous messages when joining a room
socket.on('previousMessages', (messages) => {
const chatMessages = document.getElementById('chatMessages');
chatMessages.innerHTML = ''; // Clear previous messages
messages.forEach((message) => {
const messageElement = document.createElement('div');
messageElement.textContent = `${message.timestamp}: ${message.content}`;
chatMessages.appendChild(messageElement);
});
});
// Handle the case where no messages are found
socket.on('noMessages', (data) => {
const chatMessages = document.getElementById('chatMessages');
chatMessages.innerHTML = `<p>${data.error}</p>`;
});
// Receive real-time messages
socket.on('privateMessage', (message) => {
const chatMessages = document.getElementById('chatMessages');
const messageElement = document.createElement('div');
messageElement.textContent = `${message.timestamp}: ${message.content}`;
chatMessages.appendChild(messageElement);
// If the user has not joined the room, show unread indicator
if (document.getElementById('unreadIndicator').style.display === 'none') {
unreadMessages++;
document.getElementById('unreadIndicator').style.display = 'inline';
}
});
</script>
</body>
</html>