[websoket] 웹소켓 사용해 데이터 호출하기 / 웹소켓 데이터보기

Websoket 

 

Websoket 이란?

WebSocket은 WS 수신을 기반으로 클라이언트와 서버 사이에 지속적으로 완전 양방향 연결 스트림을 생성하는 기술입니다. 일반적으로 채팅 기능이나 서버의 수신을 기다려야 하는 어플 및 웹사이트에서 사용하는 기술입니다.

 

 

Websoket 호출 

exampleSocket.onopen 을 우선적으로 선언해주는 이유는 연결이 시작 된 이후 send() 를 호출해주어야 하기 때문이다.

웹소켓 사용시 소켓의 binaryType 이 다른 경우가 있다. 이럴때는 선언후, 선언 변수에 binaryType 을 변경해서 진행하면 된다.

 

// 웹소켓 선언
var exampleSocket = new WebSocket("소켓 url");

// 웹소켓 호출
exampleSocket.onopen = function (event) {
    exampleSocket.send(
      JSON.stringify({
	     // 전송 데이터
        },
      })
    );
};
  
// 데이터 받기
exampleSocket.onmessage = function (event) {
	console.log(event.data);
};

// 웹소켓 닫기
exampleSocket.close();

 

이 외에도 여러가지 기능들이 존재하지만 통상적으로 많이 사용하는 것들 위주로만 적어놨다!

 

 

websoket 네트워크에서 보기

 

네트워크에선 websoket 데이터를 확인하려면 WS 를 눌러서 해당 웹소켓 데이터들의 수신을 확인할 수 있다.

웹소켓의 정보들은 보통 바이너리 값으로 불러와지는데 여러 라이브러리를 활용해서 해당 값들을 json 형태로도 받아볼 수 있다. 

pako 를 사용해 압축되어 있는 정보를 변환해서 불러올 수 있다.

 

 

 

 

> pako 는 아래와 같이 사용할 수 있다.

pako

const pako = require('pako'); 

// test 데이터
const test = { my: 'super', puper: [456, 567], awesome: 'pako' };

// 데이터를 압축가공
const compressed = pako.deflate(JSON.stringify(test));

// 압축 해제
const restored = JSON.parse(pako.inflate(compressed, { to: 'string' }));

 

 

 

 

참고사이트 

https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API

The WebSocket API (WebSockets) - Web APIs | MDN