먼저 해야할것들


알아야 할것들

  유챗은 비동기 방식으로의 로딩을 지원합니다. 비동기 방식의 특성상 언제 로딩이 완료될지 알 수 없으며, 이 때문에 이벤트 기반으로 코드를 작성하셔야 합니다.

  유챗 스크립트가 완전히 로딩되기 전에 이벤트를 등록하기 위해서는 아래의 이벤트 등록용 스크립트를 사전에 실행해야 합니다. 아래의 코드는 유챗이 완전히 로딩되기 전에 임시로 이벤트들을 보관하는 역할을 합니다.

<script>U=window.U=window.U||{},U.events=U.events||[],U.chat=function(n){return{on:function(e,t){U.events.push([n,e,t])},off:function(e){for(var t=U.events.length;t>0;)U.events[--t][0]==n&&U.events[t][1]==e&&U.events.splice(t,1)}}};</script>

맛보기

  아래 코드는 유챗 API와 스킨 API를 활용한 간단한 예제입니다.

<u-chat room='test' style="display:inline-block; width:500px; height:500px;">
  <script>U=window.U=window.U||{},U.events=U.events||[],U.chat=function(n){return{on:function(e,t){U.events.push([n,e,t])},off:function(e){for(var t=U.events.length;t>0;)U.events[--t][0]==n&&U.events[t][1]==e&&U.events.splice(t,1)}}};</script>

  <script>
    U.chat('*').on('after.create', function( room, data ) {
    // room.skin json 은 create 에서 정의되므로 after이여야된다.
      room.skin.menubar.add( {
        id : 'alert'
        , title : "its alert!!"
        , html : '<div>hi</div>'
        , condition : function ( room, data ) {
           if(room.my.auth > 1) // 멤버이상이라면 표시하지 않는다.
             return false;
        }
        , onClick : function( room, data ) {
            room.print('hi ! '+room.my.nick+'<br><span style="font-size:20px;">html야!!</span>');
        }     
      });

      room.skin.userMenu.add( {
        id : 'test'
        , text : '테스트야~'
        , onClick : function ( room, data ) {
            if(room.my.nick == data.target)
              alert(' 이건 나야! ');
            else
              alert( '안뇽 '+data.target );
          }
      });
    });
  </script>
</u-chat>`

 

채팅방 선택

  한 페이지에 여러 채팅방이 존재할 수 있습니다. 채팅방을 선택하기 위해서는 U.chat('*')부분에 별표 대신 원하는 채팅방 ID를 입력하시면 됩니다.

  해당 페이지의 모든 채팅방에 API 적용: U.chat('*').on('af···
  해당 페이지의 asdf 라는 ID를 가진 채팅방에 API를 적용: U.chat('asdf').on('af···

  대신, 여러 채팅방을 선택해서 각각에 이벤트를 추가할 수는 없습니다. 예를들어 asdf, cdef, zxcv 라는 채팅방이 있고, 그중 asdf와 cdef 채팅방에만 API를 적용하기 위해서는 아래 처럼 각각 이벤트를 추가해야 합니다.

U.chat('asdf').on('af··);
U.chat('cdef').on('af··);