hatenob

プログラムって分からないことだらけ

WebSocketの簡単なプログラム

jboss/wildfly java

JavaEE7で採用されたWebSocketの簡単なプログラムを書いてみました。
chanko/chanko-web at master · nobrooklyn/chanko · GitHub

参考にしたのはコチラです。
WebSockets tutorial on Wildfly 8 - WebSockets - JBoss application server tutorials

環境

サーバサイド

簡単なプログラムであれば本当に簡単。

@ServerEndpoint(value="/echo")
public class EchoEndopoint {
	@OnMessage
	public String echo(String message) {
		return message;
	}
}

来たメッセージをそのまま返すだけ。
ServerEndpointアノテーションを付けてURLをマッピングし、warにしてデプロイすればOKです。

クライアントサイド

任意のタイミングでサーバに接続し、あとはイベント拾って処理をする。

<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
		<meta charset="utf-8"/>
		<title>Web Socket</title>
		<script type="text/javascript">
			var wsUri = "ws://localhost:8080/chanko-web/echo";
			var send;
			var receive;

			function send_message() {
				var message = textID.value;
				write(send, "Message Sent:" + message);
				websocket.send(message);
			}
			
			function write(section, message) {
				var pre = document.createElement("p");
				pre.style.wordWrap = "break-word";
				pre.innerHTML = message;

				section.appendChild(pre);
			}

			window.addEventListener("load", function(){
				send = document.getElementById("send");
				receive = document.getElementById("receive");

				websocket = new WebSocket(wsUri);
				websocket.onopen = function(evt) {
					write(send, "Connected to Endpoint!");
					write(receive, "&nbsp;")
				}

				websocket.onmessage = function(evt) {
					write(receive, "Message Received:" + evt.data);
				}

				websocket.onerror = function(evt) {
					write(send, '<span style="color:red;">ERROR:</span>' + evt.data);
					write(receive, "&nbsp;")
				}
			}, false);
		</script>
		<style>
			#send {
				border: 1em;
				width : 50%;
				float : left;
				background-color: #ffffee;
			}
			#receive {
				border: 1em;
				width : 50%;
				float : left;
				background-color: #ffeeff;
			}
		</style>
	</head>
	<body>
		<h1>Echo Websocket</h1>
		<hr/>
		<form>
			<input type="text" id="textID" name="message" value="Hello"/>
			<button type="button" onclick="send_message()">Send</button>
		</form>
		<div id="send"></div>
		<div id="receive"></div>
	</body>
</html>

接続先を「ws://～」としてonload時に接続しています。
あとはイベントハンドラを登録して完成。