[chat] 입력중입니다...

miin·2022년 6월 2일
0

Skill Collection [Function]

목록 보기
31/44

결과

full code

https://github.com/suminllll/chatting-sample

내용

  • 상대방이 입력할때 ㅇㅇ님이 입력중입니다 표시
  • 입력하다 지웠을때, 입력 후 엔터 쳤을때 문구 미표시
  • 입력하고 있는 유저 외에 채팅방에 있는 모든사람에게 표시

코드

client[next.js]

  const [message, setMessage] = useState(""); //현재 메세지를 담을 state
  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]);
      });
    },[]);

  //채팅 입력하면 message state에 저장
  const handleMessage = (e) => {
    e.preventDefault();
    setIsTyping(true);
    setMessage(e.target.value);
    
    //타이핑 치는 유저의 정보를 서버로 보내줌
    socket.emit("/rooms/typing", {
      roomNo: props.roomNo,
      ...user,
      isTyping,
      type: "SYSTEM_USER_TYPING",
    });
  };

 //message가 없으면 서버로 isTyping false를 보내줘서 입력중 문구가 사라짐
  useEffect(() => {
    if (message.length === 0) {
      socket.emit("/rooms/typing", {
        roomNo: props.roomNo,
        ...user,
        isTyping: false,
      });
    }
  }, [message]);

  //엔터를 누르면 send 함수를 호출
  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);
   
 	//broadcast: 나를 제외한 모든 사람에게 보여줌
    socket.broadcast.in(data.roomNo).emit("/rooms/typing", data);
  });
  
});

0개의 댓글