메시지 송수신
프론트엔드) 메시지 전송
![](https://velog.velcdn.com/images/along/post/f4978e09-ad94-4d4d-bc9f-39cbbc62d05b/image.png)
- submit할 때 새로고침 하지 말고
- id가 msg인 오브젝트 내의 input태그를 input이라고 부르자
- 그 안의 입력값을 value라고 부르자
- 이벤트 이름을 "new_message"라고 하고, input태그 입력값이랑 roomName이랑 addMessage함수를 보내자
- input입력칸을 비우자
백엔드) 메시지 수신
![](https://velog.velcdn.com/images/along/post/12928d67-bc56-4c08-954b-14bb28024fb4/image.png)
- 보낸 이만 제외하고 나머지 참가자들에게 이벤트명은 "new_message"로 해서 이렇게 전해주자
- 뭔지는 모르지만 마지막 인자로 보낸 함수 프론트에서 실행해라
프론트엔드) 메시지 수신
![](https://velog.velcdn.com/images/along/post/06c724c7-5e21-4bb6-82b0-d4a7be74dd45/image.png)
- 백엔드에서 전해준 인자로 addMessage함수 실행하자
![](https://velog.velcdn.com/images/along/post/f69f3707-7089-4e83-88ef-308235bfd171/image.png)
(이하 생략)
받아온 인자를 내용으로 하여 li태그 추가하자
프론트엔드) 메시지 송신 후
백엔드에서 emit의 마지막 인자로 보낸 콜백함수 프론트에서 실행하래
![](https://velog.velcdn.com/images/along/post/70eef977-ee68-4ebe-996b-fdbe2853f143/image.png)
닉네임 설정
프론트엔드) 닉네임 설정
![](https://velog.velcdn.com/images/along/post/d6de6717-1cdf-4a33-aa2d-be8194eca12d/image.png)
(이하생략)
이벤트명 "nickname"으로 해서 백엔드에 입력값 보내자
백엔드) 닉네임 설정 수신
![](https://velog.velcdn.com/images/along/post/a738d9d4-e2f4-4956-8161-0b7310b3babc/image.png)
연결된 소켓의 "nickname"이라는 key를 만들고 그에 대한 value로 프론트에서 보내온 값을 할당하자
![](https://velog.velcdn.com/images/along/post/00aeb271-2f4a-404b-be03-25acb351b9a6/image.png)
요렇게 활용하자.