socket의 기본 chat원리

먼저 home.pug에 채팅창 비슷하게 form을 만들어준다.

app.js에서 폼에서 전송하면 서버에 메시지를 보내고 입력창을 비워주는 작업을 해주었다.

그리고 서버에서는 받은 메시지를 다시 브라우저에게 보내주었다.

브라우저에서 채팅을 입력하면 콘솔창에 바로 되돌아 온다. Chrome Edge둘다 된다.

여기서 중요한 점이 있다.

Edge와 서버사이에 websocket이 있고,

Chrome과 서버사이에 websocket이 있다.

이 두개는 아직 연결되어있지 않다. 우리가 각 브라우저에서 메시지를 보냈을 때 다른 브라우저로 넘어가는 것이 아니라

메아리 처럼 각 서버와 브라우저 둘이서만 주고 받고있다. 난 다른 사람과 이야기를 하고 싶다!! 그러므로 이 문제를 해결해야 한다. 서버에 fake database를 만들자 누군가 우리 서버에 연결하면 그 connection을 여기에 넣어준다

이 뜻은 Edge가 연결될 때 Edge를 이 array에 넣어준다는 것이다. Chrome의 경우도 마찬가지

이렇게 하면 받은 메시지를 다른 모든 socket에게 전달해 줄 수 있다.

닉네임을 설정하지 않으면 누가 어디서 보낸건지 알기 힘들다. 따라서 우리는 닉네임을 만들 수 있는 form을 생성한다.

하지만 이렇게 보내도 서버는 누가 nick에서보낸 nickname인지 그냥 메시지인지 구별할 수가 없다.

따라서 {type: 'nick', nickname:'hi'} 이런식으로 obj를 만들어 보내주려고 한다. 하지만 socket.send()할때 string만 보내야 한다. 그냥 보내게 되면 서버는 [Object object]와 같이 obj를 그냥 string화해서 보내줄 뿐이다. 

javascript object를 가지고 string으로 만드는 가장 좋은 방법이 뭘까?? 그리고 그 string을 다시 javascript object로 만드는방법이 뭘까?? JSON.stingify로 obj를 스트링화시키고 JSON.parse를통해 string을 obj화 시킨다.

그리고 역시 서버에서 socket.send를 보낼 때에도 위와 같은 방식으로 해야한다. JSON.stingify로 obj를 스트링화시키고 JSON.parse를통해 string을 obj화 시킨다.

javascript obj를 막 보내면 안되는게 javascript서버가 아닐수도 있다 java서버일 수도있고 혹은 Go 이런이유로 꼭 string으로 보내야한다.

 

app.js

먼저 type과 payload를 통해서 이것이 메시지인지 닉네임인지를 type에서 정해주고 그 내용을 paload에 담아주는 객체를 생성해 string화 해준다.

그 다음 닉네임 입력하는 곳과 채팅입력하는 곳에서 input을 적어 넣으면 전에 만든 makeMessage함수를 활용하여 서버로 보낸다.

서버에서 일단 기본적으로 socket이 연결되면 '익명'이라는 기본 닉네임을 주고

message가 들어오면 stirng화 된 json을 parse로 다시 소생시켜준다.

만약 type이 new_message 라면 닉네임과 함께 모든 소켓에 메시지를 전달하고

만약 type이 nickname이라면 소켓에 닉네임 설명만 다시 해준다. 

아직 설명이 안된 부분이 너무 많은데. 일단 기본적인 socket작동 원리를 알아보는 과정이고

이제는 framework를 사용하여 좀더 간단하고 advanced된 과정에대해서 배워보도록하자.