javaee7+websockets+Glassfish4가 대화방을 만듭니다

클라이언트와 서버간에 단일 두 방향 연결을 설정하므로 클라이언트가 서버에 요청을 보내면 서버가 처리 한 후 클라이언트와 클라이언트를 처리합니다. 이 시간이 다른 작업을 계속하기를 기다리는 동안 전체 프로세스는 비동기식입니다. 이 일련의 튜토리얼에서 사용자는 컨테이너 Glassfish 4의 Java EE 7에서 새로운 구문 분석 JSON API (JSR-353)를 사용하고 jQuery 및 부트 스트랩을 조합하여 사용하도록 안내됩니다. 이 기사에서는 독자가 HTML 5 WebSocket에 대한 특정 기본 원칙 지식을 갖추어야합니다.

렌더링

다음과 같이이 자습서를 완료 한 후 렌더링을 먼저 살펴 보겠습니다.

준비

우리는 JDK 7과 MAVN 3을 사용하여 라이브러리를 구축하고 있습니다.

 <properties> <instored.dir> $ {project.build.directory}/instored </endorsed.dir> <project.build.build.build.build.build.build.build.build.so urceencoding> </properties> <feencedies> <pectionency> <groupId> javax </groupid> <artifactid> javaee-api </artifactid> <bersion> 7.0 </version> <scope> 제공 </scope> </dependency> </de pendencies> <build> < 플러그인> <플러그인> <groupid> org.apache.maven.plugins </groupid> <artifactid> maven-compiler-plugin </artifactid> <bersion> 3.1 </version> <configuration> <sou rce> 1.7 </source > <garget> 1.7 </target> <compilerarguments> <enorsedDirs> $ {endorsed.dir} </endorsedDirs> </compilerArguments> </configuration> </plugin> <plugin> <groupid> org.apache.maven.plug </groupid> <trifactid> maven-war-plugin </artifactid> <bersion> 2.3 </version> <configuration> <feaLonMissingWebXml> false </failonMissingWebXml> </configurati on> </plugin> <groupId> org.apache

동시에 Glassfish 4를 사용하려면 다음 플러그인을 추가해야합니다.

 플러그인> <groupid> org.glassfish.embedded </groupid> <artifactid> maven-embedded-glassfish-plugin </artifactid> <bersion> 4.0 </version> <confi guration> <GoalPrefix> Embledded-Glassfish </goalprefix> <app> $ {basedir}/target/$ {project.artifactid}-$ {project.version} .war </app> <autodelete> true </autodelete> <port> 8080 </port> <name> $ { Project .ArtifActID} </name> <contextroot> hascode </contextroot> </configuration> <executions> <executions> <Goal> <Goal> 배포 </goal> </gover> </exe cution> </executions> </ 플러그인>

WebSocket의 종말점 설정

다음과 같이 서버 webSocket의 코드를 먼저 살펴본 다음 추가 분석을 수행하겠습니다.

 com.hascode. WebSocket. decoders = chatmessagedeCoder.class) public class chatendpoint {private final logger logger.getLogger (getClass (). getName ()); {log. String Room = (String) session.getUserProperties (). get ( "room"); ). get ( "room")) {s.getBasicRemote (). sendObject (chatMessage)} catch (ioxception e) {log.log (level.warning, onmessage e); }}

다음은 위 코드를 분석합니다.

@serverendpoint를 사용하여 값이 URL을 지정하고 JAX-RS에 사용되는 것처럼 PathParams 매개 변수를 사용할 수있는 새 엔드 포인트를 정의하십시오.

따라서 "/chat/{room}"값을 통해 사용자는 다음 URL을 통해 채팅방에 연결할 수 있습니다 : ws : //0.0.0.0 : 8080/hascode/chat/java

javax.websocket.server.pathparam을 사용하여 엔드 포인트의 수명주기 콜백 메소드에서 매개 변수로 매개 변수로 주입 할 수 있습니다.

또한 서버 및 클라이언트 측에서 데이터를 전송하는 데 사용되는 DTO 클래스를 사용하기 때문에 인코딩 및 디코딩 클래스를 사용하려고합니다.

사용자가 처음으로 서버에 연결하고 채팅방에 들어가기 위해 방 번호를 입력하면 객실 번호가 매개 변수 형태로 제출물에 주입되며 값은 세션을 사용하여 사용자의 속성 맵에 저장됩니다. getUserProperties.

채팅 참가자가 TCP 연결을 통해 정보를 서버로 보내면 모든 열린 세션을 통해 루프가 있고 각 세션은 지정된 채팅방에 바인딩되며 인코딩 및 디코딩 된 정보를 수신합니다.

간단한 텍스트 정보 나 정보를 이진 형식으로 보내려면 session.getBasicRemote (). sendBinary () 또는 session.getBasicRemote (). sendText ()를 사용할 수 있습니다.

다음으로 정보 전송 엔티티 (DTO : 데이터 전송 객체)를 나타내는 데 사용되는 코드를 살펴 보겠습니다.

 com.hascode.tutorial;

채팅 메시지의 변환

이 응용 프로그램에서는 채팅 정보와 JSON 형식을 변환하기 위해 인코딩 및 디코딩 클래스가 작성됩니다.

먼저 서버로 전달 된 채팅 정보를 ChatMessage Entity 클래스로 변환하는 디코딩 클래스의 구현을 먼저 살펴 보겠습니다. 여기에서 JSON 처리 (JSR353) 사양을위한 Java API는 JSON 형식 정보를 엔터티 클래스로 변환하는 데 사용됩니다.

 com.hascode.tutorial java.util.json; import javax.websocket.endpointconfig; 공개 클래스 chatmessagedecoder는 decoder.text.text <chatmessage> {@override public void init (final endpoint config) {} @override public void destroy () {} @override public chatmessage decode (최종 문자열 textmessage). Decodeexception {chatmessage chatmessage (); getString ( "sender").

인코딩 클래스의 코드를 살펴 보겠습니다.이 클래스는 ChatMessage 클래스를 JSON 형식으로 변환합니다.

 com.hascode.tutorial; void init (Final EndpointConfig Config) {} @override public void destroy () {} @override public string encode (Final ChatMessage chatmessage)는 enco deexception {return json.createobjectBuilder () .add ( "message", chatmessage.getmessage (). ). add add ( "sender", chatmessage.getSender ()) .add ( "수신", chatmessage.getReceived (). build () .toString ()};

여기서 JSR-353의 강력한 힘을 볼 수 있습니다.

Bootstrap 및 Javacsript를 통해 간단한 클라이언트를 구축하십시오

마지막으로, 우리는 유명한 부트 스트랩, jQuery 프레임 워크 및 JavaScript를 종합적으로 사용하여 간단한 클라이언트를 설계합니다. SRC/Main/Weapp 디렉토리에 새 Index.html 파일을 만듭니다. 코드는 다음과 같습니다.

 <! doctype html> <html lang = "en"> <head> [..] var wsocket = "ws : //0.0.0.0 : 8080/hascode/chat/"; var $ 메시지; var room = ''; ); // 기본 API var $ messageline = $ ( '<tr> <td>' + msg.received + '</td> <td>' + msg.sender + '</td> <td>' + msg .message + '</td> </tr>'); $ chatwindow.append ($ messageline); ","발신자 ":" ' + $ nickname.val () +' ","수신 ":" "} '; wsocket.send (msg); $ message.val (' '). focus ();} 함수 ConnectTochatserver () {room = $ ( '#Chatroom 옵션'). val (); $ chatwindow.empty ( '. chat-signin'); function () {$ nickname ( '#nickname'); $ $ nickname.focus (); + $ nickname.val () + " + room); }); $ ( '#do-chat'). 제출 (evt) {evt.preventDefault (); sendMessage ()}). click (function () {Leaveroom (Leaveroom); ) : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : form> <h2> 채팅 사인 in </h2> <label for = "nickname"> nickname </label> <input type = "text"placeholder = "닉네임"id = "닉네임"> <div> <label for = "chatroom">Chatroom</label> <select size="1" id="chatroom"> <option>arduino</ : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : 옵션> 옵션> java </옵션> <sollite> groovy </옵션> <sollite> scala </옵션> </select> </div> <button type = "제출"id = "enterroom "> 로그인 </button> </form> </div> <!-/컨테이너-> <div> <form id ="do-Chat "> <h2> </h2> <table id =" 응답 "> </ table> <fieldset> <Legend> 메시지를 입력하십시오. : 60px "/> <input type ="제출 "value ="메시지 보내기 "/> <버튼 유형 ="버튼 "id ="Leave-room "> 방지 방> </div> </fieldset> < /양식> </div> </body> </html>

위의 코드에서 다음 사항에주의하십시오.

JavaScript 측면에서 WebSocket을 호출하려면 다음과 같은 방식으로 연결을 시작해야합니다. ws : // ip : port/context_path/endpoint_url eg ws : //0.0.0.0 : 8080/hascode/chat/java

var wsocket = new WebSocket ( 'ws : //0.0.0.0 : 8080/hascode/chat/java')을 사용하여 WebSocket 연결을 생성하는 방법은 매우 간단합니다.

서버에서 반환 된 정보를 얻으려면 콜백 함수 wsocket.onmessage에서 반환 정보를 얻는 해당 방법 만 설정하면됩니다.

wsocket.send ()를 사용하여 WebSocket 메시지를 서버로 보내십시오. 여기서 보낼 수있는 메시지는 텍스트 또는 이진 데이터 일 수 있습니다.

연결을 닫으려면 wsocket.close ()가 사용됩니다.

마지막으로 MVN 패키지 내장 Glassfish : Run을 통해 코드를 배포 한 다음이 기사의 시작 부분에서 스크린 샷의 효과를 볼 수 있습니다.

위는 Javaee7, Websockets 및 Glassfish4를 사용하여 구현 된 채팅방입니다.