[Node.js] 소켓으로 통신하기 1편

안녕하세요 크로네입니다.

 

오늘은 소켓으로 통신을 해보는 코드를 만들어 보겠습니다.

 

1. socket.io 모듈

socket.io 는 소켓을 이용해 통신할 때 사용하는 모듈입니다.

이 모듈은 기본적으로 설치가 되지 않아서

직접 설치해야 합니다.

 

먼저 윈도우 + R(맥은 Command + R) 키를 누르고

실행을 열어줍니다.

그리고 여기에 cmd 라고 입력합니다.

그 다음 확인 버튼(또는 Enter키)를 누릅니다.

그럼 명령 프롬프트 라는 창이 나옵니다.

여기에 npm install socket.io 라고 입력합니다.

그 다음 Enter 키를 누르면 socket.io 모듈을 설치합니다.

완료되면 이런식으로 나올겁니다.

이렇게 socket.io 모듈을 설치했습니다.

이제 본격적으로 코딩을 시작해 볼까요?

2. 실습 - 1.1

먼저 socketServer.js 과 socketClient 라는 이름의 파일을 만듭니다. (이름은 바꿔도 됩니다)

"어? 왜 파일을 두개나 만드나요?"

왜냐하면 통신을 해야 되기 때문입니다.

그러니까 서버 파일과 서버에 연결하는 클라이언트 파일이 필요한 겁니다.

 

그럼 서버 파일부터 코딩해 보겠습니다. (socketServer.js)

먼저 모듈을 require 하겠습니다.

const http = require("http");
const socketIo = require("socket.io");

"어? socket.io 는 아는데 http 라는건 대체 뭐에요?"

이것도 모듈중 하나인데요, 웹서버 만들기를 보고 오셨다면 아시겠지만

http 모듈은 서버를 만들 때 사용하는 모듈입니다.

여기에서는 깊게 이해할 필요 까진 없으니 그냥 넘어가면 됩니다.

 

이제 소켓 서버를 열어봅시다.

const app = http.createServer();
const io = socketIo(app, {"cors": { "origin": "*" }});

app.listen(4000, function() { // 4000 은 포트입니다.
    console.log("Started the server.");
});

app 은 http 모듈을 이용해 만들어진 서버이고,

io 는 app 을 이용해 만들어진 소켓입니다.

 

"음... 저기에 있는 cors 랑 origin 은 뭐에요?"

저기에 있는 cors 와 origin은 크로스 오리진이라고 하는건데요,

정확히는 교차 출처 리소스 공유(Cross-Origin Resource Sharing) 인데

쉽게 말하자면 접근할 수 있는 클라이언트 목록같은겁니다.

 

그럼! 이제 파일을 실행해 봅시다.

서버가 열렸다는 메시지가 왔습니다.

 

자 그럼 이제 클라이언트를 코딩해 볼까요?

3. 실습 - 1.2

클라이언트는 또 다른 모듈이 필요합니다.

위에 나온 방법으로 cmd를 켜고,

npm install socket.io-client 를 입력합니다.

설치 했다면 이제 한번 코딩을 시작해 보겠습니다. (socketClient.js)

 

먼저 설치한 socket.io-client 모듈을 require 합니다.

const socketIo = require("socket.io-client");

그리고 socket에 연결합니다.

var socket = new socketIo("http://localhost:4000", {});

그럼 이제 서버 파일을 실행한 다음, 클라이언트 파일을 실행해 보겠습니다.

왼쪽이 서버, 오른쪽이 클라이언트입니다.

"음... 통신이 안되는데요..."

그 이유는 데이터를 안보냈기 때문입니다.

io.on("connection", function(socket) {
    console.log("소켓 연결됨:", socket.id);
    socket.emit("msg", "Connected!"); // msg 라는 이벤트에서 "Connected!" 라는 데이터를 보내는 코드
});

서버에 이런 코드를 추가하고 다시 실행해 봅시다.

서버에서는 로그가 되었지만, 클라이언트에서는 보낸 데이터인 Connected! 가 나오지 않았습니다.

왜냐하면 클라이언트에서 데이터를 받지 않았기 때문입니다.

 

이번에는 클라이언트에 이런 코드를 추가해 봅시다.

socket.on("msg", function(data) {
    console.log("MSG:", data)
})

이렇게 하면 msg 이벤트에서 데이터를 받았을 때 콘솔에

그 데이터를 출력합니다.

 

이제 완벽한 것 같으니 실행해 봅시다.

네! 이제 제대로된 소켓 통신을 성공했습니다!

하지만 아직 부족한 게 남아있습니다.

 

2편: https://kronae.com/entry/Nodejs-소켓으로-통신하기-2편