[WebSocket] 업비트 웹소켓(webSocket)과 통신해보자 (feat. blob 데이터)

 const ws = useRef<WebSocket | null>(null);
 
 useEffect(() => {
    if (!ws.current) {
      ws.current = new WebSocket("wss://api.upbit.com/websocket/v1");

      ws.current.onopen = () => {
        console.log("WebSocket connected");
        if (ws.current)
          ws.current.send(
            JSON.stringify([
              { ticket: "test" },
              { type: "trade", codes: ["KRW-BTC"] },
            ])
          );
      };

      ws.current.onmessage = (event) => {
        event.data.arrayBuffer().then((buffer: any) => {
          const decoder = new TextDecoder();
          const message = decoder.decode(buffer);
          console.log(JSON.parse(message));
          // 웹소켓으로 받은 데이터 처리
        });
      };
      ws.current.onerror = (error) => {
        console.error(error);
      };

      ws.current.onclose = () => {
        console.log("WebSocket disconnected");
      };
    }
  }, []);

https://docs.upbit.com/docs/upbit-quotation-websocket

react에서 webSocket을 사용하는 방법 중 하나가 npm ws를 설치해서 사용하는 것 인데 

이것을 그냥 사용하게 되면 

 

browser.js:4 Uncaught Error: ws does not work in the browser. Browser clients must use the native WebSocket object

이라는 오류가 나게 되는데 

이 오류는 ws 라이브러리가 브라우저에서 제대로 작동하지 않기 때문에 발생하는 것이다.

ws 라이브러리는 Node.js 환경에서 사용할 수 있는 WebSocket 라이브러리로, 브라우저에서는 사용할 수 없다

 

따라서

브라우저에서 WebSocket을 사용하려면, WebSocket이라는 내장된 웹 API를 사용해야한다.

즉 브라우저에서 Upbit API와 같은 WebSocket API를 사용하려면 WebSocket 객체를 사용해야한다는 것 이다.

 

그래서 내장된 웹 API webSocket을 객체화해서 사용하였다. 

 

결과는 아래와 같다

근데 처음에 데이터를 받았을 때 blob 형태로 값을 받았는데 

 

웹소켓으로 받은 데이터가 blob 형태로 오는 이유는, 기본적으로 웹소켓에서 데이터를 전송할 때 binary 타입으로 전송하기 때문이다

이 경우, 받은 데이터는 blob 객체로 전달되게 되는데 , 이를 다시 문자열 형태로 변환해야 한다.

 

blob 객체를 문자열로 변환하려면, FileReader API를 사용하면 된다.

FileReader API는 HTML5에서 추가된 API로, 파일을 비동기적으로 읽을 수 있는 기능을 제공한다.

이를 이용하여 blob 객체를 문자열로 변환할 수 있다.

 

위 코드에서는 event.data를 arrayBuffer() 메소드를 사용하여 ArrayBuffer로 변환한 후, TextDecoder API를 사용하여 문자열로 변환하고. 디코딩된 문자열은 message 변수에 할당된다.

그것을 이제 JSON.parse로 해서 다시 JSON화 시켜주면 위 와 같은 데이터가 LOG에 나오게 된다. 

 

이것을 이용해서 UI / UX를 업데이트 해주면 된다.