노마드코더 줌 클론코딩 - #1.8 Nicknames part Two

#1.8 Nicknames part Two

왜 Object 형식을 String 으로 바꿔서 전송해야할까?

바로 websocket이 브라우저에 있는 API 이기 때문이다. backend 에서는 다양한 프로그래밍 언어를 사용할 수 있기 때문에 API가 어떤 결정을 할 수는 없는 것이다. 

예로 우리는 javascript 로 서버를 작성했지만, javascript가 아닌 GO를 이용해 서버에 접속한다면 문제가 되기 때문이다. 

front에서 javascript Object를 GO server 로 보내면 안된다. 그래서 string 으로 바꿔서 서버로 전송하는 것이다. 

string 을 받은 서버는 각자 환경에 맞게 string 을 다른 type 으로 변경하면 되는 것이다. 

 

 

이제 back -> front  을 볼 차례이다.

backend 가 받은 string 은 아래와 같고, 이제 이 string 을 Object 형식으로 바꿔서 front 로 보내보자. 

 

server

 

backend 쪽에서 line 36~39 와 같이 수정해준다.

그럼 메세지를 입력했을 때, 입력한 메새지만 나오게 된다. 닉네임에 입력해도 아무것도 스크린에 뜨지 않는 걸로 보아 message type 이 구분되는 것임을 알 수 있다. 

message type 이 nickname 인 경우도 추가해주고, switch 구문으로 변경해서 가독성을 높였다.

(parsed -> message 로 변수명 변경)

이제 누가 메세지를 보낸건지 식별하기 위해 type이 nickname 인 메세지의 payload 를 socket 에 넣어보자. 

line 45와 같이 socket 에 새로운 아이템을 추가하자. socket 은 기본적으로 Object 이기 때문에 원하는 어떤 타입이든 넣을 수 있다.

그 후 line 31 과 같이 처음 접속한 사람을 위해 익명을 뜻하는 "Anon" 으로 nickname 을 설정해주고

line 42와 같이 채팅 메세지를 누가 보냈는지, 뭘 보냈는지에 대한 아이템을 객체 형태로 담아 front 로 전송한다. 

 

이제 서버를 재시작해보자. 

잘 나온다. 여기서 주목할 점은 socket 이 데이터를 저장할 수 있다는 것이다. (socket["nickname"] = ....)