웹 소켓 이용방법 - 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"
}

Copyright ⓒ 2017-2023 kt corp. All rights reserved.

⚠️ **GitHub.com Fallback** ⚠️