socket.io 간단한 채팅 테스트

앞선 포스팅에 이어 socket.io를 이용해 콘솔창에 메세지를 주고받는 것을 해보자.

역시 중요한 것은 socket과  on(), emit(), broadcast.emit()의 역할만 잘 이해하고 있으면 된다.

 

우선  클라이언트 측에서 메세지를 보내는 함수를 하나 작성한다.

sendMsg 라는 함수에 msg라는 파라미터를 받게 되면 socket.emit을 통해 Msg라는 이벤트를 발생시키고

msg파라미터를 받아 전송한다. 그리고 메세지를 전송한 클라이언트의 콘솔창에 메세지를 띄워준다.

 

마찬가지로 받는 클라이언트 측의 메세지를 출력하는 함수를 작성하고 받아보자

이 함수도 클라이언트측에서 작성된다. callback함수인 handleMsgNoti에 data를 받는데 이는 위에 작성한 msg가 된다.

그리고 받은 클라이언트 측의 콘솔창에 msg를 띄워준다.

callback함수를 만들었으니 socket.on()을 이용해 이벤트를 받아주자. 이벤트명은 msgNoti이다.

자 왜 위와 다른가? 싶지만 이는 간단하다. 클라이언트에서 발생시킨 emit은  io서버에서 받아줘야 다시 다른 클라이언트로

보낼 수 있다. 그리고서 거기서 broadcast.emit을 이용해야 현재 메세지를 보낸 클라이언트가 아닌 나머지 접속중인

클라이언트에 메세지를 보낼 수 있는 것이다. 

그냥 코드를 보자.

서버측의 코드이다. 별다른게 없다.

한번에 하나의 socket! socket에서  보낸 "Msg"라는 이벤트를 연결하여 {msg}를 받았다.

그럼 이 msg를 다시 다른 클라이언트로 보내줘야한다.

어떤 걸로?  broadcast.emit으로.. 이때 "msgNoti"라는 이벤트로 msg를 전송해준다.

 

이제 위 클라이언트에서 메세지를 받는 클라이언트의 이벤트명이 왜 다른지 설명이 된다. 서버에서 다시 뿌려준 데이터를

msgNoti라는 이벤트명으로 보낸 것이다 그것을 다른 클라가 받아서 보여준다.

 

자 두개의 창읠 켜놓고 테스트해보자

이렇게 잘 전송이 된다.

 

순서는 이렇다

1. sendMsg() 에서 메세지를 emit을 통해  "Msg"라는 이벤트명으로 보낸다.

2. 서버측에서 이 "Msg"라는 이벤트를 on()을 통해 받고 다시 broadcast.emit()에 "msgNoti"라는 이벤트를 발생시켜

메세지를 다른 접속중인 클라이언트에 보낸다.

3. 다시 클라이언트 측에서는 socket.on()메서드로  "msgNoti"이벤트를 받고 callback 함수에서

받은 파라미터에 메세지를 출력해준다.

 

정리를 대단히 못했지만 이해하면 땡이다.

 

한가지더 지금은 보내는이와 받는 이의 이름이 없다. 한번 만들어보자

클라이언트 측에서 nickname을 만들어서 역시 서버로 전송해준다. 이때 이벤트명은  setNickname

 

 

그리고 서버는 setNickname의 이벤트를 받아  socket에 nickname을 넣어준다.

다시 broadcast.emit을 할때 msg와 nickname을 데이터로 넣어주는데 이때 nickname에 socket.nickname을 넣어주면

전송이된다.

그럼 수정할 마지막은? 

그렇다 이 닉네임을 받아주면 된다.

msg와 nickname을 함께 받아 출력해주면 끝난다.

 

브라우저에서 테스트 해보자.

두개의 클라이언트에서 각각 setNickname함수를 이용해 각자의 nickname을 만들어주고

메세지를 보내면~ 위처럼 받는이에게 보낸이의 nickname과 msg가 함께 뜬다.

와우 채팅의 기본 형태가 이렇게 이루어지는구나.. 이해는 쉽다.

 

 

연결되어있는 동안에는 socket은 nickname을 기억하고 있다. 아니 유저를 기억하고 있다고 생각하면 더 편하겠다.

http와는 다르게 쿠키와 세션을 이용하지 않아도 socket 메모리상에 지속적으로 기억을 하고 있다.

한가지 문제는 여기서 서버가 refresh되면 nickname이 초기화 된다. ㅎㅎㅎ

 

해결법은 데이터베이스를 이용하는 것이라고 하는데 생각하고 검색해봐야겠다.