ホーム » ブログ » websocket実装のサンプル
このエントリーをはてなブックマークに追加
@2014/06/06
Html5サポートするブラウザでwebsocket実装のサンプル、フロートページにはhtmlとjavascriptだけで、ウェブサーバにはJavaで実現する。
ここではwebsocketDemoプロジェクトを例として解説する。

サンプルの挙動の流れ:
①クライアントページを開く際に、WEBサーバーと接続を立つ
②クライアントからWEBサーバーへお問合せにする。
③WEBサーバを回答する
④クライアントを閉じったら、WEBサーバをその状況を把握する。

プロジェクトの構成:


クライアントページのソースコード:demo.html
<!DOCTYPE html>
<html>
<head>
<title>websocket demo application</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
	<div id="conn-status">
		WEBサーバーとの接続状態:
	</div>
	<hr>
	<div id="qa">
		ただ今、サイトの同時にオンラインユーザ数を教えていただけますか?
		<input type="submit" value="お問合せへ" onclick="start()" />
	</div>
	<div id="messages"></div>
	<script type="text/javascript">
		var webSocket = 
			new WebSocket('ws://localhost:8080/websocketDemo/demo');

		webSocket.onerror = function(event) {
			onError(event)
		};

		webSocket.onopen = function(event) {
			onOpen(event)
		};

		webSocket.onmessage = function(event) {
			onMessage(event)
		};

		// サーバーへhelloメッセージを送る
		function start() {
			webSocket.send('hello');
			return false;
		}
		// 
		function onOpen(event) {
			$("#conn-status").append('<em>接続しました。</em>');
		}
		
		function onMessage(event) {
			document.getElementById('messages').innerHTML 
				+= '<br />' + event.data;
		}

		function onError(event) {
			alert(event.data);
		}


	</script>
</body>
</html>

WEBサーバ側のJavaコード:WebSocketDemo.java
package me.matao.websocket.demo;

import java.io.IOException;
import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;

@ServerEndpoint("/demo")
public class WebSocketDemo {

	@OnMessage
    public void onMessage(String message, Session session) 
    	throws IOException, InterruptedException {
		
		// クライアントからのmessage内容をプリントアウト
		System.out.println("Received: " + message);
		
		// Send the first message to the client
		session.getBasicRemote().sendText("ただ今サイトオーナーに聞いてみますので、すぐに回答します。<br>");
		int sentMessages = 0;
		while(sentMessages < 2){
			Thread.sleep(3000);
			session.getBasicRemote().
				sendText("ただ今オンラインユーザ数は: " 
					+ (sentMessages+5) + "人です。");
			sentMessages++;
		}
		Thread.sleep(2500);
		session.getBasicRemote().sendText("新しいアクセスしてきたユーザは<b>スマホ</b>ユーザです。");
		
		// Send a final message to the client
		Thread.sleep(2500);
		session.getBasicRemote().sendText("<em><h3>END</h3></em><hr>");
    }
	
	@OnOpen
    public void onOpen () {
        System.out.println("クライアント接続した。");
    }

    @OnClose
    public void onClose () {
    	System.out.println("クライアント切りました。");
    }
}

実行結果:
①クライアント初期画面


②クライアント実行結果画面


③webサーバローグ


[●ポイント]
①demo.htmlページの
var webSocket = new WebSocket('ws://localhost:8080/websocketDemo/demo');
②WebSockentDemo.java側の
@ServerEndpoint("/demo")


♪ 当記事がお役に立ちましたらシェアして頂ければ嬉しいです。
0人
このエントリーをはてなブックマークに追加


◎zanmai.netサイト記事の転載・複製(コピー)は、zanmai.netへのリンクであることを明記してください!
◎本記事URL: http://www.zanmai.net/blog/data/206.html

お名前:

 

EMAIL:

 

URL:

 

認証コード:

zanmai.net-safecode

 


※会員の方は認証コードを要らないから、新規登録をオススメ!

アーカイブ @zanmai.net
check