node.js - express.js 에서 express-ws로 웹소켓 구현시 주의할 점

javascript의 생태계가 지속적으로 확장되고 있다.

본진이었던 웹 프론트 엔드 부터, node.js와 express.js를 필두로 해서 백엔드에서 사용이 가능해졌고

일렉트론 을 통해서 PC 응용 프로그램, 코도바, 아이오닉, 리엑트 네이티브 등으로 통해서 모바일 앱에서도 그 영역을 확장하고 있다.

일단 node.js와 express.js는 깃허브에 정리 중이라서 그 후에 여기도 올릴 예정이고..

오늘은 간단하게 웹소켓을 구현할수 있는 express-ws의 에러에 대해서 간단히 기록한다.

express.js는 node.js 런타임에서 웹서버를 쉽게 구축할수 있게 도와주는 웹서버 프레임 워크라고 보면 이해가 빠르다.

웹서버에서 웹소켓을 구현하는 것은 여러가지가 있으나 가장 쉽게 할수 있는 것은 socket.io나  express-ws 를 사용하는 것이다.

다만.. express에서 express-ws를 모듈로 가져와서 실행시킬때 주의해야 할 점이 있다.

node.js에서 웹서버를 생성할때 http.createServer() 를 쓴다.

express.js에서는 var app = express() 로 먼저 할당한 다음에 app.listen() 을 통해서 바로 생성 및 실행을 시킨다.

express에서는 자동으로 폴더 구조를 잡아주고 연결시켜주는 express-generator 라는 것이 존재하는데

이것을 통해 자동 생성을 하게 될경우 http.createServer( app ) 라고 쓰여진다.

물론 https등을 적용할때에는 express를 쓰더라도 http.createServer () 를 하고 옵션을 주는 형식으로 한다고 한다.

하지만 express-ws 모듈은 엄연히 express.js에서 하는 것이니까 웹서버를 생성할때 app.listen()을 사용해야 제대로 작동한다.

만약 http.createServer( app ) 이렇게 쓰고 위의 express-ws를 사용하면 

> WebSocket connection to  failed: Connection closed before receiving a handshake response

이러한 에러메세지가 뜨면서 웹소켓이 제대로 작동하지 않는 것을 볼수 있다.

다른 에러메세지는 없고 그냥 이거 한줄만 뜬다.

크롬개발자 도구에서 에러 코드 라인을 클릭하면 그냥 프론트 단에서 웹 소켓 호출하는 것으로 가지, 웹 서버 내부를 가리킬 수는 없다.

당연히 뭐가 문제인지 알수가 없으니 엄청 삽질을 할수 밖에 없다.

모듈이나 라이브러리를 쓸 때 이러한 점을 항상 조심해야 할 것이다. 제대로 에러 메세지도 안나오면 정말 찾기가 난해하다.

다시 정리하자면 express-ws를 쓰면서 웹서버를 생성할 때에는 node.js에 있는 [ http.createServer( app )  ] 이것을 쓰지 말고 express.js의 [ app.listen() ] 을 쓰자.