Socket Client 적용

2024-04-12 11:12:50 +09:00
parent dc3c42a341
commit 95924af31a
13 changed files with 389 additions and 104 deletions
@@ -66,7 +66,7 @@ class APITester {
    return this.servers.filter(server => server.id == serverId)[0].basePath; // == : 타입 비교 없이 값만 비교
  }

-  apiRequestTemplate(apiRequest, index) {
+  httpApiRequestTemplate(apiRequest, index) {
    return `
        <div class="tab-pane fade mt-1 api_request" id="api_request_${apiRequest.id}" style="height: 100%;">
            <div><span class="collection_name">${apiRequest.collectionName}</span> &gt; <span class="api_name">${apiRequest.name}</span></div>
@@ -226,6 +226,106 @@ class APITester {
        `;
  }

+  tcpApiRequestTemplate(apiRequest, index) {
+    return `
+        <div class="tab-pane fade mt-1 api_request" id="api_request_${apiRequest.id}" style="height: 100%;">
+            <div><span class="collection_name">${apiRequest.collectionName}</span> &gt; <span class="api_name">${apiRequest.name}</span></div>
+            <div class="d-flex api_request_info">
+                <div class="form-floating">
+                    ${this.renderServers(apiRequest.server)}
+                    <label class="form-label must">Server</label>
+                </div>
+                <button class="btn btn-primary send me-1">Send</button>
+                <button class="btn btn-primary save" data-index="${index}" style="height: 58px;">저장</button>
+            </div>
+            <div class="api_request d-flex flex-column" style="height:100%;">
+              <div class="api_request_body">
+                <ul class="nav nav-tabs mt-1" role="tablist">
+                    <li class="nav-item" role="presentation">
+                        <button class="nav-link btn_request_body_tab" data-bs-toggle="tab"
+                                type="button" role="tab" aria-controls="requestBody" data-bs-target="#requestBodyTab_${apiRequest.id}"
+                                aria-selected="false">Body
+                        </button>
+                    </li>
+                    <li class="nav-item" role="presentation">
+                        <button class="nav-link btn_prerequest_tab" data-bs-toggle="tab"
+                                type="button" role="tab" aria-controls="preScrit" data-bs-target="#preRequestTab_${apiRequest.id}"
+                                aria-selected="false">Pre-Request
+                        </button>
+                    </li>
+                    <li class="nav-item" role="presentation">
+                        <button class="nav-link btn_postrequest_tab" data-bs-toggle="tab"
+                                type="button" role="tab" aria-controls="postScript" data-bs-target="#postRequestTab_${apiRequest.id}"
+                                aria-selected="false">Post-Request
+                        </button>
+                    </li>
+                </ul>
+                <div class="tab-content" style="height: 100%;">
+                    <div class="tab-pane fade request_body_tab" role="tabpanel" id="requestBodyTab_${apiRequest.id}" aria-labelledby="requestBody-tab">
+                      <div class="d-flex flex-column">
+                        <select class="form-select mt-1 request_body_type" name="request_type">
+                            <option value="">text/plain</option>
+                        </select>
+                        <div class="request_body mt-1" style="width:100%;height: 300px; border:1px solid grey;"></div>
+                      </div>
+                    </div>
+                    <div class="tab-pane fade pre_script_tab" role="tabpanel" id="preRequestTab_${apiRequest.id}" aria-labelledby="preScrit-tab">
+                        <div class="d-flex flex-row">
+                            <div style="width:calc(100% - 200px);">
+                                <div class="pre-request mt-1" style="height:300px;border:1px solid grey;"></div>
+                            </div>
+                            <div style="width: 200px;">
+                                <div class="pre-request-variable">
+                                </div>
+                            </div> 
+                        </div>
+                    </div>
+                    <div class="tab-pane fade post_script_tab" role="tabpanel" id="postRequestTab_${apiRequest.id}"
+                         aria-labelledby="postScrit-tab">
+                         <div class="d-flex flex-row">
+                           <div style="width:calc(100% - 200px);">
+                             <div class="post-request mt-1" style="height:300px;border:1px solid grey;"></div>
+                           </div>
+                           <div style="width: 200px;">
+                             <div class="post-request-variable">
+                             </div>
+                           </div> 
+                        </div>
+                    </div>
+                </div>
+              </div>
+              <div class="api_response" style="flex: 1">
+                <div class="mt-1">
+                  <span>Response</span>
+                  <span class="response_status"></span>
+                  <span class="response_time"></span>
+                  <span class="response_size"></span>
+                </div>
+                <ul class="nav nav-tabs mt-1" role="tablist">
+                    <li class="nav-item" role="presentation">
+                        <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#responseBodyTab_${apiRequest.id}" type="button" role="tab" aria-controls="responseBody" aria-selected="false">Body</button>
+                    </li>
+                    <li class="nav-item" role="presentation">
+                        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#consoleTab_${apiRequest.id}" type="button" role="tab" aria-controls="consoleTab" aria-selected="false">Console</button>
+                    </li>
+                </ul>
+                <div class="tab-content border-bottom" style="min-height: 250px;">
+                  <div class="tab-pane fade show active" id="responseBodyTab_${apiRequest.id}" role="tabpanel"
+                       aria-labelledby="responseParams-tab">
+                      <div class="response_body mt-1" style="width:100%;height:250px;border:1px solid grey;"></div>
+                  </div>
+                  <div class="tab-pane fade" id="consoleTab_${apiRequest.id}" role="tabpanel"
+                       aria-labelledby="console-tab">
+                      <div class="console mt-1" style="width:100%;height:250px;border:1px solid grey;"></div>
+                  </div>
+                </div>
+            </div>
+            </div>
+        </div>
+       
+        `;
+  }
+
  headerTemplate(header, index) {
    return `
            <tr data-index="${index}">
@@ -555,53 +655,47 @@ class APITester {
    let apiRequestTabContent = $(this.apiTabContentTarget);
    let model = this.apiRequests[index];

-    apiRequestTabContent.append(this.apiRequestTemplate(model, index));
-
-    let editableInput = new EditableInput({
-      name: 'path',
-      value: model.path
-    });
-
-    let queryParamTable = new PropertyTable({
-      propertyName: 'queryParams',
-      properties: model.queryParams
-    });
-
-    let headerTable = new PropertyTable({
-      propertyName: 'headers',
-      properties: model.headers
-    });
-
-    queryParamTable.init(apiRequestTabContent.find(`#api_request_${model.id}`).find('.query_params')[0], (properties) => {
-      model.queryParams = properties;
-      console.log(model.queryParams);
-      this.buildPath(model);
-      editableInput.setValue(model.path);
-      $('span.variable').off('mouseover');
-      $('span.variable').off('mouseout');
-      document.querySelectorAll('span.variable').forEach(element => {
-        let text = element.innerText;
-        element.addEventListener('mouseover', () => me.showPopper(element, text));
-        element.addEventListener('mouseout', () => me.hidePopper(element));
+    if (model.type ==='HTTP'){
+      apiRequestTabContent.append(this.httpApiRequestTemplate(model, index));
+      let editableInput = new EditableInput({
+        name: 'path',
+        value: model.path
      });
-    });

-    headerTable.init(apiRequestTabContent.find(`#api_request_${model.id}`).find('.request_headers')[0], (properties) => {
-      model.headers = properties;
-      $('span.variable').off('mouseover');
-      $('span.variable').off('mouseout');
-      document.querySelectorAll('span.variable').forEach(element => {
-        let text = element.innerText;
-        element.addEventListener('mouseover', () => me.showPopper(element, text));
-        element.addEventListener('mouseout', () => me.hidePopper(element));
+      let queryParamTable = new PropertyTable({
+        propertyName: 'queryParams',
+        properties: model.queryParams
      });
-    });

-    apiRequestTabContent.find(`#api_request_${model.id}`).find('.api_request_info').find('.path').each(function() {
-      editableInput.init(this, (value) => {
-        model.path = value;
-        model.queryParams = me.parseParam(model.path);
-        queryParamTable.setProperties(model.queryParams);
+      let headerTable = new PropertyTable({
+        propertyName: 'headers',
+        properties: model.headers
+      });
+
+      apiRequestTabContent.find(`#api_request_${model.id}`).find('.api_request_info').find('.path').each(function() {
+        editableInput.init(this, (value) => {
+          model.path = value;
+          model.queryParams = me.parseParam(model.path);
+          queryParamTable.setProperties(model.queryParams);
+          $('span.variable').off('mouseover');
+          $('span.variable').off('mouseout');
+          document.querySelectorAll('span.variable').forEach(element => {
+            let text = element.innerText;
+            element.addEventListener('mouseover', () => me.showPopper(element, text));
+            element.addEventListener('mouseout', () => me.hidePopper(element));
+          });
+        });
+
+        $(this).append(`<label>Path</label>`);
+
+        $('span.variable').off('mouseover');
+        $('span.variable').off('mouseout');
+      });
+      queryParamTable.init(apiRequestTabContent.find(`#api_request_${model.id}`).find('.query_params')[0], (properties) => {
+        model.queryParams = properties;
+        console.log(model.queryParams);
+        this.buildPath(model);
+        editableInput.setValue(model.path);
        $('span.variable').off('mouseover');
        $('span.variable').off('mouseout');
        document.querySelectorAll('span.variable').forEach(element => {
@@ -611,14 +705,23 @@ class APITester {
        });
      });

-      $(this).append(`<label>Path</label>`);
+      headerTable.init(apiRequestTabContent.find(`#api_request_${model.id}`).find('.request_headers')[0], (properties) => {
+        model.headers = properties;
+        $('span.variable').off('mouseover');
+        $('span.variable').off('mouseout');
+        document.querySelectorAll('span.variable').forEach(element => {
+          let text = element.innerText;
+          element.addEventListener('mouseover', () => me.showPopper(element, text));
+          element.addEventListener('mouseout', () => me.hidePopper(element));
+        });
+      });
+    }

-      $('span.variable').off('mouseover');
-      $('span.variable').off('mouseout');
-    });
+    if (model.type ==='TCP'){
+      apiRequestTabContent.append(this.tcpApiRequestTemplate(model, index));
+    }

    document.querySelectorAll('.variable').forEach(element => {
-
      let text = element.innerText;
      element.addEventListener('mouseover', () => me.showPopper(element, text));
      element.addEventListener('mouseout', () => me.hidePopper(element));
@@ -626,10 +729,11 @@ class APITester {

    this.openTab(model.id);
    let target = $('#api_request_' + model.id);
+    let language = model.type ==='TCP'? 'text': 'json';

    let requestBodyEditor = monaco.editor.create(target.find('.request_body')[0], {
      value: model.requestBody,
-      language: 'json',
+      language: language,
      automaticLayout: true
    });

@@ -665,7 +769,7 @@ class APITester {

    let responseBodyEditor = monaco.editor.create(target.find('.response_body')[0], {
      value: '',
-      language: 'json',
+      language: language,
      automaticLayout: true,
      quickSuggestions: false
    });
@@ -1076,6 +1180,10 @@ class APITester {
    if (newApiName === '') {
      newApiName = '새로운 API';
    }
+    let newApiType = $('#new_api_type').val();
+    if (newApiType === '') {
+      newApiType = 'HTTP';
+    }

    const collection = this.collections.filter(function(collection) {
      return collection.id === collectionId;
@@ -1087,6 +1195,7 @@ class APITester {
      method: 'GET',
      name: newApiName,
      path: '',
+      type : newApiType,
      headers: [],
      queryParams: [],
      requestBody: '',