웹소켓 동기식 기능 가이드

이 화면은 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

템플릿 파일

• websocket_sync.xml
• websocket_sync.js
• 새창으로 실행

// "웹소켓 세션 연결" 이벤트 처리
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");
	}
}