WebSocketでEchoServerをつくる(Jetty8編)
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>
手抜きのソースコードだけど、とりあえず動いた!