WebSocketでEchoServerをつくる（Jetty8編）

WebSocket

WebSocketを試してみるために、WebSocketを利用したEchoServerをつくってみた。
サーバにはJettyを使うことにする。
なお、今回使ったのは以下。

サーバ：Jetty 8.1.8.v20121106
クライアント：Google Chrome 24.0.1312.52

で、サーバ側のソースコードはこんな感じ。

package test;

import java.io.IOException;

import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;

import org.apache.log4j.Logger;
import org.eclipse.jetty.websocket.WebSocket;
import org.eclipse.jetty.websocket.WebSocketServlet;

@WebServlet("/EchoServlet")
public class EchoServlet extends WebSocketServlet {
	private static final long serialVersionUID = 1L;
	private static final Logger logger = Logger.getLogger(EchoServlet.class);
       
	@Override
	public WebSocket doWebSocketConnect(HttpServletRequest request, String protocol) {
		return new EchoWebSocket();
	}

	private class EchoWebSocket implements WebSocket.OnTextMessage {
		private Connection connection; 

		@Override
		public void onOpen(Connection connection) {
			logger.info("Open");
			this.connection = connection;
		}

		@Override
		public void onClose(int closeCode, String message) {
			logger.info("Close");
		}

		@Override
		public void onMessage(String data) {
			logger.info("received:" + data);
			try {
				connection.sendMessage(data);
			} catch (IOException e) {
				e.printStackTrace();
			}
		}
		
	}
}

こっちはクライアント側のHTMLとJavaScript。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WebSocket Test</title>
</head>
<body>
	<div id="status">ステータス：未接続</div>
	<input type="text" id="msg">
	<button onclick="sendMessage()">send</button>
	<br>
	<textarea id="data" rows="10" cols="50" readonly></textarea>
	<br>
	<button onclick="closeConnection()">close</button>

	<script type="text/javascript">
		var con_status = document.getElementById("status")
		var msg = document.getElementById("msg");
		var data = document.getElementById("data");
		var ws = new WebSocket("ws://localhost:8080/WebSocket_Jetty/EchoServlet");

		ws.onopen = function(e) {
			con_status.textContent = "ステータス：接続済み";
		}

		ws.onmessage = function(e) {
			var message = e.data;
			data.textContent += message + "\n";
		}

		ws.onclose = function(e) {
			con_status.textContent = "ステータス：未接続";
		}

		function sendMessage() {
			ws.send(msg.value);
			msg.value = "";
		}

		function closeConnection() {
			ws.close();
		}
	</script>
</body>
</html>

手抜きのソースコードだけど、とりあえず動いた！