채팅창 구현

앞으로의 과제

emit을 개인으로 변경 후
emit으로 전체 채팅 구현

// main/background.ts

io.on("connection", function (socket) {
  // 접속한 클라이언트의 정보가 수신되면
  socket.on("forAll", function (data) {
    socket.emit("forAll", data);
  });
});

// renderer/client.tsx

const [inputText, setInputText] = useState("");
const [chatTexts, setChatTexts] = useState([]);

useEffect(() => {
    socket.on("forAll", function (data) {
      console.log("Message from Server: " + data);
    });
  }, []);

const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    socket.emit("forAll", inputText);
    setChatTexts([...chatTexts, inputText]);
    setInputText("");
  };
  
  const onChange = (
    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
  ) => {
    setInputText(event.currentTarget.value);
  };

스크롤 맨 아래로

const scrollRef: LegacyRef<HTMLDivElement> = useRef();

useLayoutEffect(() => {
  if (scrollRef) {
    scrollRef.current.scrollIntoView({
      behavior: "smooth",
      block: "end",
      inline: "nearest",
    });
  }
}, [chatTexts]);
// chatTests가 채팅 리스트

<Box sx={{ height: "80%", overflow: "scroll" }}>
  {chatTexts.map((item, index) => {
    return (
      <Box key={item + index}>
      	<Typography>{item}</Typography>
      </Box>
    );
	})}
	<div ref={scrollRef}></div>
</Box>