47 lines
1.2 KiB
JavaScript
47 lines
1.2 KiB
JavaScript
import React, { useEffect, useState } from "react";
|
|
|
|
const Chat = () => {
|
|
const [socket, setSocket] = useState(null);
|
|
const [messages, setMessages] = useState([]);
|
|
|
|
useEffect(() => {
|
|
const ws = new WebSocket("ws://127.0.0.1:8000/ws/chat/");
|
|
setSocket(ws);
|
|
|
|
ws.onmessage = (event) => {
|
|
const data = JSON.parse(event.data);
|
|
setMessages((prevMessages) => [...prevMessages, data.message]);
|
|
};
|
|
|
|
return () => ws.close();
|
|
}, []);
|
|
|
|
const sendMessage = (message) => {
|
|
if (socket) {
|
|
socket.send(JSON.stringify({ message }));
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<div className="messages">
|
|
{messages.map((msg, index) => (
|
|
<p key={index}>{msg}</p>
|
|
))}
|
|
</div>
|
|
<input
|
|
type="text"
|
|
placeholder="Type a message..."
|
|
onKeyDown={(e) => {
|
|
if (e.key === "Enter") {
|
|
sendMessage(e.target.value);
|
|
e.target.value = "";
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Chat;
|