TS-API/legacy/ko/examples/ex3.html at master · bobhyun/TS-API · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<!DOCTYPE>
<head>
  <meta charset='utf-8'>
  <title>ex3</title>
  <style>
    body {font-family:Arial, Helvetica, sans-serif}
    div {padding:5px}
    #control {background-color:beige}
    #url, #messages {font-size:0.8em;font-family:'Courier New', Courier, monospace}
    li.open, li.close {color:blue}
    li.error {color:red}
  </style>
</head>
<body>
  <h2>예제3. 이벤트 수신하기 (Web Socket)</h2>
  <div id='control'>
    <div>
      <input type='text' id='host-name' placeholder='서버 IP주소:포트'>
      <input type='text' id='user-id' placeholder='사용자 ID'>
      <input type='password' id='password' placeholder='비밀번호'>
    </div>
    <div>
      토픽:
      <input class='topic' type='checkbox' value="channelStatus" checked>채널 상태
      <input class='topic' type='checkbox' value="LPR" checked>차량 번호 인식
      <input class='topic' type='checkbox' value="emergencyCall" checked>비상 호출
      <input class='topic' type='checkbox' value="systemEvent" checked>시스템 이벤트
      <input class='topic' type='checkbox' value="motionChanges" checked>움직임 감지
      <input class='topic' type='checkbox' value="parkingCount" checked>주차 카운트
      <input class='topic' type='checkbox' value="packing" checked>포장
      <input class='topic' type='checkbox' value="recordingStatus" checked>녹화 상태
      <input class='topic' type='checkbox' value="object" checked>객체 감지
      <input class='topic' type='checkbox' value="bodyTemperature" checked>체온 감지
      <input id='verbose' type='checkbox' checked>자세히
      <button type='button' onClick='onConnect()'>접속</button>
      <button type='button' onClick='onDisconnect()'>접속 종료</button>
      <button type='button' onClick='onClearAll()'>모두 삭제</button>
    </div>
    <div id='url'>
    </div>
  </div>

  <div>
    <ul id='messages'></ul>
  </div>
</body>
<script type='text/javascript'>
  (function() {
    window.myApp = { ws: null };
  })();

  function getURL() {
    var url = '';

    if (typeof(WebSocket) === 'undefined') {
      alert('웹 소켓을 지원하지 않는 웹 브라우저입니다.');
      return url;
    }

    if(window.myApp.ws !== null) {
      alert('이미 접속 중입니다.');
      return url;
    }

    var hostName = document.getElementById('host-name').value;
    if(hostName == '') {
      alert('호스트를 입력하십시오.');
      return url;
    }
    var userId = document.getElementById('user-id').value;
    if(userId == '') {
      alert('사용자 아이디를 입력하십시오.');
      return url;
    }
    var password = document.getElementById('password').value;
    if(password == '') {
      alert('비밀번호를 입력하십시오.');
      return url;
    }

    var topics = '';
    var el = document.getElementsByClassName('topic');
    for(var i=0; i<el.length; i++) {
      if(!el[i].checked)
        continue;

      if(topics.length > 0)
        topics += ',';
       topics += el[i].value;
    }

    if(topics.length == 0) {
      alert('하나 이상의 토픽을 선택하십시오.');
      return url;
    }

    var encodedData = window.btoa(userId + ':' + password); // base64 인코딩
    window.myApp.auth = encodeURIComponent(encodedData);
    url = (hostName.includes('ws://', 0) ? '' : 'ws://') +
      hostName + '/wsapi/subscribeEvents?topics=' + topics;
    if(document.getElementById('verbose').checked)
      url += '&verbose=true';

    //url += '&objectTypes=face,human'
    url +='&auth=' + window.myApp.auth;

    //url += '&ch=4&lang=ko-KR';
    return url;
  }

  function addItem(tagClass, msg) {
    var li = document.createElement('li');
    li.appendChild(document.createTextNode(msg));
    li.classList.add(tagClass);
    document.getElementById('messages').appendChild(li);
  }

  function onConnect() {
    var url = getURL();
    if(url.length == 0)
      return;

    document.getElementById('url').innerText = url;

    // 웹 소켓 인스턴스와 핸들러 함수들
    var ws = new WebSocket(url);
    ws.onopen = function() {
      addItem('open', '접속 성공');
    };
    ws.onclose = function(e) {
      addItem('close', '접속 종료: ' + e.code);
      onDisconnect();
    };
    ws.onerror = function(e) {
      addItem('error', '오류: ' + e.code);
    };
    ws.onmessage = function(e) {
      try {
        var data = JSON.parse(e.data);
        addItem('data', e.data);
      } catch(ex) {
        console.log(e.data);
      }
    };
    window.myApp.ws = ws;
  }

  function onDisconnect() {
    if(window.myApp.ws !== null) {
      window.myApp.ws.close();
      window.myApp.ws = null;
    }
  }

  function onClearAll() {
    var el = document.getElementById("messages");
    while (el.firstChild) {
      el.removeChild(el.firstChild);
    }
    document.getElementById('url').innerText = '';
  }
</script>