Socket.IO(message submit, nickname)

최재홍·2023년 5월 23일
0
post-custom-banner

메시지 송수신


프론트엔드) 메시지 전송

  1. submit할 때 새로고침 하지 말고
  2. id가 msg인 오브젝트 내의 input태그를 input이라고 부르자
  3. 그 안의 입력값을 value라고 부르자
  4. 이벤트 이름을 "new_message"라고 하고, input태그 입력값이랑 roomName이랑 addMessage함수를 보내자
  5. input입력칸을 비우자

백엔드) 메시지 수신

  1. 보낸 이만 제외하고 나머지 참가자들에게 이벤트명은 "new_message"로 해서 이렇게 전해주자
  2. 뭔지는 모르지만 마지막 인자로 보낸 함수 프론트에서 실행해라

프론트엔드) 메시지 수신

  1. 백엔드에서 전해준 인자로 addMessage함수 실행하자

(이하 생략)
받아온 인자를 내용으로 하여 li태그 추가하자


프론트엔드) 메시지 송신 후

백엔드에서 emit의 마지막 인자로 보낸 콜백함수 프론트에서 실행하래


닉네임 설정

프론트엔드) 닉네임 설정

(이하생략)
이벤트명 "nickname"으로 해서 백엔드에 입력값 보내자


백엔드) 닉네임 설정 수신

연결된 소켓의 "nickname"이라는 key를 만들고 그에 대한 value로 프론트에서 보내온 값을 할당하자

요렇게 활용하자.

post-custom-banner

0개의 댓글