====== 웹소켓 동기식 기능 가이드 ======
이 화면은 WebSocket 컴포넌트 동기식 세션 연결 및 데이터 송/수신 기능 샘플 화면이다.
자바스크립의 Promise 오브젝트를 사용하는 방법인 async, await 문법(ECMAScript (ECMA-262)을 사용한다.
동기 방식 API 함수를 호출하는 함수는 async function이어야하며, await 문법을 이용해서 동기 방식 API를 호출해야 한다.
동기 방식 API는 IE에서는 지원되지 않는다.
관련 API로 opensync, sendrecv가 있다.
관련 이벤트로 on_open, on_message, on_error, on_close가 있다.
===== 예시 =====
템플릿 위치: /HTML5/COMPONENT/WEBSOCKET/websocket_sync
템플릿 파일
* [[xf5projecthome>template/screen/HTML5/COMPONENT/WEBSOCKET/websocket_sync.xml|websocket_sync.xml]]
* [[xf5projecthome>template/screen/HTML5/COMPONENT/WEBSOCKET/websocket_sync.js|websocket_sync.js]]
* [[xf5projecthome>template/template.html?xframe_screen_url=/HTML5/COMPONENT/WEBSOCKET/websocket_sync|새창으로 실행]]
echo '';
echo '';
echo '';
==== 화면 스크립트 ====
// "웹소켓 세션 연결" 이벤트 처리
function ws_on_open(objInst)
{
screen.alert("웹소켓 on_open> 세션 연결됨");
}
// "웹소켓 세션 해제" 이벤트 처리
function ws_on_close(objInst, nCode, strReason, wasClean)
{
screen.alert("웹소켓 on_close> 세션 해제됨" + "\n" +
"code = [" + nCode + "]\n" +
"reason = [" + strReason + "]\n" +
"wasClean = " + wasClean);
}
// "웹소켓 에러 발생" 이벤트 처리
function ws_on_error(objInst)
{
screen.alert("웹소켓 on_error> 에러 발생");
}
// "웹소켓 데이터 수신" 이벤트 처리
function ws_on_message(objInst, strMessage)
{
this.fldRecvData.settext(strMessage);
}
// "세션 연결" 버튼 이벤트
function btnConnect_on_mouseup(objInst)
{
this.ws.open(this.fld_websocket_server_addr.gettext());
}
// "동기 방식 세션 연결" 버튼 이벤트
async function btnConnectSync_on_mouseup(objInst)
{
var ret;
// 오류가 발생할 수 있기 때문에 반드시, try/catch 구문을 사용해야 함
try {
// opensync API 호출시 "on_open", "on_error", "on_close" 이벤트는 발생하지 않는다.
// opensync API 함수 호출의 리턴값을 통해서 세션 정상 연결 여부를 구한다.
// 세션이 연결된 경우, true값이 리턴된다.
factory.consoleprint("opensync> before opensync");
ret = await this.ws.opensync(this.fld_websocket_server_addr.gettext(), 5000);
factory.consoleprint("opensync> after opensync, ret = " + ret);
if (ret == true) {
factory.consoleprint("opensync> websocket open success");
}
else {
factory.consoleprint("opensync> websocket open fail");
}
}
catch (e) {
factory.consoleprint("opensync> after opensync, error = " + e.message);
screen.alert("opensync> after opensync, error = " + e.message);
}
}
// "동기 방식 데이터 송수신" 버튼 이벤트
async function btnSendRecv_on_mouseup(objInst)
{
var recv_data;
// 오류가 발생할 수 있기 때문에 반드시, try/catch 구문을 사용해야 함
try {
// sendrecv API 호출시 "on_message", "on_error" 이벤트는 발생하지 않는다.
// ("on_close" 이벤트는 발생한다.)
// sendrecv API 함수 호출의 리턴값을 통해서 수신한 데이터 값을 구한다.
factory.consoleprint("sendrecv> before sendrecv");
recv_data = await this.ws.sendrecv(this.fldSendData.gettext(), 5000);
factory.consoleprint("sendrecv> after sendrecv");
// 수신한 데이터를 표시
factory.consoleprint("sendrecv> data length = " + recv_data.length);
this.fldRecvData.settext(recv_data);
}
catch (e) {
factory.consoleprint("sendrecv> after sendrecv, error = " + e.message);
screen.alert("sendrecv> after sendrecv, error = " + e.message);
}
}
// "해제" 버튼 이벤트 처리
function btnClose_on_mouseup(objInst)
{
this.ws.close();
}
// "수신 데이터 초기화" 버튼 이벤트 처리
function btnClear_on_mouseup(objInst)
{
this.fldRecvData.settext("");
}
// "데이터 송신" 버튼 이벤트 처리
function btnSend_on_mouseup(objInst)
{
var ret;
ret = this.ws.send(this.fldSendData.gettext());
if (ret == false) {
screen.alert("send fail");
}
}