nodejs express(centos7) 에서 socket.io 모듈 사용하여 다른 클라이언트로 데이터 전달하기

제목 처럼 socket.io 모듈을 사용하여 서버를 통해 다른 클라이언트로 데이터를 전송하는 방법을 알아보겠습니다.

 

socket.io 모듈은 nodejs의 내장 모듈이 아니라 설치를 해주어야 합니다. 

 

본인의 프로젝트 폴더에 들어가서 다음과 같은 명령어를 입력하여 설치를 해줍니다.

npm install --save socket.io

다음은 서버 설정 입니다.

[app.js] 서버쪽

var app = express();
 
var http = require('http');
var socketio = require('socket.io');
var server = http.createServer(app);
var io = socketio.listen(server);
server.listen(8080);

1. http 모듈은 nodejs 내장 모듈이라 따로 설치 ㄴㄴ

2. socket.io 모듈을 처음에 설치해 주었으니 사용한다고 선언해줍니다.

3. 소켓 서버을 설정해줍니다.

****참고로 nodejs 서버의 포트 번호는 3000으로 설정해준 상태입니다.

4. 소켓 서버의 포트 번호는 8080으로 설정해줍니다.

 

[app.js] 서버쪽

// 소켓 구문 시작 =================================================
 
io.sockets.on('connection', function(socket){
 
  // 접속한 클라이언트의 정보가 수신되면
  socket.on('login', function(data) {
    console.log('########클라이언트 로그인########\n USER: ' + data.userid);
 
    // socket에 클라이언트 정보를 저장한다
    var room = 'chatting';
 
    // room에 join한다
    socket.join(room);
    
    // 접속된 모든 클라이언트에게 메시지를 전송한다
    socket.emit('login', '소켓 서버 로그인 성공');
 
    // 클라이언트로 부터 메세지 수신
    socket.on('message', function(message){
      var data = JSON.stringify(message);
      io.to(room).emit('message', data); // room에 join한 유저들에게 데이터 전송
      console.log('Message from Client: ' + data);
    });
  });
 
  // 클라이언트에게 메세지 송신 방법
  // io.emit  == 접속된 모든 클라이언트에게 메세지 전송
  // socket.emit    == 메세지를 전송한 클라이언트에게만 전송
  // io.to(id).emit == 특정 클라이언트에게만 메세지 전송
  // socket.emit('message', '서버 데이터 받음');
});
// 소켓 구문 종료 =================================================

다음은 클라이언트 코드를 보도록 하겠습니다.

[index.html] 클라이언트쪽

<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js.map"></script>

html 또는 ejs 파일에 위와 같은 cdn을 추가해 줍니다.

그리고 클라이언트 자바스크립트에는

[index.js] 클라이언트쪽

// socket.io 서버에 접속한다
    var socket = io('http://192.168.XXX.XXX:8080');
    socket.emit('login',{
        userid: $('#userID').val() // 접속한 회원 정보
    });
 
    // 서버로부터의 메시지가 수신되면
    // socket.on("login", function(data) {
    //     alert(data);    
    // });
 
    //서버로부터의 메시지가 수신되면
    socket.on("message", function(data) {
        alert(data);  
    });
 
    //테스트
    $('#form_btn').on('click',function(){
        socket.emit('message', {
            message: $('#test_form').serialize()
        });
    });

위에서 가장 중요한건

var socket = io('http://192.168.XXX.XXX:8080');

이다.

 

이것을 잘못 입력하면(예를 들어 'localhost:808'로 전송시) 아래와 같은 에러가 뜬다.

 

정확하게 'localhost:8080'으로 입력해야 에러가 발생하지 않는다.)

에러 이유는 클라이언트 코드와 

var socket = io('http://192.168.XXX.XXX:8080');

서버쪽 코드가

var app = express();
 
var http = require('http');
var socketio = require('socket.io');
var server = http.createServer(app);
var io = socketio.listen(server);
server.listen(8080);

맞지 않는다면 에러가 발생하는 것이다.

 

정리하자면

nodejs express는 기본적으로 3000번 포트를 사용하며 app 변수는 3000번 포트가 기본적으로 설정되어있다.

var server = http.createServer(app);

var io = socketio.listen(server);

위의 2줄 구문 처럼 app의 3000번 포트 안에 소켓 서버를 설정하고

server.listen(8080); 소켓 서버는 8080포트로 받는것이다.

 

클라이언트가 웹(3000번)으로 접속하고 소켓서버(8080)으로 데이터를 전송하는 순서이다.