웹 브라우저 JavaScript 런타임은 기본적으로 단일 스레드 환경입니다. 그러나 HTML 표준을 통해 개발자는 웹 브라우저에서 주 스레드 및 백그라운드 스레드 (worker 스레드)에서 JavaScript를 실행할 수있는 웹 작업자 기능을 도입하여 웹 브라우저에서 다중 스레드 JavaScript 응용 프로그램을 구현할 수 있습니다.
이 기사에서는 Web Workers를 사용하여 JavaScript 웹 애플리케이션으로 Elektron WebSocket API를 구현하는 방법을 설명합니다. 주 스레드가 UI 상호 작용 이벤트를 처리하고 데이터를 표시하는 동안 Web Workers 스레드가 ADS WebSocket 서버와의 연결 논리를 처리 할 수 있습니다.
그림 -1 : 웹 작업자와 WebSocket 연결 다이어그램
* 참고 :이 API의 초기 버전은 배포 된 TREP 고객 만 사용할 수 있습니다 (즉, TREP 3.2를 설치 한 버전이 필요합니다).
WebSocket 개요
WebSocket 사양은 웹 페이지가 원격 호스트와의 양방향 통신을 위해 WebSockets 프로토콜을 사용할 수 있도록하는 API를 정의합니다. WebSocket 인터페이스를 소개하고 웹을 통해 단일 소켓을 통해 작동하는 전이중 통신 채널을 정의합니다. 이 스펙은 나중에 Python, Ruby, Go, Java 등 다른 클라이언트 기술 측면에도 적용됩니다.
그림 -2 : WebSocket 연결 다이어그램
웹 워커 개요
웹 작업자는 백그라운드에서 실행되는 브라우저 스레드 및 하나 이상의 JavaScript 스레드를 동시에 실행할 수 있습니다. 주요 자바 스크립트 애플리케이션 스레드는 이벤트 모델과 "postMessage()"함수를 통해 Workers 스레드 애플리케이션과 통신한다. postMessage() 함수는 단일 인수로 문자열 또는 JSON 객체를 사용할 수 있습니다.
그림 -3 : 웹 워커 통신 도표
아래 예제 코드를 참조하십시오.
Main.js :
let wk = new Worker("Workers.js"); //workers 객체 만들기 // Web Worker.js 파일에서 이벤트 / 메시지 받기 wk.addEventListener("message", function (oEvent) { console.log('Message from Workers: ', e.data); }, false); wk.postMessage('This is from Main.js'); //Worker.js에 메시지 보내기
Worker.js :
// Main.js 파일에서 이벤트 / 메시지 수신 self.addEventListener('message', function(e) { self.postMessage(e.data); }, false); self.postMessage('This is from Workers.js'); //Main.js에 메시지 보내기
웹 워커, 전용 워커 및 공유 워커에는 두 가지 유형이 있습니다. 이 예제는 전용 작업자와 함께 JavaScript 웹 브라우저 애플리케이션을 사용하여 Elektron WebSocket API를 구현하는 방법만을 다룹니다. 이 기사에서는 전용 작업자와 함께 JavaScript 웹 브라우저 애플리케이션을 사용하여 Elektron WebSocket API를 구현하는 방법에 대해서만 다룹니다.
지원되는 웹 브라우저
이 예제는 다음 웹 브라우저를 지원합니다 (지원되는 WebSocket 및 Web Workers 브라우저 기반)- 구글 크롬
- 모질라 파이어 폭스
- IE11
응용 프로그램 파일
웹 응용 프로그램에는 다음 예제 파일과 폴더가 있습니다.1. index.html : 애플리케이션 HTML 페이지
2. app/market_price_app.js : 애플리케이션 메인 파일
3. app/ws_workers.js : 애플리케이션 웹 작업자 파일
4. css/cover.css : 애플리케이션 CSS 파일
5. libs/jquery-3.2.1.min.js : jQuery 라이브러리 파일
6. bootstrap/css, bootstarp/fonts 및 bootstrap/js folders : 부트 스트랩 CSS 및 라이브러리 파일 폴더
7. node_modules 폴더 : 웹 서버 실행을위한 Node.js 및 Express.js 모듈의 폴더
8. server.js : 웹 서버 응용 프로그램 파일
9. package.json : Project npm 종속 파일
메시지 구조
market_price_app.js와 ws_worker.js 사이의 메시지는 JSON 형식으로 관리됩니다. JSON 속성 'command'를 사용하여 수신 메시지를 처리 할 대상을 지정합니다.{ 'commandObj': <JSON message for sending to ADS>, 'command': '<command>' }
market_price_app.js와 ws_workers.js 사이의 명령 값 목록은 다음과 같습니다.
1. 'connect': ws_workers.js에 ADS 서버와 WebSocket 연결을 설정하도록 알립니다.
2. 'login': ws_workers.js에 ADS 서버에 로그인 요청 메시지를 보내도록 알립니다.
3. 'requestitem': ws_workers.js에 ADS 서버에 항목 요청 메시지를 보내도록 알립니다.
4. 'closeitem': ws_workers.js에 ADS 서버에 항목 닫기 요청 메시지를 보내도록 알립니다.
5. 'pong': ws_workers.js에 Pong 메시지를 ADS 서버로 보내도록 알려줍니다.
6. '로그 아웃': ws_workers.js에 ADS 서버의 연결을 알리십시오.
7. 'incomingMsg': market_price_app.js에 웹 브라우저에 들어오는 데이터를 표시하도록 알립니다.
애플리케이션 코드 구현 세부 사항
이 기사에서는 Web Workers를 사용하여 Elektron WebSocket 애플리케이션을 구현하는 방법을 설명하는 market_price_app.js 및 ws_workers.js 파일에 중점을 둡니다.1. 첫째, "app"폴더에 JavaScript market_price_app.js 및 ws_workers.js 파일을 만듭니다.
2. market_price_app.js 및 ws_workers.js 파일에 모든 초기 필수 변수를 정의합니다. 모든 변수는 응용 프로그램 WebSocket 및 웹 작업자 정보를 유지하는 데 사용됩니다.
/**market_price_app.js**/ (function ($) { //Define variables var serverurl = '', username = '', itemID = 0, wk = new Worker("./app/ws_workers.js"); //workers 객체 만들기 const protocol = 'tr_json2'; const loginID = 1; })($); /**ws_workers.js**/ (function () { //WebSocket 및 프로토콜 변수 정의 let ws = null; //market_price_app.js에 기반 객체 응답 정의 let onMessage_response = { 'command': 'incomingMsg', 'msg': null }; })();
3. 그런 다음 서로간에 메시지를 수신하기 위해 두 파일에서 addEventListener() 함수 콜백을 작성합니다. addEventListener() 함수는 메시지의 데이터 및 메시지의 명령 등록 정보를 확인하여 작업을 확인합니다.
/**market_price_app.js**/ (function ($) { //Define variables ... //웹 작업자 ws_worker.js 파일에서 이벤트 수신 wk.addEventListener("message", function (oEvent) { let response = oEvent.data; //조작을 식별하는 커멘드 파라미터를 가져옵니다. let command = response.command; }, false); })($); /**ws_workers.js**/ (function () { //WebSocket 변수 정의 ... //market_price_app.js에서 메시지 수신 self.addEventListener('message', function (e) { let data = e.data; //조작을 식별하는 커멘드 파라미터를 가져옵니다. let command = data.command; }, false); })();
4. 그런 다음 ws_workers.js 파일에 필요한 모든 WebSocket 필수 함수를 정의합니다.
/**ws_workers.js**/ //WebSocket 연결 성공 확립 function onOpen(event) { //market_price_app.js에 연결 요청이 성공했다고 알립니다. } //WebSocket으로부터 수신 메시지 수신 function onMessage(event) { //들어오는 ADS 메시지를 market_price_app.js로 보냅니다. }
5. 다음으로 WebSocket 연결 논리를 구현합니다. market_price_app.js는 index.html 웹 페이지에서 ADS 서버 IP 주소 및 WebSocket 포트에 대한 사용자 입력을 수신 한 다음 market_price_app.js가 postMessage() 함수를 통해 연결을 설정하기 위해 'connect'명령을 사용하여 WebSocket URL을 ws_wokers.js 파일로 보냅니다. ws_workers.js는 WebSocket 연결을 설정하기 위해 WebSocket connect() 함수를 호출합니다.
/**market_price_app.js**/ $('#btnConnect').click(function () { serverurl = 'ws://' + $('#txtServerurl').val() + '/WebSocket'; connect(serverurl); }); //WebSocket 연결 설정 function connect(serverurl) { $('#commandsPre').html('ws = new WebSocket("' + serverurl + '", "' + protocol + '");'); let connectObj = { 'commandObj': { 'serverurl': serverurl, 'protocol': protocol }, 'command': 'connect' }; //웹 워커에게 메시지 보내기 wk.postMessage(connectObj); } /**ws_workers.js**/ //market_price_app.js에서 메시지 수신 self.addEventListener('message', function (e) { let data = e.data; //조작을 식별하는 커멘드 파라미터를 가져옵니다. let command = data.command; if (command === 'connect') { connect(data.commandObj); //WebSocket 연결 설정 } }, false); //WebSocket 연결 설정 및 모든 이벤트 함수 바인딩 function connect(commandObj) { ws = new WebSocket(commandObj.serverurl, commandObj.protocol); ws.onopen = onOpen; ws.onmessage = onMessage; ... }
6. 다음으로 ws_workers.js의 onOpen() 함수 콜백을 구현하여 WebSocket 연결 이벤트를 처리합니다. 응용 프로그램 성공이 ADS 서버에 연결되면이 onOpen() 함수는 market_price_app.js에 연결이되었음을 알리는 메시지를 보냅니다. market_price_app.js는 사용자에게이 연결 이벤트를 알리기 위해 웹 UI를 변경합니다.
/**ws_workers.js**/ function onOpen(event) { var onOpen_response = { 'command': 'connect', 'msg': 'Connected' }; self.postMessage(onOpen_response); } /**market_price_app.js**/ wk.addEventListener("message", function (oEvent) { let response = oEvent.data; //Get command parameter to identify operation let command = response.command; if (command === 'connect') { //WebSocket connection event processConnectionEvent(response); } }, false); function processConnectionEvent(response) { $('#btnConnect').html(response.msg); }
7. 사용자가 index.html 페이지에서 연결 버튼을 클릭하면 market_price_app.js는 로그인 명령을 만들기위한 사용자 이름을받습니다. market_price_app.js는 JSON 로그인 요청 메시지를 작성하고이 메시지를 ADS 서버로 보내기 위해 ws_workers.js로 보냅니다.
/**market_price_app.js**/ $(document).ready(function () { //connect //handle login button $('#btnLogin').click(function () { let username = $('#txtUsername').val(); sendLoginrequest(username); }); } //ADS WebSocket에 로그인 요청 메시지 보내기 function sendLoginrequest(username) { //로그인 요청 메시지 작성 let loginMsg = { 'ID': loginID, 'Domain': 'Login', 'Key': { 'Elements': { 'ApplicationId': '256', 'Position': '127.0.0.1' }, 'Name': '' } }; loginMsg.Key.Name = username; $('#commandsPre').html('Sending Login request message to Web Workers: WebWorkers.post(' + JSON.stringify(loginMsg, undefined, 2) + ');'); //웹 UI에서 JSON 로그인 요청 메시지 인쇄하기 let loginObj = { 'commandObj': loginMsg, 'command': 'login' } //웹 워커에게 로그인 메시지 보내기 wk.postMessage(loginObj); } /**ws_workers.js**/ //market_price_app.js에서 메시지 수신 self.addEventListener('message', function (e) { let data = e.data; //조작을 식별하는 커멘드 파라미터를 가져옵니다. let command = data.command; if (command === 'connect') { connect(data.commandObj); //WebSocket 연결 설정 } else { sendOMMmessage(data.commandObj); } }, false); //ADS WebSocket에 메시지 보내기 function sendOMMmessage(commandObj) { ws.send(JSON.stringify(commandObj)); }
8. 그런 다음 ws_workers.j 파일에 WebSocket onMessage() 함수를 구현하여 ADS WebSocket 서버에서 수신 메시지를 수신하고이를 market_price_app.js 파일로 전달합니다. market_price_app.js는이를 웹 UI의 해당 데이터를 표시하는 processData() 함수로 보냅니다.
/**ws_workers.js**/ //WebSocket으로부터 수신 메시지 수신 function onMessage(event) { let incomingdata = JSON.parse(event.data.toString()); //각 JSON 메시지를 반복하여 market_price_app.js로 보내십시오. for (let index = 0; index < incomingdata.length; index++) { onMessage_response.msg = incomingdata[index]; self.postMessage(onMessage_response); //market_price_app.js에 메시지 보내기 } } /**market_price_app.js**/ //웹 워커 ws_worker.js 파일에서 이벤트 수신 wk.addEventListener("message", function (oEvent) { let response = oEvent.data; //조작을 식별하는 커멘드 파라미터를 가져옵니다. let command = response.command; if (command === 'connect') { //WebSocket 연결 이벤트 processConnectionEvent(response); } else if (command === 'incomingMsg') { //ADS WebSocket에서 수신 메시지 수신 processData(response.msg); } }, false);
9. market_price_app.js 파일에 processData() 함수를 구현하여 들어오는 ADS JSON 메시지 (로그인, 데이터, 상태 등)를 웹 페이지에 표시합니다. 우리는 OMM 로그인 도메인에 대한 REFFRESH_RESP 메시지를 지원하기 위해 processData() 함수를 향상시키는 것으로 시작합니다.
/**market_price_app.js**/ //ADS WebSocket에서 수신 메시지 처리 function processData(data) { let msgtype = data.Type; //이전 메시지 지우기 $('#messagesPre').html(''); //수신 메시지가 REFRESH_RESP 인 경우 if (msgtype === 'Refresh') { if (data.Domain === 'Login') { $('#messagesPre').html('Receive: Login REFRESH_RESP:<br/>'); //로그인 Refresh_resp $('#messagesPre').html($('#messagesPre').html() + JSON.stringify(data, undefined, 2)); //REFRESH_RESP 표시 } } }
10. 이제 응용 프로그램은 ADS WebSocket 서버와의 연결을 설정하고 로그인 할 수 있습니다. 다음 단계는 시장 가격 데이터를 ADS 서버에 요청하는 것입니다. market_price_app.js 파일은 index.html 페이지에서 사용자 입력 항목 이름을 RIC 코드 형식 (선택적으로 서비스 이름)으로받은 다음 JSON 항목 요청 메시지를 작성하고 ws_workers.js 파일을 통해 ADS WebSocket 서버로 보냅니다.
/**market_price_app.js**/ $(document).ready(function () { $('#btnSubscribe').click(function () { let servicename = $('#txtServiceName').val(); let itemname = $('#txtItemName').val(); sendItemrequest(servicename, itemname); }); } //ADS WebSocket에 항목 요청 메시지 보내기 function item sendItemrequest(service, itemname) { //스트림 ID 생성, 1 (로그인) 일 수 없음 if (itemID === 0) { itemID = loginID + 1; } else { itemID += 1; } //시장 가격 요청 메시지 생성 let itemrequestMsg = { 'ID': itemID, 'Key': { 'Name': itemname, 'Service': service } }; let itemrequestObj = { 'commandObj': itemrequestMsg, 'command': 'requestitem' } //웹 워커에게 항목 요청 메시지 보내기 wk.postMessage(itemrequestObj); } /**ws_workers.js**/ //market_price_app.js에서 메시지 수신 self.addEventListener('message', function (e) { let data = e.data; //조작을 식별하는 커멘드 파라미터를 가져옵니다. let command = data.command; if (command === 'connect') { connect(data.commandObj); //WebSocket 연결 설정 } else { sendOMMmessage(data.commandObj); } }, false); //ADS WebSocket에 메시지 보내기 function sendOMMmessage(commandObj) { ws.send(JSON.stringify(commandObj)); }
11. ws_workers.js 파일은 WebSocket onMessage() 함수를 통해 들어오는 Market Price 메시지를 받습니다. ws_workers.js 파일은 이를 market_price_app.js의 processData() 함수에 전달한 다음 processData() 함수를 구현하여 시장 가격 도메인 메시지에 대한 수신 REFRESH_RESP 및 UPDATE_RESP 메시지를 지원합니다.
/**market_price_app.js**/ //ADS WebSocket에서 수신 메시지 처리 function processData(data) { let msgtype = data.Type; //이전 메시지 지우기 $('#messagesPre').html(''); //수신 메시지가 REFRESH_RESP 인 경우 if (msgtype === 'Refresh') { if (data.Domain === 'Login') { $('#messagesPre').html('Receive: Login REFRESH_RESP:<br/>'); //Login Refresh_resp } else { $('#messagesPre').html('Receive: Data REFRESH_RESP:<br/>'); //Data Refresh_resp } $('#messagesPre').html($('#messagesPre').html() + JSON.stringify(data, undefined, 2)); //Display REFRESH_RESP } else if (msgtype === 'Update') { //If incoming message is UPDATE_RESP $('#messagesPre').html('Receive: UPDATE_RESP:<br/>' + JSON.stringify(data, undefined, 2)); //Display Update_resp } }
12. 마지막 단계는 Ping 및 Pong 메시지를 처리하는 것입니다. Ping 및 Pong 메시지는 연결 상태를 모니터링하기 위해 ADS WebSocket 서버와 클라이언트 사이의 JSON 형식 ({"Type":"Ping"} 및 {"Type":"Pong"} 메시지)의 핸드 셰이크 메시지 입니다. ADS 서버는 주기적으로 Ping 메시지를 응용 프로그램에 보내고 응용 프로그램은받은 Ping 메시지에 대한 응답으로 Pong 메시지를 보내도록 준비해야합니다.
/**market_price_app.js**/ //ADS WebSocket에서 수신 메시지 처리 function processData(data) { let msgtype = data.Type; //Clear previous message $('#messagesPre').html(''); //If incoming message is REFRESH_RESP if (msgtype === 'Refresh') { //Handle Refresh message } else if (msgtype === 'Update') { //If incoming message is UPDATE_RESP //Handle Update message } else if (msgtype === 'Ping') { //If incoming message is PING (server ping) $('#messagesPre').html('Recieve Ping:</br>' + JSON.stringify(data, undefined, 2)); //Server Ping sendPong(); } } //Send { 'Type': 'Pong' } for acknowledge Server PING function sendPong() { let pongObj = { 'commandObj': { 'Type': 'Pong' }, 'command': 'pong' } //Send PONG message to Web Workers wk.postMessage(pongObj); $('#commandsPre').html('Sending Client Pong: ws.send(' + JSON.stringify({ 'Type': 'Pong' }, undefined, 2) + ');'); }
응용 프로그램 실행
응용 프로그램 소스 코드는 GitHub에서 사용할 수 있습니다. 다음 git 명령을 통해 얻을 수 있습니다. $>git clone git@github.com:TR-API-Samples/Article.EWA.JavaScript.WebWorkersApp.git이 예제 애플리케이션에는 followinng 라이브러리와 런타임이 필요합니다.
1. jQuery 3.2.1 JavaScript 라이브러리 (프로젝트에 포함)
2. 부트 스트랩 3.3.7 css 라이브러리 (프로젝트에 포함)
3. Node.js 런타임
자세한 내용은 소스 코드 프로젝트의 README.md를 확인하십시오.
이 예제를 실행하는 방법
첫째, 위의 git 명령을 통해 프로젝트를 가져온 다음 명령 프롬프트에서 npm install 명령을 실행하여 node_modules/라는 하위 디렉토리에 샘플을 실행하는 데 필요한 모든 종속성을 설치합니다.
컴퓨터가 프록시 서버 뒤에있는 경우 명령 프롬프트에서 다음 명령을 통해 Node.js가 직접 HTTP 연결 대신 프록시를 사용하도록 구성해야합니다. set https_proxy=http://<proxy.server>:<port>
명령 프롬프트에서 node server.js 명령을 실행하여 HTTP 포트 8080에서 웹 서버를 시작합니다.
웹 브라우저(IE11, Chorme 및 Firefox)에서 http://localhost:300/index.html을 엽니다. 브라우저에서 index.html을 열 때. 응용 프로그램 페이지가 웹 브라우저에 표시됩니다.
그림 -6 : 사용자 입력을받는 응용 프로그램 페이지
그런 다음 ADS WebSocket IP 및 포트를 입력하고 연결을 클릭하여 연결을 설정하십시오. 성공적으로 연결되면 연결 단추 레이블이 "연결됨"으로 변경됩니다.
그림 -7 : WebSocket 응용 프로그램이 이제 ADS와의 연결을 설정합니다.
그런 다음 사용자 이름을 입력하고 로그인 버튼을 클릭하여 ADS에 로그인 요청 메시지를 보냅니다.
그림 -8 : 애플리케이션이 이제 ADS 서버로 로그인되었습니다.
그런 다음 항목 이름을 RIC 코드 형식 (선택적으로 서비스 이름)으로 입력하고 가입을 클릭합니다. 이 페이지는 나가는 요청 메시지와 들어오는 새로 고침, ADS WebSocket 서버의 메시지 업데이트를 표시합니다.
마지막으로 응용 프로그램은 ADS에서 Ping 핸드 셰이크 메시지를 받으면 자동으로 Pong 메시지를 ADS 서버로 보냅니다.
참고 문헌
자세한 내용은 다음 자료를 확인하십시오.Thomson Reuters Developer Community 웹 사이트의 Elektron WebSocket API 페이지
HTML5 webWorker 웹 사이트.
WebSocket 기술 웹 사이트.
이 기사 또는 Elektron WebSocket API 페이지와 관련된 질문은 개발자 커뮤니티 Q & A 포럼을 이용하십시오.
댓글 없음:
댓글 쓰기