Add chat functionality with user and receiver ID inputs, and implement message sending
This commit is contained in:
Angad Chauhan
104
chat.html
Normal file
104
chat.html
Normal file
@@ -0,0 +1,104 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Chat Room</title>
|
||||
<script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
#chat-box {
|
||||
border: 1px solid #ccc;
|
||||
padding: 10px;
|
||||
height: 300px;
|
||||
overflow-y: scroll;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.message {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.message.you {
|
||||
text-align: right;
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.message.other {
|
||||
text-align: left;
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h2>Chat Room</h2>
|
||||
<div>
|
||||
<label>User ID: <input type="text" id="userId" value="1" /></label>
|
||||
<label>Receiver ID: <input type="text" id="receiverId" value="2" /></label>
|
||||
<label>Chat ID: <input type="text" id="chatId" value="chat123" /></label>
|
||||
<button onclick="joinRoom()">Join Chat Room</button>
|
||||
</div>
|
||||
|
||||
<div id="chat-box"></div>
|
||||
|
||||
<input type="text" id="message" placeholder="Type a message" />
|
||||
<button onclick="sendMessage()">Send</button>
|
||||
|
||||
<script>
|
||||
const socket = io("http://localhost:8000");
|
||||
|
||||
let chatId = '';
|
||||
let userId = '';
|
||||
let receiverId = '';
|
||||
|
||||
socket.on("connect", () => {
|
||||
console.log("Connected to socket:", socket.id);
|
||||
});
|
||||
|
||||
socket.on("chat-message", (data) => {
|
||||
const chatBox = document.getElementById("chat-box");
|
||||
const msg = document.createElement("div");
|
||||
msg.className = "message " + (data.sender_xid == userId ? "you" : "other");
|
||||
msg.innerText = `User ${data.sender_xid}: ${data.message}`;
|
||||
chatBox.appendChild(msg);
|
||||
chatBox.scrollTop = chatBox.scrollHeight;
|
||||
});
|
||||
|
||||
function joinRoom() {
|
||||
userId = document.getElementById("userId").value;
|
||||
receiverId = document.getElementById("receiverId").value;
|
||||
chatId = document.getElementById("chatId").value;
|
||||
|
||||
socket.emit("join-room", { chatId });
|
||||
}
|
||||
|
||||
async function sendMessage() {
|
||||
const messageText = document.getElementById("message").value;
|
||||
if (!messageText) return;
|
||||
|
||||
const response = await fetch("http://localhost:8000/api/chat/user/send-message", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
userId,
|
||||
chatId,
|
||||
message: messageText,
|
||||
receiverId
|
||||
})
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
console.log("Message sent:", data);
|
||||
|
||||
document.getElementById("message").value = "";
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -204,3 +204,62 @@ ReferenceError: receiverId is not defined
|
||||
2025-06-23 17:24:55 [info]: 2025-06-23T11:54:55.734Z ::1 - OPTIONS /api/chat/user/send-message 204 - 1.127 ms
|
||||
2025-06-23 17:24:55 [info]: 2025-06-23T11:54:55.899Z ::1 - POST /api/chat/user/send-message 200 - 160.824 ms
|
||||
2025-06-23 17:25:36 [info]: Connection has been established successfully.
|
||||
2025-06-25 12:00:38 [info]: Connection has been established successfully.
|
||||
2025-06-25 12:01:43 [info]: Connection has been established successfully.
|
||||
2025-06-25 12:01:45 [info]: Connection has been established successfully.
|
||||
2025-06-25 12:01:55 [info]: Connection has been established successfully.
|
||||
2025-06-25 12:02:19 [info]: Connection has been established successfully.
|
||||
2025-06-25 12:02:31 [info]: Connection has been established successfully.
|
||||
2025-06-25 12:02:36 [info]: Connection has been established successfully.
|
||||
2025-06-25 12:02:51 [info]: Connection has been established successfully.
|
||||
2025-06-25 12:02:55 [info]: Connection has been established successfully.
|
||||
2025-06-25 12:03:54 [info]: 2025-06-25T06:33:54.112Z ::1 - OPTIONS /api/chat/user/send-message 204 - 1.642 ms
|
||||
2025-06-25 12:03:54 [info]: 2025-06-25T06:33:54.318Z ::1 - POST /api/chat/user/send-message 200 - 200.300 ms
|
||||
2025-06-25 12:23:45 [info]: 2025-06-25T06:53:45.319Z ::1 - OPTIONS /api/chat/user/send-message 204 - 0.212 ms
|
||||
2025-06-25 12:23:45 [info]: 2025-06-25T06:53:45.416Z ::1 - POST /api/chat/user/send-message 200 - 94.499 ms
|
||||
2025-06-25 12:24:07 [info]: 2025-06-25T06:54:07.675Z ::1 - OPTIONS /api/chat/user/send-message 204 - 0.167 ms
|
||||
2025-06-25 12:24:07 [error]: userId, chatId, and message are required
|
||||
Error: userId, chatId, and message are required
|
||||
at C:\Wdi Projects\SSA chat\src\controller\chat.controller.js:446:19
|
||||
at C:\Wdi Projects\SSA chat\src\utils\handler\Async.handler.js:10:18
|
||||
at Layer.handle [as handle_request] (C:\Wdi Projects\SSA chat\node_modules\express\lib\router\layer.js:95:5)
|
||||
at next (C:\Wdi Projects\SSA chat\node_modules\express\lib\router\route.js:149:13)
|
||||
at Route.dispatch (C:\Wdi Projects\SSA chat\node_modules\express\lib\router\route.js:119:3)
|
||||
at Layer.handle [as handle_request] (C:\Wdi Projects\SSA chat\node_modules\express\lib\router\layer.js:95:5)
|
||||
at C:\Wdi Projects\SSA chat\node_modules\express\lib\router\index.js:284:15
|
||||
at Function.process_params (C:\Wdi Projects\SSA chat\node_modules\express\lib\router\index.js:346:12)
|
||||
at next (C:\Wdi Projects\SSA chat\node_modules\express\lib\router\index.js:280:10)
|
||||
at Function.handle (C:\Wdi Projects\SSA chat\node_modules\express\lib\router\index.js:175:3)
|
||||
2025-06-25 12:24:07 [error]: 2025-06-25T06:54:07.696Z ::1 - POST /api/chat/user/send-message 400 - 8.086 ms - error: - - referrer: http://127.0.0.1:5500/
|
||||
2025-06-25 12:24:30 [info]: 2025-06-25T06:54:30.068Z ::1 - OPTIONS /api/chat/user/send-message 204 - 0.165 ms
|
||||
2025-06-25 12:24:30 [error]: userId, chatId, and message are required
|
||||
Error: userId, chatId, and message are required
|
||||
at C:\Wdi Projects\SSA chat\src\controller\chat.controller.js:446:19
|
||||
at C:\Wdi Projects\SSA chat\src\utils\handler\Async.handler.js:10:18
|
||||
at Layer.handle [as handle_request] (C:\Wdi Projects\SSA chat\node_modules\express\lib\router\layer.js:95:5)
|
||||
at next (C:\Wdi Projects\SSA chat\node_modules\express\lib\router\route.js:149:13)
|
||||
at Route.dispatch (C:\Wdi Projects\SSA chat\node_modules\express\lib\router\route.js:119:3)
|
||||
at Layer.handle [as handle_request] (C:\Wdi Projects\SSA chat\node_modules\express\lib\router\layer.js:95:5)
|
||||
at C:\Wdi Projects\SSA chat\node_modules\express\lib\router\index.js:284:15
|
||||
at Function.process_params (C:\Wdi Projects\SSA chat\node_modules\express\lib\router\index.js:346:12)
|
||||
at next (C:\Wdi Projects\SSA chat\node_modules\express\lib\router\index.js:280:10)
|
||||
at Function.handle (C:\Wdi Projects\SSA chat\node_modules\express\lib\router\index.js:175:3)
|
||||
2025-06-25 12:24:30 [error]: 2025-06-25T06:54:30.074Z ::1 - POST /api/chat/user/send-message 400 - 3.319 ms - error: - - referrer: http://127.0.0.1:5500/
|
||||
2025-06-25 12:25:26 [info]: 2025-06-25T06:55:26.385Z ::1 - OPTIONS /api/chat/user/send-message 204 - 0.150 ms
|
||||
2025-06-25 12:25:26 [info]: 2025-06-25T06:55:26.470Z ::1 - POST /api/chat/user/send-message 200 - 79.981 ms
|
||||
2025-06-25 12:25:50 [info]: 2025-06-25T06:55:50.162Z ::1 - OPTIONS /api/chat/user/send-message 204 - 0.166 ms
|
||||
2025-06-25 12:25:50 [info]: 2025-06-25T06:55:50.241Z ::1 - POST /api/chat/user/send-message 200 - 76.131 ms
|
||||
2025-06-25 12:26:06 [info]: 2025-06-25T06:56:06.209Z ::1 - OPTIONS /api/chat/user/send-message 204 - 0.150 ms
|
||||
2025-06-25 12:26:06 [info]: 2025-06-25T06:56:06.298Z ::1 - POST /api/chat/user/send-message 200 - 87.234 ms
|
||||
2025-06-25 12:28:41 [info]: 2025-06-25T06:58:41.363Z ::1 - OPTIONS /api/chat/user/send-message 204 - 0.135 ms
|
||||
2025-06-25 12:28:41 [info]: 2025-06-25T06:58:41.440Z ::1 - POST /api/chat/user/send-message 200 - 74.525 ms
|
||||
2025-06-25 12:28:49 [info]: 2025-06-25T06:58:49.657Z ::1 - OPTIONS /api/chat/user/send-message 204 - 0.296 ms
|
||||
2025-06-25 12:28:49 [info]: 2025-06-25T06:58:49.683Z ::1 - POST /api/chat/user/send-message 200 - 15.099 ms
|
||||
2025-06-25 12:32:57 [info]: 2025-06-25T07:02:57.343Z ::1 - OPTIONS /api/chat/user/send-message 204 - 0.171 ms
|
||||
2025-06-25 12:32:57 [info]: 2025-06-25T07:02:57.421Z ::1 - POST /api/chat/user/send-message 200 - 76.346 ms
|
||||
2025-06-25 12:33:03 [info]: 2025-06-25T07:03:03.024Z ::1 - OPTIONS /api/chat/user/send-message 204 - 0.141 ms
|
||||
2025-06-25 12:33:03 [info]: 2025-06-25T07:03:03.039Z ::1 - POST /api/chat/user/send-message 200 - 12.608 ms
|
||||
2025-06-25 13:53:03 [info]: 2025-06-25T08:23:03.086Z ::1 - OPTIONS /api/chat/user/send-message 204 - 1.665 ms
|
||||
2025-06-25 13:53:03 [info]: 2025-06-25T08:23:03.232Z ::1 - POST /api/chat/user/send-message 200 - 132.457 ms
|
||||
2025-06-25 13:53:26 [info]: 2025-06-25T08:23:26.896Z ::1 - OPTIONS /api/chat/user/send-message 204 - 0.193 ms
|
||||
2025-06-25 13:53:26 [info]: 2025-06-25T08:23:26.980Z ::1 - POST /api/chat/user/send-message 200 - 81.504 ms
|
||||
|
||||
@@ -82,3 +82,29 @@ ReferenceError: receiverId is not defined
|
||||
at C:\Wdi Projects\SSA chat\src\controller\chat.controller.js:471:27
|
||||
at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
|
||||
2025-06-23 16:23:06 [error]: 2025-06-23T10:53:06.631Z ::1 - POST /api/chat/user/send-message 500 - 98.187 ms - error: - - referrer: -
|
||||
2025-06-25 12:24:07 [error]: userId, chatId, and message are required
|
||||
Error: userId, chatId, and message are required
|
||||
at C:\Wdi Projects\SSA chat\src\controller\chat.controller.js:446:19
|
||||
at C:\Wdi Projects\SSA chat\src\utils\handler\Async.handler.js:10:18
|
||||
at Layer.handle [as handle_request] (C:\Wdi Projects\SSA chat\node_modules\express\lib\router\layer.js:95:5)
|
||||
at next (C:\Wdi Projects\SSA chat\node_modules\express\lib\router\route.js:149:13)
|
||||
at Route.dispatch (C:\Wdi Projects\SSA chat\node_modules\express\lib\router\route.js:119:3)
|
||||
at Layer.handle [as handle_request] (C:\Wdi Projects\SSA chat\node_modules\express\lib\router\layer.js:95:5)
|
||||
at C:\Wdi Projects\SSA chat\node_modules\express\lib\router\index.js:284:15
|
||||
at Function.process_params (C:\Wdi Projects\SSA chat\node_modules\express\lib\router\index.js:346:12)
|
||||
at next (C:\Wdi Projects\SSA chat\node_modules\express\lib\router\index.js:280:10)
|
||||
at Function.handle (C:\Wdi Projects\SSA chat\node_modules\express\lib\router\index.js:175:3)
|
||||
2025-06-25 12:24:07 [error]: 2025-06-25T06:54:07.696Z ::1 - POST /api/chat/user/send-message 400 - 8.086 ms - error: - - referrer: http://127.0.0.1:5500/
|
||||
2025-06-25 12:24:30 [error]: userId, chatId, and message are required
|
||||
Error: userId, chatId, and message are required
|
||||
at C:\Wdi Projects\SSA chat\src\controller\chat.controller.js:446:19
|
||||
at C:\Wdi Projects\SSA chat\src\utils\handler\Async.handler.js:10:18
|
||||
at Layer.handle [as handle_request] (C:\Wdi Projects\SSA chat\node_modules\express\lib\router\layer.js:95:5)
|
||||
at next (C:\Wdi Projects\SSA chat\node_modules\express\lib\router\route.js:149:13)
|
||||
at Route.dispatch (C:\Wdi Projects\SSA chat\node_modules\express\lib\router\route.js:119:3)
|
||||
at Layer.handle [as handle_request] (C:\Wdi Projects\SSA chat\node_modules\express\lib\router\layer.js:95:5)
|
||||
at C:\Wdi Projects\SSA chat\node_modules\express\lib\router\index.js:284:15
|
||||
at Function.process_params (C:\Wdi Projects\SSA chat\node_modules\express\lib\router\index.js:346:12)
|
||||
at next (C:\Wdi Projects\SSA chat\node_modules\express\lib\router\index.js:280:10)
|
||||
at Function.handle (C:\Wdi Projects\SSA chat\node_modules\express\lib\router\index.js:175:3)
|
||||
2025-06-25 12:24:30 [error]: 2025-06-25T06:54:30.074Z ::1 - POST /api/chat/user/send-message 400 - 3.319 ms - error: - - referrer: http://127.0.0.1:5500/
|
||||
|
||||
Reference in New Issue
Block a user