Express - socket.io 적용

썡 node를 알려주는 강의는 많았지만 Express 적용 socket.io 코드는 정말 자료 찾기가 힘들었다

다른 사람을 위해 글을 남겨본다

 

 

코드 삽입 위치

1. bin/www

2. app.js

3. client.ejs

 

 

 

bin/www

~
/**
 * Create HTTP server.
 */

var server = http.createServer(app);

// socket 연결 (서버와 동일 포트로 사용 가능)
app.io.attach(server);
~

 

기능

- 서버와 동일한 포트로 소켓 통신을 할 수 있게 설정해준다

 

 

 

이건 아무리 구글링을 해도 나오지 않다가 우연히 발견하여 알게된 방법이다

정확히 나온건 아니고 app.options.attach를 사용하였다

하지만 서버를 재부팅 시키니 에러가 발생하여 다른 글을 찾아 적용한 방법이다

 

 

 

app.js

~
// socket.io
// io = require('socket.io')();를 하면 bin/www에서 서버와 연결하기 어렵다
// bin/www와 socket 연결은 www 에서 적용한다
app.io = require('socket.io')();
~
// socekt.io 로직은 module.exports = app; 바로 직전에 입력
app.io.on('connection', function(socket){
  console.log('socket is communicating');
});

module.exports = app;

 

기능

- socket.io를 로드하고 on을 사용하여 client에서 오는 이벤트를 처리하기 위해 listening 상태로 두는 것이다

 

 

var 변수 = require 을 하지말고 이미 있는 app 변수를 사용하여 재활용 해준다

on은 export 바로 위에 적어준다

정확한 이유는 모르겠으나 서버의 부하를 줄이기 위함인 듯 하다

 

 

client.ejs

~
<!-- socket.io는 서버에서 알아서 찾기 때문에 resource등과 같은 폴더로 옮길 필요가 없다 -->
<script src="/socket.io/socket.io.js"></script>
    <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>

    <script>
      var socket = io.connect('http://localhost:3000');
      socket.on('news', function(data){
        console.log(data);
        socket.emit('my other event', {my: 'data'});
      })
    </script>
~

 

기능

- 페이지에서 서버로 통신을 한다

 

 

<script src="socket~"> 이 부분이 에러가 나길래 type="text/javascript"도 추가해보고 public-javascripts에 넣어보기도 하고 module을 찾아 직접 routes에 옮겼지만, 외국 사이트를 통해 서버가 알아서 찾아준다는 것을 알고 다시 원상태로 돌려두었다

 

 

결과

 

client.ejs의 io.connect('~')을 통해 서버와 통신을 하였음을 알 수 있다

 

 

참고로 socket.io에는 server와 client 모듈이 따로 있다