Node.js + Socket.io 사용하기

 

 

본격적으로, Socket.io를 사용해 볼것이다.

 

Socket.io는 기본적으로 JS에 친화적이라,  Node.js와 상성이 잘맞는다.

 

물론, Spring에  Socket.io를 의존성을 부여해 구현할수 있지만 이에 대해선 지금 다룰게 아닌것같다.

 

 

 

시작하기전에 준비

 

Node.js 설치,  Socket.io 설치 , express서버 설치

 

 

https://nodejs.org/en/

Node.js

 

 

노드 JS를 설치하면  npm 키워드를 사용할수 있게된다.

 

 

npm 키워드를통해,  npm install socket.io 코드를 입력하여  소켓.io를 설치하자.

 

 

또한, 우린 서버로 Node.js 에서 지원하는 express서버를 사용할것이니,

 

npm install express 도 까먹지말아주자.

 

 

 

App.js

 

제일 먼저 할일

다운받은 라이브러리들을 적용하자.

express: 서버

socket.io :  실시간채팅 라이브러리

http : http라이브러리

 

그후,  express()로 서버를 생성하자.

 

 

주석을 왕창 달아놨지만.. 추가 설명을 더하자면,

 

app.set()으로  서버가 탐색할 View 경로와, 엔진(html,pug ... )를 설정할수있다.

=> 본인의 취향에따라 설정해주세요

 

app.use()는  Controller부분 경로를 설정한다.

이, use()는  모든 형태의 요청을 받으니  잘 사용해야한다. 

=> Controller경로 역시 본인의 취향에 따라 설정해주세요.

 

app.get() 은  GET 요청만 받을시 발생하는 메소드다.  받으면

View경로의 존재하는 home.html을 부르게된다.

 

그 후, 이전에 만든  express서버를  http에 createServer를 한뒤, 그 서버위에

socket.io() 서버를 설치한다. 

 

=> 꽤 간단하게 서버 설치를 지원한다!

 

 

Home.pug (Home.html도 가능)

 

html로도 작성하셔도 좋고, pug로 작성하셔도 좋다.

 

pug는 뒤에 </html> , </body>, </div> 같은 끝맽음태그를 안써도되니 가독성이 훨씬 좋은것같다.

 

중요한건, 우리가 사용할 socket.io.js 스크립트와,  app.js 스크립트다. 

꼭 참조시키자.

 

 

 

App.js

 

 

App.js에 와서 서버인, socket.io()를 접근할수있게되는 메소드다.

 

원래 webSocket 같은경우 경로를 지정해줘야하지만 .. EX) "http:/ws:localhost:3000"

io()는 참 편하다.

 

 

-------------------------------------------------------------------------------------------------------

 

 

여기까지가 딱 밑준비다. 이제부터 채팅방을 한번 구현해보자.

 

 

구현하기전에,

 

소켓이 어떻게 돌아가는지 원리를 알아볼 필요가있다.

 

 

배우는 총 3명이다.

 

손님 두명과 Socket서버

 

Client측

1.  손님 A 가  서버에게 메시지를 보낸다.

=> A가 서버에게 메시지를 보내는 행위

 

Server측

2. 서버가 손님 A의 메시지를 듣고, 손님 B에게 보낸다.

 

Client측

3. 손님 B가 서버에게 손님 A의 메시지를 받는다.

 

4 (1번과 동일) 다시, 손님 B가 서버에게 메시지를 보낸다.

...  1, 2, 3 반복

 

 

즉, 손님 A,B가 보내고, 듣고   서버도 보내고 듣는 행위

 

총 4개의 메소드(function)를 구현해야한다.

 

 

App.js(클라이언트)

메세지를 보낼때

 

메시지를 받을때

addMessage()

 

이 코드는  클라이언트측이,  메시지를 보내고, 받을때의 Function이다.

 

소켓 서버에게 메시지를 보내는 행위를  socket.emit() 을 사용하여 보낼수있다.

 

socket.emit()은 여러 변수, function()까지도 보낼수있다.

 

 

클라이언트가 메시지를 받는 행위는  socket.on() 으로 받을수있다.

 

socket.on()의 첫번째 파라미터는 받는 Event의 이름을,  두번째 파라미터론 행할 함수를 작성한다.

 

윗 예시를 들자면, "new_message"이벤트를 받으면, addMessage함수를 실행한다 란 뜻이다.

 

 

Sever.js (서버 측)

 

 

클라이언트 측에서 보낸 "new_message"이벤트를 받는 행위다.

 

받는건 역시 socket.on()으로 받는다.

 

받고난 뒤, 행하는 함수로   socket.emit()으로  이벤트와, 메시지를 보낸다.

 

 

브라우저 A

브라우저 B

 

 

잘 나온다~