websocket実装のサンプル_技術三昧ブログ

ホーム » ブログ » 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")

♪ 当記事がお役に立ちましたらシェアして頂ければ嬉しいです。

1人

★ 当記事を閲覧の方は下記の【関連記事】も閲覧していました。

閲覧履歴(直近10件)

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

閉じる

websocket実装のサンプル_ブログ_zanmai.net

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