[Node.js] 특정 홈페이지에서 크롬 개발자 도구의 Network 탭에 나오는 websocket의 데이터를 받는 프로그램 작성
조회수 2318회
안녕하세요.
현재 프로그램을 작성하다가 궁금증이 생겨서 이렇게 질문을 올립니다.
특정 홈페이지에서 크롬 개발자 도구 -> Network 탭에 가면 웹소켓에 관련된 내용이 나와서 이걸 Node.js로 받는 프로그램을 작성해보고 있습니다.
Header의 General 탭에
Request URL: wss://(url):(port)/socket.io/?streams=(streams)&EIO=(EIO)&transport=websocket&sid=(sid)
이렇게 나와있어 wss://(url):(port)/를 url 기준으로 삼고 프로그램을 작성하고 있습니다. 또한 Query String Parameters 탭에는 위에 괄호로 표현한
streams: (streams)
EIO: (EIO)
transport: websocket
sid: (sid)
값이 들어 있습니다.
아래는 제가 작성한 프로그램입니다.
const socket = require('socket.io-client');
let url = 'wss://(url):(port)';
let io = socket.connect(url);
io.on('connect',(err)=>{
console.log('Connect!');
io.send({
query:{
'path': '/socket.io',
'streams': (streams),
'EIO': (EIO),
'transport': 'websocket',
'sid': (sid)
}
});
});
io.on('error',(error)=>{
console.log('err: ',error);
});
io.on('message',(data)=>{
console.log(data);
});
웹소켓에서 message라는 내용이 Frames 탭에 쌓이는 것으로 보아 io.on('message')에 내용이 나올 것이라고 생각했는데 내용이 나오지 않고 계속 에러만 나옵니다.
아래는 에러 내용입니다.
err: { Error: xhr post error
at XHR.Transport.onError (G:\dev\js\bsx\node_modules\engine.io-client\lib\transport.js:64:13)
at Request.<anonymous> (G:\dev\js\bsx\node_modules\engine.io-client\lib\transports\polling-xhr.js:109:10)
at Request.Emitter.emit (G:\dev\js\bsx\node_modules\component-emitter\index.js:133:20)
at Request.onError (G:\dev\js\bsx\node_modules\engine.io-client\lib\transports\polling-xhr.js:309:8)
at Timeout._onTimeout (G:\dev\js\bsx\node_modules\engine.io-client\lib\transports\polling-xhr.js:256:18)
at ontimeout (timers.js:498:11)
at tryOnTimeout (timers.js:323:5)
at Timer.listOnTimeout (timers.js:290:5) type: 'TransportError', description: 403 }
에러를 찾아보면 ajax, jquery에 관련된 내용만 나와서 잘 알 수가 없었습니다.
무엇이 잘못되었는지 알려주시면 정말 감사하겠습니다. ㅠㅠ
1 답변
-
실제 테스트를 해 봐야 더 확실하겠지만,
socket.io는 ws, wss 프로토콜을 바로 받아서 쓸 수 없는 상황이 있습니다.
- Socket.io server - WebSocket client
- WebSocket server - Socket.io client
처럼 server - client 미스매칭시 연결이 이루어지지 않습니다.
이는 공식 문서에 나와있는데요. 링크 페이지의 “What Socket.IO is not” 항목을 보시면 왜 그런지 이유를 설명하고 있습니다.
추측입니다만 에러도 연결 타임아웃 때문에 발생한 것 같습니다.
일단 브라우저에서 native feature로 지원하는 WebSocket 객체를 사용하셔야 연결이 가능할 듯 하네요.
- 일단 현재 위의 코드를 동작시키면 콘솔창에 Connect! 라는 게 출력되는 것으로 보아 접속이 된 줄 알았는데 아니었나보네요. 인터넷을 찾아봐도 native feature로 지원하는 websocket 객체에 대해서 알 수가 없어서 그런데 혹시 설명해주실 수 있을까요? TaeSun Yoo 2018.10.12 13:22
- https://d2.naver.com/helloworld/1336 doodoji 2018.10.12 13:28
- https://developer.mozilla.org/ko/docs/WebSockets/Writing_WebSocket_client_applications doodoji 2018.10.12 13:30
- 로그가 연결되었다고 뜬다면... 위의 예제를 보고 테스트 코드를 작성 후, 검증하는 방법 밖에는 없을 듯 합니다. 삽질의 시작이죠. ^^; doodoji 2018.10.12 13:32
- 그렇군요. 답변 주셔서 감사합니다! TaeSun Yoo 2018.10.12 13:44
댓글 입력