KIS정보통신 POSPORTAL

4.3. KIS 모듈 4.3.2. FAQ 4.3.2.4. Flutter에서 websocket 오류인 경우

검색 결과가 없습니다.

↑ ↓ Navigate

ESC Close

4.3.2.4. Flutter에서 websocket 오류인 경우

<p>windows 환경에서 Flutter 와 AGENT 연결할 때 javascript 를 지원 해 주고 있습니다.</p><p><br></p><p>가.순서</p><ol><li><p>js 패키지 설치</p></li><li><p>빌드된 JS 라이브러리 준비 </p></li><li><p>플러터 프로젝트의 web폴더 밑의 index.html 수정</p></li><li><p>JS 라이브러리 연결</p></li><li><p>사용</p></li></ol><h3>1. js 패키지 설치</h3><p>pubspec.yaml에 다음과 같이 js 패키지를 추가합니다.</p><div data-language="text" class="toastui-editor-ww-code-block-highlighting"><pre><code>dependencies:
  flutter:
    sdk: flutter
  js: ^0.6.3</code></pre></div><p>추가하고 패키지를 설치합니다.</p><p><br></p><p>$ flutter pub get</p><h3>2. JS 라이브러리 파일 준비</h3><h3>3. web 폴더 구조</h3><p><img src="/download/manual/getImage/2228" alt="image.png" contenteditable="false"><br></p><h3>4. web폴더의 index.html 에 websocketSample.html 소스 복사</h3><div data-language="text" class="toastui-editor-ww-code-block-highlighting"><pre><code>```html
  &lt;title&gt;windows_flutter_web_testpage&lt;/title&gt;
  &lt;script src="websocketSample.js"&gt;&lt;/script&gt;
  
```</code></pre></div><div data-language="text" class="toastui-editor-ww-code-block-highlighting"><pre><code>```html
&lt;body&gt;
  &lt;h1&gt;WebSocket Client&lt;/h1&gt;
  &lt;table&gt;
  &lt;tr&gt;
    &lt;td&gt;거래구분&lt;/td&gt;
    &lt;td&gt;
    &lt;select name=tran_code id="tran_code"&gt;
      &lt;option value="D1"&gt;신용승인&lt;/option&gt;
      &lt;option value="D2"&gt;신용취소&lt;/option&gt;
      &lt;option value="CC"&gt;현금영수증승인&lt;/option&gt;
      &lt;option value="CR"&gt;현금영수증취소&lt;/option&gt;
    &lt;/select&gt;
    &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;결제금액&lt;/td&gt;
    &lt;td&gt;&lt;input type = 'text' id="txtAmount" size =12 value='1004'&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;할부개월&lt;/td&gt;
    &lt;td&gt;&lt;input type = 'text' id="txtPeriod" size =2 value='00'&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  &lt;!-- WebSocket Connection Parameters Table --&gt;
      &lt;table&gt;
    &lt;tr&gt;
      &lt;td&gt;통신방식&lt;/td&gt;
      &lt;td&gt;
        &lt;input style="width:50px;" type='radio' name='netprotocol' id='net_ws' value='ws' checked=true /&gt;WS
        &lt;input style="width:50px;" type='radio' name='netprotocol' id='net_wss' value='wss' /&gt;WSS
      &lt;/td&gt;
    &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;WS Endpoint&lt;/td&gt;
              &lt;td&gt;&lt;input type="text" id="endpoint"/&gt;&lt;/td&gt;
          &lt;/tr&gt;
    &lt;tr&gt;
              &lt;td&gt;Message&lt;/td&gt;
              &lt;td&gt;&lt;input type="text" id="message"/&gt;&lt;/td&gt;
          &lt;/tr&gt;
    &lt;tr&gt;
              &lt;td&gt;연결요청&lt;/td&gt;
              &lt;td&gt;
                  &lt;input id="btnConnect"	type="button" value="Connect"	onclick="Connect()"&gt;&amp;nbsp;&amp;nbsp;
              &lt;/td&gt;
          &lt;/tr&gt;
    &lt;tr&gt;
              &lt;td&gt;연결해제&lt;/td&gt;
              &lt;td&gt;
                  &lt;input id="btnDisconnect"	type="button" value="Disconnect"	onclick="Disconnect()"&gt;&amp;nbsp;&amp;nbsp;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;결제요청&lt;/td&gt;
              &lt;td&gt;
                  &lt;input id="btnApproval"	type="button" value="Approval"	onclick="Approval()"&gt;&amp;nbsp;&amp;nbsp;
              &lt;/td&gt;
          &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;거래중단&lt;/td&gt;
              &lt;td&gt;
        &lt;input id="btnStop" 	type="button" value="Stop"		onclick="KIS_Agent_Stop()"&gt;&amp;nbsp;&amp;nbsp;
      &lt;/td&gt;
    &lt;/tr&gt;
      &lt;/table&gt;&lt;br/&gt;

&lt;textarea id="incomingMsgOutput" rows="10" cols="20" disabled="disabled"&gt;&lt;/textarea&gt;
  
&lt;/body&gt;
```</code></pre></div><h3>5. 사용</h3><div data-language="text" class="toastui-editor-ww-code-block-highlighting"><pre><code>$ flutter doctor

$ flutter channel stable
$ flutter upgrade
$ flutter config？--enable-web //web 활성화 명령어
$ flutter devices</code></pre></div><p><img src="/download/manual/getImage/2229" alt="image.png" contenteditable="false"><br></p><div data-language="text" class="toastui-editor-ww-code-block-highlighting"><pre><code>// run
$ flutter run -d chrome
Launching lib\main.dart on Chrome in debug mode...
Waiting for connection from debug service on Chrome...             11.4s
This app is linked to the debug service: ws://127.0.0.1:63805/EAlgYyEyUw4=/ws
Debug service listening on ws://127.0.0.1:63805/EAlgYyEyUw4=/ws
<br></code></pre></div><p><img src="/download/manual/getImage/2230" alt="image.png" contenteditable="false"><br></p><p><img src="/download/manual/getImage/2231" alt="image.png" contenteditable="false"><br></p><p><img src="/download/manual/getImage/2232" alt="image.png" contenteditable="false"><br></p><p><img src="/download/manual/getImage/2233" alt="image.png" contenteditable="false"><br></p><p>AGENT PAY  STOP </p><p><img src="/download/manual/getImage/2234" alt="image.png" contenteditable="false"><br></p>

4.3.2.3. WPF에서 Integration 오류인 경우

4.3.2.5. Edge 브라우저 통신 실패인 경우

KIS정보통신(주)

개인정보처리방침