<< HTML5 기반의 Flowplayer(오픈소스 비디오 플레이어) 사용법 | Home | 클라우드 개요의 모든 것 >>

Java 기반의 HTML5 WebSockets 맛보기

HTML5 WebSocket client and server implementation written in Java

Java로 서버에서 데몬을 구동하고, 웹 프론트에서 AJAX 요청없이 WebSocket protocol을 사용하여 클라이언트와 서버간의 메세지를 주고 받는 기능을 구현해 보았습니다.

1. WebSockets 개요
WebSockets is a technique for two-way communication over one (TCP) socket, a type of PUSH technology. At the moment, it’s still being standardized by the W3C; however, the latest versions of Chrome and Safari have support for WebSockets.

2. 특징
 - HTML5 표준 기반으로 브라우저, 서버 모두 간단하게 구성 가능
 - 커넥션 기반
 - 양방향 풀 듀플렉스
 - Handshake 후 어느쪽이든 데이터 전송 가능
 - TextFrame : Type + UTF-8 String + Terminator

3. 지원 브라우저
 3.1 HTML5 지원 브라우저
   - Google Chrome 4+
   - Firefox 4.0 beta
   - Opera 11
   - Apple Safari 5.0.2

 3.2 SWF 브리지
   - Firefox 3.0+
   - Internet Explorer 6+
   - Opera 9+

 3.3 서버군
   - Jetty 7.0
   - lassFish 3.0
   - Caucho Resin 4.0.2

4. 서버 기능 구현
 - 각 언어별로 서버 기능을 구현하는데 도움을 줄 수 있는 오픈 소스들이 있으니 그 오픈소스들을 참고하여 만들면 된다. 아래는 관련 오픈 소스를 기술한다.
 - jWebSocket (Java), web-socket-ruby (ruby), Socket IO-node (node.js), Java-WebSocket
 - 저는 Java기반의 Java-WebSocket을 활용해서 간단하게 테스트 했음

5. 클라이언트 구현
 5.1 WebSocket Events
   - onopen: 소켓 오픈 시
   ws = new WebSocket("ws://mimul.com:8000/websocket/ws/server/8000"); 
   ws.onopen = function() {
        log("[WebSocket->onopen]\n");
    }
   - onmessage: 메세지 수신 시
   ws.onmessage = function(e) {
        log("[WebSocket->onmessage] Message: '" + e.data + "'\n");
    }
   - onclose: 소켓 자원을 닫을 시
    ws.onclose = function() {
        log("[WebSocket->onclose]\n");
        $("uri", "connect").invoke("enable");
        $("disconnect").disable();
        ws = null;
    }
 5.2 데이 송신
	$("sendForm").observe("submit", function(e) {
	    e.stop();
	    if (ws) {
	        var inputMessage = $("inputMessage");
	        ws.send(inputMessage.value);
	        log("[WebSocket->send] 송신: '" + inputMessage.value + "'\n");
	        inputMessage.value = "";
	        inputMessage.focus();
	    }
	}); 
 5.3 커넥션 중지
  $("disconnect").observe("click", function(e) {
      e.stop();
      if (ws) {
          ws.close();
      }
  }); 

6. 서버 구현
 - WebChatServer 서버만 샘플로 구현하고 나머진 Java-WebSocket 참고
public class WebChatServer extends WebSocketServer 
	implements Serializable 
{
	private static final long serialVersionUID = -1L;

	public WebChatServer(int port) {
		super(port);
	}
	
	@Override
	public void onClientOpen(WebSocket conn) {
		try {
            this.sendToAll(conn + " entered the room!");
        } catch (IOException ex) {
            ex.printStackTrace();
        }
        System.out.println(conn + " entered the room!");
	}

	@Override
	public void onClientClose(WebSocket conn) {
		try {
            this.sendToAll(conn + " has left the room!");
        } catch (IOException ex) {
            ex.printStackTrace();
        }
        System.out.println(conn + " has left the room!");
	}

	@Override
	public void onClientMessage(WebSocket conn, String message) {
		try {
            this.sendToAll(conn + ": " + message);
        } catch (IOException ex) {
            ex.printStackTrace();
        }
        System.out.println(conn + ": " + message);
	}

	
	public static WebChatServer startServer(int port) {
		WebChatServer server = new WebChatServer(port);
		server.start();
		System.out.println("ChatServer started on port: " + 
		   server.getPort());
		return server;
	}
	
	public static void stopServer(WebChatServer server) {
		System.out.println("Stopping ChatServer on port: " + 
		   server.getPort());
		try {
			server.stop();
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}
}

7. 데모
 - http://mimul.com/html5/websocket/chat.html

[참조 사이트]


Avatar: 장난ㅡㅍ-)/

Re: Java 기반의 HTML5 WebSockets 맛보기

이걸쓰면 ajax보다 뭐가 좋을까요?

Re: Java 기반의 HTML5 WebSockets 맛보기

 이거.... 2011년 11월 29일 현재... 뭐 지나면 나중이 되겠지요.

 

어떤 라이브러리가 되었든 handshake 단계에서 에러가 발생하여 소켓 접속이 되지 않습니다.

 

구 버전 handshkae header 값은

<pre style="word-wrap: break-word; white-space: pre-wrap; "> GET /demo HTTP/1.1 Host: example.com Connection: Upgrade Sec-WebSocket-Key2: 12998 5 Y3 1 .P00 Sec-WebSocket-Protocol: sample Upgrade: WebSocket Sec-WebSocket-Key1: 4 @1 46546xW%0l 1 5 Origin: http://example.com
<pre style="word-wrap: break-word; white-space: pre-wrap; "> 위와 같이 넘어오나.. <br type="_moz" /> <pre style="word-wrap: break-word; white-space: pre-wrap; "> 현재 크롬 브라우져에서 넘어오는 값은 <br type="_moz" /> <pre style="word-wrap: break-word; "><span class="Apple-style-span" style="white-space: pre-wrap;">upgrade : websocket connection : upgrade host : localhost:8111 sec-websocket-origin : http://localhost:8777 sec-websocket-key : pblj5vu/7cknwhoezib7cq== sec-websocket-version : 8 GET /echo 아래와 같이 넘어오는 군요... key Field가 1,2로 나뉘었다면 지금은 key값 하나만 있고.. 그렇습니다...<br type="_moz" /></span> <pre style="word-wrap: break-word; white-space: pre-wrap; "> 근데.. ietf 명세는 변화가 없군요... <br type="_moz" /> <pre style="word-wrap: break-word; white-space: pre-wrap; "> spec도 안보이고.. 어떻게 해야할지 몰라.. 보고만 있습니다~ 혹시 오픈소스 아시면 공유좀;;ㅎ

Avatar: juluia

Re: Java 기반의 HTML5 WebSockets 맛보기

xcellent tutorial! It is really helpful for me, as a java beginner. I want to use java to write a java barcode generator, which I saw from “http://www.onbarcode.com/tutorial/java-barcode-generation.html ”. It is easy-use, I want to write one like it. Do you have any good suggestions?

Avatar: YuJin

Re: Java 기반의 HTML5 WebSockets 맛보기

jWebSocket으로 WebSocket Server를 구축하고 싶은데요...

Java 설치하고 환경변수 잡아주고,

Tomcat 설치하고 환경변수 잡아주고,

jWebSocket Server, Client 압축풀고, 인터넷 뒤져서

데모실행을 시도했는데요.. 생각만큼 잘 안됐습니다.

제가 하고싶은건 데모는 아니구요

jWebSocket으로 양방향 통신을 하고 싶은데요...

jWebSocket의 서버 환경을 어떻게 셋팅하는지 간단하게나마 알려주시면

감사하겠습니다.

시간 나시면 좀 알려주세요..부탁드립니다.

Avatar: 미물

Re: Java 기반의 HTML5 WebSockets 맛보기

  http://java.dzone.com/articles/tomcat-websockets-html5 이거보시고 해보세요. Standalone 버전 말구요..

Avatar: 미물

Re: Java 기반의 HTML5 WebSockets 맛보기

웹 소켓은 XHR보다 대역폭을 적게 사용하는 장점으로 실시간 상호작용이 빈번하게 발생하는 웹 애플리케이션 개발에 사용하기 적합하긴 한데..WebSocket을 지원하는 브라우저가 제한적이어서 사용에 한계가 존재합니다. 이부분이 무리가 없다면 사용하셔도 될듯 하네요.

Add a comment Send a TrackBack