読者です 読者をやめる 読者になる 読者になる

わさび唐辛子

いざという時のための備忘録

【Java】WebSocketでとりあえず接続してみる

JavaでWebSocket通信サンプル

サンプルを実装してみる。

ゼロからなのでまずは環境作りから。

 

1.Eclipseでプロジェクトを作成

この辺はさっさと。

f:id:louvre24:20150118215640j:plain

f:id:louvre24:20150118215653j:plain

f:id:louvre24:20150118215658j:plain

f:id:louvre24:20150118215704j:plain

f:id:louvre24:20150118215710j:plain

 

2.サーバサイトの実装

 

最低限のコードのみ。

package test.websocket;

import javax.websocket.CloseReason;
import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;

/**
* @ServerEndpointを付与されたクラスがサーバエンドポイントとなる
* valueでWebSocket接続するためのURLを指定
*/
@ServerEndpoint(value = "/testWS/SampleWebSocket")
public class SampleWebSocket {

    /**
    * @OnMessageを付与するとメッセージを受信できる
    * @param text メッセージ
    * @return クライアントへの応答内容
    */
    @OnMessage
    public String onMessage(String text, Session session) {
        return "Return:" + text;
    }

    /**
    * @OnOpenを付するとコネクションの接続時に呼び出される
    * @param session
    */
    @OnOpen
    public void open(Session session) {
        System.out.println("/* コネクションの接続時に呼び出される */");
    }

    /**
    * @OnCloseを付与するとコネクションの切断時に呼び出される
    * @param c
    */
    @OnClose
    public void close(CloseReason c) {
        System.out.println("/* コネクションの切断時に呼び出される */");
    }

    /**
    * @OnErrorを付与すると例外発生時に呼び出される
    * @param t
    */
    @OnError
    public void getError(Throwable t) {
        System.out.println("/* 例外発生時に呼び出される */");
    }
}

 

3.次はクライアントサイド

 

この辺はとても苦手なので、人様のソースを使わせていただく。

http://dukelab.hatenablog.com/entry/2014/02/23/145656

 

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>WS_Demo</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <form action="javascript:void(0);">
            <input type="text" id="msg" size="20"> 
            <input type="button" id="connect" value="接続" onclick="WS_Demo.connect();">
            <input type="button" id="send" value="通信" onclick="WS_Demo.send();">
            <input type="button" id="close" value="閉じる" onclick="javascript:window.open('about:blank','_self').close();">
        </form>
        <div id="msgbox" style="border-style: solid;width: 500px;height: 400px"></div>
    </body>
</html>

JavaScript

WS_Demo = {};
(function(d) {
    function $(query) {
        return document.querySelector(query);
    }
    function printMessage(msg) {
        $("#msgbox").innerHTML += "<div>" + msg + "</div>";
    }
    d.connect = function() { 
        var ws = new WebSocket("ws://サーバURL:8080/sampleForWS/testWS/SampleWebSocket");
        ws.onmessage = function(event) {
            printMessage("Server : " + event.data);
        };
        d.webSocket = ws;
        $("#connect").disabled = true;
        $("#send").disabled = false;
    };
    d.send = function() {
        var msg = $("#msg").value;
        d.webSocket.send(msg);
        printMessage("Client : " + msg);
    };
}) (WS_Demo);

 

4.試してみる

 

画面を呼び出して、接続する。

f:id:louvre24:20150118215722j:plain

 

コンソールを確認。

f:id:louvre24:20150118215729j:plain

 

次に文字列を送信。サーバとの通信に成功したらしい。

f:id:louvre24:20150118215737j:plain

 

最後に、閉じるボタンを押してからコンソールを確認。

f:id:louvre24:20150118215747j:plain

 

今度はサーバからプッシュしてブラウザに表示させるサンプルに挑戦。

広告を非表示にする