웹 소켓 이용방법 - GiGAGenie-ServiceSDK/UserGuide GitHub Wiki

웹 소켓 이용 방법 (Javascript 기준)

GiGA Genie 서비스 SDK WebRTC 기능을 사용하기 위해서는 제공하는 웹 소켓을 이용해야 합니다. 이 페이지는 GiGA Genie 단말에서 생성한 웹소켓 채널에 PC의 웹에서 접속하기 위한 가이드 입니다.

  • 웹 소켓 서버 정보 (SSL만 이용 가능합니다.)

    • wss://svcapp.gigagenie.ai/channel
  • 연결 플로우

    image

  • 중요! 웹 소켓을 이용하려면 인증된 ContainerId이 필요합니다.

    • 인증된 ContainerId 받기
      • 기가지니 단말에서 appinfo.getContainerId API를 이용하여 확인할 수 있습니다.
      • 전달 받은 ContainerId를 웹 소켓 인증 시 UUID로 사용합니다.
      • ContainerId 받아서 서버로 POST하는 예제입니다.
    function getcontainerid(){
         var options={};
         gigagenie.appinfo.getContainerId(options,function(result_cd,result_msg,extra){
                 if(result_cd===200){
                         console.log("The container id is " + extra.containerid);
                         var httpReq=new XMLHttpRequest();
                         httpReq.open('POST',서버URL,true);
                         httpReq.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                         httpReq.send(extra.containerid);
                 } else{
                         console.log("getContainerId is fail.");
                 }
         });
       };
    

세부 이용방법

  1. 클라이언트에서 웹 소켓을 연결합니다.

    • 웹 소켓 연결하기 예시
    var server="wss://svcapp.gigagenie.ai/10002"; //연결할 웹 소켓 서버
    var ws=new WebSocket(server);                 //웹 소켓 변수 선언
    var connected=false;                          //연결 상태 확인 변수
    
    ws.onopen=function(event){
        connected=true;
    };
    
  2. 웹소켓 연결이 생성되면 서버에서 클라이언트에게 인증 정보 요청 메시지(Request Auth)를 전달합니다.

    • 상기 플로우에서 서버에서 클라이언트로 보내는 Request Auth 메시지 예 입니다.
    {
        "msgtype":"notify",
        "operation":"iam",
        "channeltype":"system"
    }
    

    클라이언트는 메세지를 받아서 형식에 맞게 인증 요청을 합니다.

    • Request Auth 메시지를 받아서 클라이언트는 Auth Reply 메시지를 전달합니다. Auth Reply는 다음과 같습니다.
    {
        "msgtype":"request",
        "operation":"auth",
        "uuid":uuid,                 //인증된 ContainerID를 입력합니다. 아래 내용을 참고하세요. 
        "channeltype":"webrtcaudio"  //WebRTC Audio 채널을 이용합니다.
    }
    
    • 다음은 서버에서 Request Auth를 받아서 Auth Reply 를 하는 예제 입니다.
    var uuid='######YOUR UUID######'
    ws.onmessage=function(message){
        var msg=JSON.parse(message.data);
        console.log('Received Data:'+message.data);//최초 서버 접속 시 인증 필요
        if(msg.msgtype === 'notify'){
            if (msg.operation === 'iam') {
                var auth_message = {
                "msgtype": "request",
                "operation": "auth",
                "uuid": uuid,
                "channeltype": "webrtcaudio",
             };
            ws.send(JSON.stringify(auth_message));
            console.log('auth message sent. auth_message= '+JSON.stringify(auth_message));
        }
    }
    
  3. Auth Reply를 받으면 서버에서 인증 결과를 응답 합니다.

    • 인증이 완료되었을 경우 result_cd를 200으로 응답 합니다.
    {
        "msgtype":"reply",
        "operation":"auth",
        "channeltype":"system",
        "result_cd":200,
        "result_msg":"authorized"
    }
    
  4. 인증에 성공하면 접속은 유지되고 통신을 할 수 있는 상태가 됩니다. 만약, 일정시간 Client 가 인증에 응하지 않으면 접속은 자동 종료됩니다.

    • 서버 접속 종료 시간: 70 seconds
    • 클라이언트 권장 주기: 30 ~ 60 seconds

    ※ 접속 유지 방법을 알고 싶으시다면 아래를 참고하세요.

    • 접속한 클라이언트가 일정한 시간 이내에 Alive 메시지를 발송하지 않으면 접속을 강제로 종료합니다.
      • 접속 유지 요청 형식
      {
         "msgtype":"notify",
         "operation":"ras_alive",
         "channeltype":"system"
      }
      
      • 접속 유지 요청 예시 (30초 당 1번 전송)
      let ticker = 0;
      setInterval(function() {
          ticker++;
          if (ticker % 30 === 7) {
              console.log('@ras-alive:' + ticker);
              var alive_session = {
                  "msgtype": "notify",
                  "operation": "ras_alive",
                  "channeltype": "system"
              };
              socket.send(JSON.stringify(alive_session));
          }
      }, 1000);
      
  5. 채널 세션 입장 요청

    • WebRTC를 이용하기 위해서는 생성되어 있는 채널로 입장 요청을 해야 합니다.
      기가지니 단말에서 생성한 Session ID를 이용합니다.

      • 채널 세션 입장 요청 형식
      {
          "msgtype":"request",
          "operation":"join_session",
          "channeltype":"webrtcaudio",
          "sessionid":"aaaa",
          "uuid":uuid,
          "trxid":"K0000000:1501463079077:00002"
      }
      
    • 채널 세션 접속에 대한 응답이 옵니다.

      • 접속 응답 형식
      {
          "msgtype":"reply",
          "operation":"join_session",
          "result_cd":200,
          "result_msg":"Success",
          "trxid":"K0000000:1501463079077:00002"
      }
      
    • 입장이 되면 해당 채널에 notify 가 발생합니다. 기가지니 단말에서도 해당 이벤트를 받게 됩니다. (4.6.12 Channel 이벤트 수신 참고)

      • 입장 안내 응답 형식
      {
          "msgtype":"notify",
          "operation":"join_session",
          "sessionid":"aaaa",
          "channeltype":"webrtcaudio"
      }
      
  6. 웹 소켓으로 데이터 주고 받기

    • WebRTC 데이터를 받고 전송하려면 전송 데이터 형식에 맞춰 요청합니다.

      • 데이터 전송 형식
      {
          "msgtype":"data",
          "channeltype":"webrtcaudio",
          "sessionid":"aaaa",
          "trxid":"K0000000:1501463079077:00003",
          "data":{전송할 데이터}
      }
      
      • 기가지니 단말에서 offer로 전달 받았을 때 예시
      {
          "msgtype":"data",
          "channeltype":"webrtcaudio",
          "sessionid":"aaaa",
          "trxid":"K0000000:1501463079077:00003",
          "data":{"type":"offer","sdp":"v=0...."}
      }
      
      • Answer 전달할 때 예시
      //웹 소켓으로 webrtcaudio 메시지 전송
      function sendMessage(sendMsg){
              console.log('sendMsg: '+sendMsg);
              var options={};
              options.msgtype='data';
              options.sessionid=sessionid;
              options.channeltype='webrtcaudio';
              mSendJoinSessionTrx='FromWeb:'+getTrxId();
              options.data = sendMsg;
              console.log('Send To WS:'+JSON.stringify(options));
              ws.send(JSON.stringify(options));
      };
      
  7. 세션 종료 요청하기

    • 세션 종료 요청 형식
    {
        "msgtype":"request",
        "operation":"destroy_session",
        "channeltype":"webrtcaudio",
        "sessionid":"aaaa",
        "uuid":uuid,
        "trxid":"K0000000:1501463079077:00003"
    }
    
⚠️ **GitHub.com Fallback** ⚠️