채팅 기능 구현
우리 서비스에는 채팅 기능이 필요했다.
사용자들이 음성채팅도 가능하지만 텍스트를 주고받을수있도록 하는것이다.
채팅 기능을 구현하기 위해 일단 서버를 간단히 만들었다.
const app = require("express")();
const server = require("http").createServer(app);
const cors = require("cors");
const io = require("socket.io")(server, {
cors: {
origin: "*",
credentials: true,
},
});
io.on("connection", (socket) => {
socket.on("message", ({ name, message }) => {
io.emit("message", { name, message });
});
});
server.listen(5000, function () {
console.log("listening on port 5000");
});
트러블 슈팅
그리고 프론트 코드를 작성하는데 좀 에러들이 발생했다.
먼저 채팅이 보내지는것같은데 안 받아지는 건지 채팅이 보이지 않았다.
그 이유는 타입 지정을 잘 못해서였다.
리액트의 useState를 쓸때 각각의 상태를 지정해주어야한다.
interface Chat {
name: string;
message: string;
}상태를 지정하기 위해 chat이라는 interface를 만들었다.
const [state, setState] = useState<Chat>({ message: "", name: "" });
const [chat, setChat] = useState<Chat[]>([]);
console.log(state);그리고 상태를 지정해주었다.
이렇게 고치니 이제는 또 input태그에 텍스트가 입력이 되지 않더라...
<input
className="w-full h-full p-2"
type="text"
name="message"
onChange={(e) => onTextChange(e)}
value={state.message}
></input>이유는 name 어트리뷰트를 안적어주어서였다.
해치웠나?
했지만 어림도 없지
채팅을 보낸 후에 지워져야하는데 지워지지 않는 이슈가 있었다.
const onMessageSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
const { name, message } = state;
socket.emit("message", { name, message });
setState({ message: "", name });
};이는 채팅을 보낸 후에 상태를 "" 빈 값으로 바꾸어줘야하는 점을 몰라서 생긴 문제였다.
결국 다 해결하고 잘 되었다.
이제 좀 더 욕심이 생겨서 채팅을 정말 채팅처럼 보이게 만들었다.
후...
서버와 연동을 테스트하기위해 백엔드 코드를 작성하며 수정하다가 에러가 발생했다.
아직 다 고치지 못해 상대방과 서로 통신하는 것을 테스트하지 못했다.
내일 와서 하자
오늘의 하루는 어땠나
오늘은 멘토링이 있던 날이었다.
멘토님이 우리의 프로덕트를 보시고 이전의 프로덕트보다 훨씬 나아졌다고 해주셨고, 제안해주신 아이디어들도 다 구현했거나 준비중인 것들이어서 좀 뿌듯했다.
멘토님이 정말 우리를 도와주기 위해서 여러 방면에서 도와주시는것같아 너무 감사하다.
정말 멘토님에게 도움받을것 정말 다 받고 쪽쪽 빨아먹고 좋은 결과로 보답해야겠다.
