본문으로 건너뛰기

IOSignal browser 기본

iosignal library 위치​

직접 운영중인 서버에서 라이브러리를 로딩하실 경우 npm i iosignal 으로 설치 후 dist/ 폴더에 있는 배포파일을 이용할수 있습니다. 또는 공개된 CDN 주소를 사용하여 라이브러리를 로딩할 수 도 있습니다.

라이브러리 유형​

IOSignal은 ES모듈을 기본 지원합니다.주의. 버전에따라 파일명이나 유형이 다를 수 있습니다. v2.1.0의 경우 아래와 같습니다.

  • ES Module: iosignal.js (export default)
  • UMD(IIFE): iosignal.min.js ( global var name IO)

Browser client : ESM 방식​

ESM 사용시, export default 가 사용되므로 원하시는 이름으로 import 하시면됩니다. 본 문서에서는 IIFE 방식과 호환을 위해 주로 IO 라는 이름을 사용합니다.

<html>

  <script type="module">
    import IO from "../dist/iosignal.js"

    const io = new IO('wss://io.iosignal.net/ws')
    io.listen('channel#topic', (...args)={
      console.log( args )
    })

    io.on('ready',()=>{
      console.log('ready cid:', io.cid )
    })

  </script>

</html>

Browser Client : UMD(IIFE)​

예전부터 사용해오던 자바스크립트 라이브러리 로딩방식을 사용할 경우(IIFE)엔 script 태그 위치에 주의하셔야합니다. 즉, script 보다 위에 위치해야합니다. 라이브러리가 로딩되면 전역 변수명IO으로 세팅됩니다.

<html>
  <script src="../dist/iosignal.min.js"></script>
  <script>
    console.log('IO', IO)  // default global variable name is IO

    var io1 = new IO('ws://localhost:7777')
    var io2 = new IO('ws://localhost:7777')
    var io3 = new IO('ws://localhost:7777')

    io1.on('error', errorHandler )
    io2.on('error', errorHandler )
    io3.on('error', errorHandler )

    let channelName = 'io'

    // classic style subsribing
    io1.on('ready',e=>{
      io1.subscribe(channelName)
      io1.on(channelName, (...args)=>{
        // console.log('io1 received', args )
        let msg = '[io1] ' + JSON.stringify( args )
        addMessage(msg)
      })
    })

    // iosignal style subscribing
    io2.listen(channelName, (...args)=>{
      // console.log('io2 receive', args )
      let msg = '[io2] ' + JSON.stringify( args )
        addMessage(msg)
    })

    setInterval(e=>{
      io3.signal(channelName, 'single string')   // single string payload
      io3.signal(channelName, Date.now(), 'a', 2 , {key: 3} ) //multiple payload 
      io3.signal(channelName ) // pure signal without payload.
    },3000)

    function addMessage(msg){
      // ...
    }

    function errorHandler(e){
      // ...
    }
  </script>

</html>

IOSignal 공식 메시지 중계서버(브로커)​

메시지를 중계해주는 서버를 보통 브로커(broker)라고 부릅니다. (예: MQTT Broker ) IOSignal 은 브라우저 클라이언트(JS)와 아두이노 클라이언트 소스코드(C/C++) 뿐 아니라 브로커 서버 소스(JS)와 CLI 프로그램도 함께 제공됩니다.(github 문서나 별도 문서참조) 본격적인 테스트나 사용을 위해선 직접 서버를 운영하시면됩니다.

단, 자체 서버가 없거나 운영이 어려우신 경우 아래의 IOSignal 공개 브로커(서버)를 사용가능합니다.

wss://io.iosignal.net/ws
  • 주의. 공개서버는 시그널 용량과 시그널당 구독자 개수 제한이있습니다.
  • 공개서버 상태는 수시로 변경될 수 있습니다.