[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'); 과 같이 수정했더니 정상적으로 동작한다.