[Node.js] 특정 홈페이지에서 크롬 개발자 도구의 Network 탭에 나오는 websocket의 데이터를 받는 프로그램 작성

안녕하세요.

현재 프로그램을 작성하다가 궁금증이 생겨서 이렇게 질문을 올립니다.

특정 홈페이지에서 크롬 개발자 도구 -> 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답변

  • 좋아요

    2

    싫어요
    채택취소하기

    실제 테스트를 해 봐야 더 확실하겠지만,

    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 digda 2018.10.12 13:28
    • https://developer.mozilla.org/ko/docs/WebSockets/Writing_WebSocket_client_applications digda 2018.10.12 13:30
    • 로그가 연결되었다고 뜬다면... 위의 예제를 보고 테스트 코드를 작성 후, 검증하는 방법 밖에는 없을 듯 합니다. 삽질의 시작이죠. ^^; digda 2018.10.12 13:32
    • 그렇군요. 답변 주셔서 감사합니다! TaeSun Yoo 2018.10.12 13:44

ᕕ( ᐛ )ᕗ
로그인이 필요합니다

작성한 답변에 다른 개발자들이 댓글을 작성하거나 댓글에 좋아요/싫어요를 할 수 있기 때문에 계정을 필요로 합니다.