WebSocket 사용법(3)(feat. 채팅기능앱 만들기)

이제 채팅을 해보자

 

어떻게 실시간으로 통신 주고받고 DB에 저장도 하고 그럴가?

 

메시지를 저장할 state가 필요할거 같고

해당 메시지를 보내는데 쓸 함수도 필요할거 같음

	간단하게 생긴 InputField가 있음
	<App/>에 불러다 연결 해줄건데
	문자 담을 스테이트와
	보내는 액션을 취할 함수를 만들어주고
	이 sendMessage는 <InputField /> 컴포넌트 안에 보면 form 태그 있는데 거기에 onSubmit={ sendMessage } 여기 있음 저거 e.preventDefault()은 이제 onSubmit이 자꾸 리프래쉬 하려 하는걸 막을때 쓴다. 그리고 이렇게 emit 말하는 코드를 썻으니 이제 서버로 가서 듣거on을 만들어 주자

---

클라이언트에서 메시지를 저장 했고 

.emit() 을 사용해 서버로 보냈음.. 그럼 이걸 저장 해야겠지

어디에? 모델에!

	아까 로그인 했을때와 비슷한 페턴의 연속이다 듣는거는 .on() 그리고 대화명뭐였지? 그 다음 보내는 정보가? message와 콜백 함수지 여긴 통신만 하는 곳이니깐
	저장 함수는 따로 컨트롤러가서 만들어야지 여기다 이제 저장하는 함수를 만들건데... 보자
	오 넘겨받은 message는 저기 chat에 넣음 되고 user 정보는.. 안받았는데???
	고유 토큰 쓰면 되지~ 로그인하면 socket id를 주잖음? 그리고 그거 User모델에 저장 했고
	유저 컨트롤러가서 유저체크 만들어주자
	그럼 이렇게 유저 정보 갖고올수 있어졌다
	그 다음 이제 유저 정보 뽑아 왔으니깐 다시 caht컨트롤러에 보내줄수 있어졌잖음 넣어
	chat 저장 컨트롤러를 만들어주자 아까 넣어줬던 message와 user 정보를 각각  넣어준다음 그걸 .save()해서 저장 그 다음 방금 저장된 메시지 리턴해주고
	다시 io로 넘어와서 이제 저장된되고 리턴해줘서 담긴 newMessage를 login 하듯이 콜백으로 마무리 지으면 메시지온거 아무도 모른다 때문에 서버에 말해야 한다 io.emit("message", newMessage); 자 이렇게 서버에서 저장된걸 반대로 클라이언트에게 말 했음으로 이제 저 메시지가 클라이언트로 갈것이다
	클라이언트에서 들어야 하니까? .on() 해야지~ 이러면 변화 있을때 한번 보여줌
둘이 대화를 하려 창의 두개 띄웠고 메시지를 입력하니 양쪽 모두에게 입력값이 들어갔다 이제 이걸 방을 만들고 해당 방 안에서만 동작하게? 해주면 되겠네
	클라이언트로 와서 여기 메시지 담을 List를 만들고
	아까 말하는거에 콘솔로그 찍었던곳 다시지우고 배열로 집어 넣어
	그럼 이렇게 서로 메시지 주고 받는거 찍혀 나옴

---

시스템 메시지도 작성 해보자

로그인하면 바로 채팅방에 입장하게 되있잖음?

그러니까 login에다 추가해주면 됨

	io파일에서 여기 로그인 말하는곳이 있음
	welcomeMessage를 만드는데 chat이랑 user를 이렇게 지정해주고 모두에게 알려주면

---

socket.io 사용법 정리

1. server측에 npm i socket.io 설치 하고 파일을 만들던 폴더를 만들던 해서 소켓통신할수있는 기본 셋팅은 해놓기

2. client측에 npm i socket.io-client 설치 하고 파일을 하나 생성해서 서버와 소켓통신할수있는 기본 셋팅 해놓기

3. 크게 두가지다 말하는것과 듣는것.

- .emit("대화 제목", 보낼내용, (콜백함수)=>{})

- .on("대화 제목", (콜백함수)=>{ 받아서 뭐할건데 })

 

이게 전부임

 

- 익숙하지 않아서 만들어진거 보고 좀 따라할 필요가 있음

- 컨트롤러 만들어놓은거랑 불러다 할게 좀 있고 그런듯

- 라우트 통한 소통은 일단 실시간 채팅에는 사용되지 않은것 같음

- 결국 저기 대화제목 가지고 말하고 듣고 되는것 같음

크게 어렵진 않은데 처음 접하는거라 그림이 안그려진다 정도..?