[ERROR]GET http://localhost/socket.io/?EIO=3&transport=polling&t=MIEj9iB 0 ()

문제)

- Express.js와 Socket.IO의 기본적인 동작 테스트를 하던 중, 크롬 개발자도구 창에서 다음과 같은 에러가 확인되었다.

GET http://localhost/socket.io/?EIO=3&transport=polling&t=MIEj9iB 0 ()

( 서버 에러는 안나지만, socket.IOconnect 이벤트에 대한 반응이 없었다. )

 /views/index.pug

extends layout

block content

  h1= title

  p Welcome to 

    span.received-message #{title}

  input(type='text', class='message', placeholder='what is on your mind?', onkeyup='javascript:send(this);')

  script(src='/socket.io/socket.io.js')

  script.

    var socket = io.connect('http://localhost');

    socket.on('receive', function(message) {

      console.log('received %s', message);

        document

          .querySelector('.received-message')

          .innerText = message;

    });

    var send = function(input) {

      console.log(input.value);

      var value = input.value;

      console.log('sending..%s to server',value);

      socket.emit('messageChange',{message:value});

    }

Express.js 생성기로 만든 애플리케이션의 bin/www의 위치에 다음과 같은 코드만 추가했다.

var io = require('socket.io')(server);

io.on('connection', function(client){

  console.log('socket connected!')

  client.on('messageChange', function(data){

    console.log(data);

    client.emit('receive', data.message.split('').reverse().join(''))

  });

  client.on('disconnect', function(){});

});

문제의 원인을 찾기 위해 구글링을 하던 중, 도움이 된 글을 발견했다.

스택오버플로우 답변 중 하나

Node and socket can run on the same port, Only we have to do is listen on port at same time. // 

Create http server required by socket var server = require('http').Server(app); // 

Assign server to socket var io = require('socket.io')(server); server.listen(4000) 

node와 소켓이 같은 포트에서 동작해야한다..! 

다시 앞으로 돌아가서 생각해봤을 때,

노드는 3000포트에서 동작했는데, 소켓은 어디서 동작하는 걸까? 일단, var io = require('socket.io')(server); 이렇게는 했으니 같은 포트 쓰고 있는 거 아닌가?

하지만, 에러로그를 다시 확인해보니.. GET http://localhost/socket.io/?EIO=3&transport=polling&t=MIEj9iB 0 () 

3000어디갔지????...localhost:3000/ 이 되야될것같다는 생각이 들었다.

서버쪽은 npm socket.IO 의 How to use를 그대로 활용했으니, 클라이언트 쪽이 문제일 것이다.

views/index.pug

var socket = io.connect('http://localhost');

/*

 socket.IO서버로 연결

*/

위 처럼 되어있는 기존 코드를 var socket = io.connect('http://localhost:3000'); 과 같이 수정했더니 정상적으로 동작한다.