14장. 자카르타 WebSocket 애플리케이션 생성
Jakarta WebSocket 프로토콜은 웹 클라이언트와 서버 간의 양방향 통신을 제공합니다. 클라이언트와 서버 간의 통신은 이벤트 기반이므로, 폴링 기반 방법과 비교하여 더 빠른 프로세싱과 더 작은 대역폭을 허용합니다. Jakarta WebSocket은 JavaScript API를 사용하는 웹 애플리케이션 및 자카르타 WebSocket 사양을 사용하는 클라이언트 Jakarta WebSocket 엔드포인트에서 사용할 수 있습니다.
연결이 먼저 HTTP 연결로 클라이언트와 서버 간에 설정됩니다. 그런 다음 클라이언트는 Upgrade 헤더를 사용하여 자카르타 WebSocket 연결을 요청합니다. 모든 통신은 최소한의 데이터 오버헤드로 동일한 TCP/IP 연결을 통해 전이중됩니다. 각 메시지에는 불필요한 HTTP 헤더 콘텐츠가 포함되지 않으므로 Jakarta WebSocket 통신에는 더 작은 대역폭이 필요합니다. 결과적으로 애플리케이션에 적합한 대기 시간 통신 경로가 짧기 때문에 실시간 응답성이 필요합니다.
JBoss EAP Jakarta WebSocket 구현은 서버 엔드포인트에 대한 완전한 종속성 주입 지원을 제공하지만 클라이언트 엔드포인트에 Contexts 및 Dependency Injection 서비스를 제공하지는 않습니다.
자카르타 WebSocket 애플리케이션에는 다음과 같은 구성 요소 및 구성을 변경해야 합니다.
- Java 클라이언트 또는 자카르타 WebSocket이 활성화된 HTML 클라이언트. 다음 위치에서 HTML 클라이언트 브라우저 지원을 확인할 수 있습니다. http://caniuse.com/#feat=websockets
- 자카르타 WebSocket 서버 엔드 포인트 클래스.
- Jakarta WebSocket API에 종속성을 선언하도록 구성된 프로젝트 종속성입니다.
자카르타 WebSocket 애플리케이션 만들기
다음 코드 예제는 JBoss EAP와 함께 제공되는 websocket-hello 빠른 시작에서 가져온 것입니다. 연결을 열고 메시지를 전송하며 연결을 종료하는 Jakarta WebSocket 애플리케이션의 간단한 예입니다. 다른 기능을 구현하지 않거나 실제 애플리케이션에 필요한 오류 처리를 포함하지 않습니다.
JavaScript HTML 클라이언트를 만듭니다.
다음은 자카르타 WebSocket 클라이언트의 예입니다. 여기에는 다음과 같은 JavaScript 기능이 포함되어 있습니다.
-
connect(): 이 기능은 자카르타 WebSocket URI를 전달하여 자카르타 WebSocket 연결을 생성합니다. 리소스 위치는 서버 엔드포인트 클래스에 정의된 리소스와 일치합니다. 이 기능은 또한 open, onmessage가로채고 처리합니다., onerror 및 onclose에서 Jakarta WebSocket을 -
sendMessage(): 이 함수는 양식에 입력한 이름을 가져오고 메시지를 생성한 다음 WebSocket.send() 명령을 사용하여 전송합니다. -
disconnect(): 이 함수는 WebSocket.close() 명령을 실행합니다. -
displayMessage(): 이 함수는 페이지에 표시 메시지를 Jakarta WebSocket endpoint 메서드에서 반환한 값으로 설정합니다. displayStatus(): 이 기능은 자카르타 WebSocket 연결 상태를 표시합니다.예제: 애플리케이션
index.html코드<html> <head> <title>WebSocket: Say Hello</title> <link rel="stylesheet" type="text/css" href="resources/css/hello.css" /> <script type="text/javascript"> var websocket = null; function connect() { var wsURI = 'ws://' + window.location.host + '/websocket-hello/websocket/helloName'; websocket = new WebSocket(wsURI); websocket.onopen = function() { displayStatus('Open'); document.getElementById('sayHello').disabled = false; displayMessage('Connection is now open. Type a name and click Say Hello to send a message.'); }; websocket.onmessage = function(event) { // log the event displayMessage('The response was received! ' + event.data, 'success'); }; websocket.onerror = function(event) { // log the event displayMessage('Error! ' + event.data, 'error'); }; websocket.onclose = function() { displayStatus('Closed'); displayMessage('The connection was closed or timed out. Please click the Open Connection button to reconnect.'); document.getElementById('sayHello').disabled = true; }; } function disconnect() { if (websocket !== null) { websocket.close(); websocket = null; } message.setAttribute("class", "message"); message.value = 'WebSocket closed.'; // log the event } function sendMessage() { if (websocket !== null) { var content = document.getElementById('name').value; websocket.send(content); } else { displayMessage('WebSocket connection is not established. Please click the Open Connection button.', 'error'); } } function displayMessage(data, style) { var message = document.getElementById('hellomessage'); message.setAttribute("class", style); message.value = data; } function displayStatus(status) { var currentStatus = document.getElementById('currentstatus'); currentStatus.value = status; } </script> </head> <body> <div> <h1>Welcome to Red Hat JBoss Enterprise Application Platform!</h1> <div>This is a simple example of a Jakarta WebSocket implementation.</div> <div id="connect-container"> <div> <fieldset> <legend>Connect or disconnect using websocket :</legend> <input type="button" id="connect" onclick="connect();" value="Open Connection" /> <input type="button" id="disconnect" onclick="disconnect();" value="Close Connection" /> </fieldset> </div> <div> <fieldset> <legend>Type your name below, then click the `Say Hello` button :</legend> <input id="name" type="text" size="40" style="width: 40%"/> <input type="button" id="sayHello" onclick="sendMessage();" value="Say Hello" disabled="disabled"/> </fieldset> </div> <div>Current WebSocket Connection Status: <output id="currentstatus" class="message">Closed</output></div> <div> <output id="hellomessage" /> </div> </div> </div> </body> </html>
-
자카르타 WebSocket 서버 엔드포인트를 만듭니다.
다음 방법 중 하나를 사용하여 Jakarta WebSocket 서버 끝점을 만들 수 있습니다.
-
프로그래밍 엔드 포인트: 엔드포인트는 엔드포인트 클래스를 확장합니다. -
주석이 있는 엔드 포인트: 엔드포인트 클래스는 주석을 사용하여 자카르타 WebSocket 이벤트와 상호 작용합니다. 프로그래밍 끝점보다 코딩하는 것이 더 간단합니다.
아래 코드 예제에서는 주석이 지정된 엔드포인트 접근법을 사용하고 다음 이벤트를 처리합니다.
-
@ServerEndpoint주석은 이 클래스를 자카르타 WebSocket 서버 엔드포인트로 식별하고 경로를 지정합니다. -
자카르타 WebSocket 연결이 열리면
@OnOpen주석이 트리거됩니다. -
메시지가 수신되면
@OnMessage주석이 트리거됩니다. 자카르타 WebSocket 연결이 닫히면
@OnClose주석이 트리거됩니다.예제: 자카르타 웹소켓 엔드 포인트 코드
package org.jboss.as.quickstarts.websocket_hello; import javax.websocket.CloseReason; import javax.websocket.OnClose; import javax.websocket.OnMessage; import javax.websocket.OnOpen; import javax.websocket.Session; import javax.websocket.server.ServerEndpoint; @ServerEndpoint("/websocket/helloName") public class HelloName { @OnMessage public String sayHello(String name) { System.out.println("Say hello to '" + name + "'"); return ("Hello" + name); } @OnOpen public void helloOnOpen(Session session) { System.out.println("WebSocket opened: " + session.getId()); } @OnClose public void helloOnClose(CloseReason reason) { System.out.println("WebSocket connection closed with CloseCode: " + reason.getCloseCode()); } }
-
프로젝트 POM 파일에서 자카르타 WebSocket API 종속성을 선언합니다.
Maven을 사용하는 경우 프로젝트
pom.xml파일에 다음과 같은 종속성을 추가합니다.예제: Maven 종속성
<dependency> <groupId>org.jboss.spec.javax.websocket</groupId> <artifactId>jboss-websocket-api_1.1_spec</artifactId> <scope>provided</scope> </dependency>
JBoss EAP와 함께 제공되는 빠른 시작에는 추가 자카르타 WebSocket 클라이언트 및 엔드포인트 코드 예가 포함되어 있습니다.