결과
full code
https://github.com/suminllll/chatting-sample
내용
- 상대방이 입력할때 ㅇㅇ님이 입력중입니다 표시
- 입력하다 지웠을때, 입력 후 엔터 쳤을때 문구 미표시
- 입력하고 있는 유저 외에 채팅방에 있는 모든사람에게 표시
코드
client[next.js]
const [message, setMessage] = useState("");
const [isTyping, setIsTyping] = useState(false);
const [typingUserList, setTypingUserList] = useState([]);
useEffect(() => {
socket = io("http://localhost:8000", {
transports: ["websocket"],
});
socket.on("/rooms/typing", (data) => {
console.log("on typing", data);
const notice = {
type: "SYSTEM_USER_TYPING",
content: data.nick,
isTyping: data.isTyping,
};
setTypingUserList([notice]);
});
},[]);
const handleMessage = (e) => {
e.preventDefault();
setIsTyping(true);
setMessage(e.target.value);
socket.emit("/rooms/typing", {
roomNo: props.roomNo,
...user,
isTyping,
type: "SYSTEM_USER_TYPING",
});
};
useEffect(() => {
if (message.length === 0) {
socket.emit("/rooms/typing", {
roomNo: props.roomNo,
...user,
isTyping: false,
});
}
}, [message]);
const handleEnterOnMessage = (e) => {
if (e.key === "Enter") {
handleSend();
}
};
return(
{typingUserList.map((user, i) =>
user.isTyping && user.type === "SYSTEM_USER_TYPING" ? (
<div className="typingUsers" key={i}>
{user.content}님이 입력중입니다.
</div>
) : null
)}
<div className="chatInputWrap">
<input
className="chatInput"
placeholder="Write a message.."
onChange={handleMessage}
onKeyUp={handleEnterOnMessage}
value={message}
/>
<button className="sendButton" onClick={handleSend}>
Send
</button>
</div>
)
server[express]
io.on("connection", (socket) => {
socket.on("/rooms/typing", (data) => {
console.log("타이핑", data);
socket.broadcast.in(data.roomNo).emit("/rooms/typing", data);
});
});