Skip to content

Commit dcb802e

Browse files
FaizgeekyFaizgeeky
committed
fix : chatroom and websocket working with dynamic user chat
1 parent 3f7e87d commit dcb802e

19 files changed

+460
-85
lines changed

‎.DS_Store

2 KB
Binary file not shown.

‎client/src/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export default function App() {
1717
<Route path='login' element={<Login />} />
1818
<Route path="signup" element={<Signup />} />
1919
<Route path="chat" element={<Chat />} />
20-
<Route path="chat-room" element={<ChatRoom roomName="myRoomName" />} />
20+
<Route path="chat-room" element={<ChatRoom />} />
2121

2222

2323

‎client/src/pages/chat.jsx

Lines changed: 213 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -171,17 +171,196 @@
171171

172172
// export default AuthGuard(Chat);
173173

174-
import React, { useEffect, useState, useRef } from 'react';
175-
import AuthGuard from '../services/AuthGuard';
176-
import axios from 'axios';
174+
// import React, { useEffect, useState, useRef } from 'react';
175+
// import AuthGuard from '../services/AuthGuard';
176+
// import axios from 'axios';
177+
178+
// function Chat({ roomName }) {
179+
// const [users, setUsers] = useState([]);
180+
// const [messages, setMessages] = useState([]);
181+
// const [message, setMessage] = useState('');
182+
// const [selectedUser, setSelectedUser] = useState(null);
183+
// const [chatSocket, setChatSocket] = useState(null);
184+
// const socket = useRef(null);
185+
186+
// const storedData = localStorage.getItem('user');
187+
// const userData = JSON.parse(storedData);
188+
// const accessToken = userData.access;
189+
190+
// useEffect(() => {
191+
// const fetchUsers = async () => {
192+
// try {
193+
// const response = await axios.get('http://127.0.0.1:8000/api/users/', {
194+
// headers: {
195+
// Authorization: `Bearer ${accessToken}`,
196+
// },
197+
// });
198+
// setUsers(response.data);
199+
// } catch (error) {
200+
// console.error('Error fetching users:', error);
201+
// }
202+
// };
203+
204+
// fetchUsers();
205+
206+
// const initWebSocket = () => {
207+
// const ws = new WebSocket(`ws://localhost:8000/ws/chat/`);
208+
209+
// ws.onopen = () => {
210+
// console.log('WebSocket connection opened');
211+
// setChatSocket(ws);
212+
// };
213+
214+
// ws.onmessage = (e) => {
215+
// const data = JSON.parse(e.data);
216+
// console.log("Messages happened", data);
217+
// setMessages((prevMessages) => [...prevMessages, data.message]);
218+
// };
219+
220+
// ws.onclose = () => {
221+
// console.log('Chat socket closed unexpectedly');
222+
// };
223+
224+
// ws.onerror = (error) => {
225+
// console.error('WebSocket error observed:', error);
226+
// };
227+
228+
// socket.current = ws;
229+
// };
230+
231+
// initWebSocket();
232+
233+
// return () => {
234+
// if (socket.current) {
235+
// socket.current.close();
236+
// }
237+
// };
238+
// }, [accessToken]);
239+
240+
// const handleUserClick = (user) => {
241+
// setSelectedUser(user);
242+
// // Fetch message history between selectedUser.id and current user
243+
// fetchMessageHistory(user.id);
244+
// };
245+
246+
// const fetchMessageHistory = async (receiverId) => {
247+
// try {
248+
// const response = await axios.get(`http://127.0.0.1:8000/api/messages/${receiverId}/`, {
249+
// headers: {
250+
// Authorization: `Bearer ${accessToken}`,
251+
// },
252+
// });
253+
// console.log("data dfor messages", response.data)
254+
// setMessages(response.data);
255+
// } catch (error) {
256+
// console.error('Error fetching message history:', error);
257+
// }
258+
// };
259+
260+
// const sendMessage = (e) => {
261+
// e.preventDefault();
262+
// if (chatSocket && message.trim() !== '') {
263+
// chatSocket.send(
264+
// JSON.stringify({
265+
// message: message,
266+
// receiver: selectedUser.id, // Assuming selectedUser has an `id` property
267+
// sender: accessToken,
268+
// })
269+
// );
270+
// setMessage('');
271+
// }
272+
// };
273+
274+
// return (
275+
// <div className="container py-5">
276+
// <div className="row">
277+
// {/* Members List */}
278+
// <div className="col-md-6 col-lg-5 col-xl-4 mb-4 mb-md-0">
279+
// <h5 className="font-weight-bold mb-3 text-center text-lg-start">Members</h5>
280+
// {users.map((user) => (
281+
// <div className="card mb-2" key={user.id} onClick={() => handleUserClick(user)}>
282+
// <div className="card-body">
283+
// <ul className="list-unstyled mb-0">
284+
// <li className="p-2 border-bottom bg-body-tertiary">
285+
// <a href="#!" className="d-flex justify-content-between">
286+
// <div className="d-flex flex-row">
287+
// <div className="pt-1">
288+
// <p className="fw-bold mb-0">{user.username}</p>
289+
// <p className="small text-muted">{user.email}</p>
290+
// </div>
291+
// </div>
292+
// </a>
293+
// </li>
294+
// </ul>
295+
// </div>
296+
// </div>
297+
// ))}
298+
// </div>
299+
300+
// {/* Chat Box */}
301+
// <div className="col-md-6 col-lg-7 col-xl-8 bg-warning rounded">
302+
// <ul className="list-unstyled">
303+
// {/* Display Messages */}
304+
// {messages.map((msg, index) => (
305+
// <li className="d-flex justify-content-between mb-4" key={index}>
306+
// <div className="card w-100">
307+
// <div className="card-header d-flex justify-content-between p-3">
308+
// <p className="fw-bold mb-0">{msg.sender}</p>
309+
// <p className="text-muted small mb-0">
310+
// <i className="far fa-clock"></i> {msg.timestamp}
311+
// </p>
312+
// </div>
313+
// <div className="card-body">
314+
// <p className="mb-0">{msg.message}</p>
315+
// </div>
316+
// </div>
317+
// </li>
318+
// ))}
319+
320+
// {/* Message Input */}
321+
// <li className="bg-white mb-3">
322+
// <div className="form-outline">
323+
// <textarea
324+
// className="form-control bg-body-tertiary"
325+
// id="textAreaExample2"
326+
// rows="4"
327+
// value={message}
328+
// onChange={(e) => setMessage(e.target.value)}
329+
// ></textarea>
330+
// <label className="form-label" htmlFor="textAreaExample2">
331+
// Message
332+
// </label>
333+
// </div>
334+
// </li>
335+
336+
// {/* Send Button */}
337+
// <button
338+
// type="button"
339+
// className="btn btn-info btn-rounded float-end"
340+
// onClick={sendMessage}
341+
// >
342+
// Send
343+
// </button>
344+
// </ul>
345+
// </div>
346+
// </div>
347+
// </div>
348+
// );
349+
// }
350+
351+
// export default AuthGuard(Chat);
177352

178-
function Chat({ roomName }) {
353+
import React, { useState, useEffect, useRef } from 'react';
354+
import axios from 'axios';
355+
import AuthGuard from '../services/AuthGuard';
356+
function Chat() {
179357
const [users, setUsers] = useState([]);
180358
const [messages, setMessages] = useState([]);
181359
const [message, setMessage] = useState('');
360+
const [roomName, setRoomName] = useState('');
361+
182362
const [selectedUser, setSelectedUser] = useState(null);
183-
const [chatSocket, setChatSocket] = useState(null);
184-
const socket = useRef(null);
363+
const [socket, setSocket] = useState(null);
185364

186365
const storedData = localStorage.getItem('user');
187366
const userData = JSON.parse(storedData);
@@ -203,54 +382,48 @@ function Chat({ roomName }) {
203382

204383
fetchUsers();
205384

206-
const initWebSocket = () => {
207-
const ws = new WebSocket(`ws://localhost:8000/ws/chat/`);
385+
if (selectedUser) {
386+
console.log("Selected user id is", selectedUser.id);
387+
const ws = new WebSocket(`ws://localhost:8000/ws/chat/?token=${accessToken}&recipient=${selectedUser.id}`);
208388

209389
ws.onopen = () => {
210-
console.log('WebSocket connection opened');
211-
setChatSocket(ws);
390+
setSocket(ws);
212391
};
213392

214393
ws.onmessage = (e) => {
215394
const data = JSON.parse(e.data);
216-
console.log("Messages happened", data);
217-
setMessages((prevMessages) => [...prevMessages, data.message]);
395+
if (data.type === 'websocket_connected') {
396+
setRoomName(data.room);
397+
console.log('WebSocket connected to room:', data.room);
398+
} else {
399+
setMessages((prevMessages) => [...prevMessages, data]);
400+
}
218401
};
219402

220403
ws.onclose = () => {
221-
console.log('Chat socket closed unexpectedly');
404+
console.log('WebSocket connection closed');
222405
};
223406

224407
ws.onerror = (error) => {
225-
console.error('WebSocket error observed:', error);
408+
console.error('WebSocket error:', error);
226409
};
227410

228-
socket.current = ws;
229-
};
230-
231-
initWebSocket();
232-
233-
return () => {
234-
if (socket.current) {
235-
socket.current.close();
236-
}
237-
};
238-
}, [accessToken]);
411+
return () => {
412+
ws.close();
413+
};
414+
}
415+
}, [accessToken, selectedUser]);
239416

240417
const handleUserClick = (user) => {
241418
setSelectedUser(user);
242-
// Fetch message history between selectedUser.id and current user
243419
fetchMessageHistory(user.id);
244420
};
245421

246422
const fetchMessageHistory = async (receiverId) => {
247423
try {
248424
const response = await axios.get(`http://127.0.0.1:8000/api/messages/${receiverId}/`, {
249-
headers: {
250-
Authorization: `Bearer ${accessToken}`,
251-
},
425+
headers: { Authorization: `Bearer ${accessToken}` },
252426
});
253-
console.log("data dfor messages", response.data)
254427
setMessages(response.data);
255428
} catch (error) {
256429
console.error('Error fetching message history:', error);
@@ -259,20 +432,19 @@ function Chat({ roomName }) {
259432

260433
const sendMessage = (e) => {
261434
e.preventDefault();
262-
if (chatSocket && message.trim() !== '') {
263-
chatSocket.send(
264-
JSON.stringify({
265-
message: message,
266-
receiver: selectedUser.id, // Assuming selectedUser has an `id` property
267-
sender: accessToken,
268-
})
269-
);
435+
if (socket && message.trim() !== '' && roomName) {
436+
socket.send(JSON.stringify({
437+
receiver: selectedUser.id,
438+
message: message,
439+
sender: accessToken,
440+
roomname : roomName,
441+
}));
270442
setMessage('');
271443
}
272444
};
273445

274446
return (
275-
<div className="container py-5">
447+
<div className="chat-container">
276448
<div className="row">
277449
{/* Members List */}
278450
<div className="col-md-6 col-lg-5 col-xl-4 mb-4 mb-md-0">
@@ -341,10 +513,12 @@ function Chat({ roomName }) {
341513
>
342514
Send
343515
</button>
516+
344517
</ul>
345518
</div>
346519
</div>
347520
</div>
521+
// </div>
348522
);
349523
}
350524

‎server.zip

49.8 KB
Binary file not shown.

‎server/.DS_Store

0 Bytes
Binary file not shown.

‎server/db.sqlite3

0 Bytes
Binary file not shown.

‎server/server/__pycache__/asgi.cpython-311.pyc

180 Bytes
Binary file not shown.

‎server/server/__pycache__/settings.cpython-311.pyc

0 Bytes
Binary file not shown.

‎server/server/asgi.py

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,16 @@
33
from channels.auth import AuthMiddlewareStack
44
from django.core.asgi import get_asgi_application
55
import userApp.routing
6-
6+
from django.urls import path
7+
from userApp import consumers
78
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'server.settings')
89

910
application = ProtocolTypeRouter({
1011
"http": get_asgi_application(),
1112
"websocket": AuthMiddlewareStack(
12-
URLRouter(
13-
userApp.routing.websocket_urlpatterns
14-
)
13+
URLRouter([
14+
# userApp.routing.websocket_urlpatterns
15+
path('ws/chat/', consumers.ChatConsumer.as_asgi()),
16+
])
1517
),
1618
})

‎server/server/settings.py

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@
6363
"django.contrib.auth.middleware.AuthenticationMiddleware",
6464
"django.contrib.messages.middleware.MessageMiddleware",
6565
"django.middleware.clickjacking.XFrameOptionsMiddleware",
66+
6667
]
6768
REST_FRAMEWORK = {
6869
# 'DEFAULT_PERMISSION_CLASSES': (

0 commit comments

Comments
 (0)