본문으로 건너뛰기

Browser IO Client Module

IOSignal은 브라우저 클라이언트, Node.js용 서버와 클라이언트 모듈들이 하나의 패키지로 배포됩니다. 문제는 IO 클라이언트의 경우엔 Node.js와 Browser의 환경이 다르므로 IO Client 구현도 별도로 존재합니다.

  • Node.js용 IO 클라이언트를 사용할 경우 Node IO Client 페이지와 같이 사용합니다.
  • 브라우저용 IO를 사용할 경우 Browser IO Client 페이지와 같이 사용하면됩니다.

문제는 Svelte, React, Vue 환경에서 웹앱을 개발 할 경우 npm 으로 설치한 iosignal 패키지에서 필요한 모듈을 import 하여 사용할때 Node용이 아닌 Browser 용 IO 모듈을 사용할 경우가 있습니다. 이경우 번들러가 해당 모듈을 불러와서 웹앱을 빌드할때 사용하게됩니다.

기본 방식으로 named export 된 IO 모듈을 불러올 경우 Node.js 용 IO Client가 선택됩니다.

import { IO } from 'iosignal'
// IO Client for node.js.

브라우저용 IO 클라이언트를 'iosignal' 패키지에서 불러올 경우 아래와 같이 사용하시면됩니다.

import IO from 'iosignal/io.js'
// IO client for browser.
  • 위와 같이 선택시 패키지내에 있는 dist/io.js 파일이 로딩됩니다.
  • 물론 io.js 파일을 복사하거나 io.js 파일의 path를 직접 입력해도 됩니다.
  • 브라우저용 IO 는 default export 이므로 중괄호 없이 이름을 지정합니다. IO 이름을 권장합니다.

Node.js IO 와 Browser IO 가 다른 이유​

환경에 종속되지 않는 javascript 구현의 경우 node.js와 browser 환경 모두에서 동일하게 사용될 수 있습니다. 하지만 플랫폼에 의존되는 구현의 경우 환경마다 별도의 구현이 필요하게됩니다. IO 클라이언트가 두개의 구현을 하게된 몇가지 이유는 다음과 같습니다.

  • WebSocket: 웹소켓이 브라우저 기본 내장된 반면 Node.js는 ws같은 외부 패키지를 사용합니다. (참고로, 최신 버전에서는 내장 WebScoket을 도입중입니다.)
  • Buffer: Node.js Buffer는 브라우저에서 TypedArray Uint8Array 의 대응되지만 슈퍼셋으로 좀더 편리한 기능을 제공합니다.
  • Events: Node.js 는 EventEmitter 를 브라우저는 EventTarget 을 사용합니다.
  • WebCrypto: 웹크립토도 비호환이었지만, 이부분은 Node.js측에서 몇년전부터 지원을 시작했습니다.

IO Client 는 웹소켓 통신으로 바이너리 데이타를 암호화 하여 이벤트로 주고받게 되므로 위와 같은 차이에 따라 구현을 분리하였습니다. 물론 IOSignal 메시지프로토콜은 호환됩니다.