Hatena::ブログ(Diary)

tomoTakaの日記

2013-08-24

WebSocket Echo Client in WebView

I made WebSocket Echo Client on JavaFX before.(see here)
This time Web Scoket on WebView in JavaFX.
The code is very simple (see code 1). Using WebView and WebEngine, loading EchoClient.html(see code 2).
But when executing this on JavaFX7, it does not work. Nothing happen after clicking the open button, the close button nor the send button.
This problem was already reported in JavaFX jira.(F.Y.R here)
On the other hand, it works fine on JavaFX8.(see Figure 2)

code 1(EchoClientWebView.java)

public class EchoClientWebView extends Application{
    @Override
    public void start(Stage stage) throws Exception {
        BorderPane root = new BorderPane();
        root.setPadding(new Insets(10));
        WebView webView = new WebView();
        WebEngine engine = webView.getEngine();
        URL url = getClass().getResource("EchoClient.html");
        engine.load(url.toExternalForm());
        root.setCenter(webView);
        Label label = new Label();
        String javaVer = System.getProperty("java.version");
        label.setText(String.format("Echo Web Client (Java Version:%s)", javaVer));
        root.setTop(label);
        stage.setScene(new Scene(root, 300, 200));
        stage.show();
    }

code 2(EchoClient.html)

<!DOCTYPE html>
<html>
    <head>
        <title>Echo Client</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script>
            window.onload = function() {
                var ws;
                document.getElementById('open').onclick = function() {
                     ws = new WebSocket('ws://localhost:8080/ws/echo');
                     ws.onmessage = function(e){
                         document.getElementById('server').innerText = e.data;
                     };
                     document.getElementById('state').innerText = 'opened';
                };
                document.getElementById('close').onclick = function() {
                    if (ws !== undefined){
                        ws.close();
                        ws = undefined;
                        document.getElementById('state').innerText = 'closed';
                    };
                };
                document.getElementById('send').onclick = function() {
                    if (ws !== undefined){
                        var message = document.getElementById('message').value;
                        ws.send(message);
                        document.getElementById('message').value = '';
                    };
                };
            };
        </script>
    </head>
    <body>
        <p>
            <input type="button" id="open" value="open"/>
            <input type="button" id="close" value="close"/>
            <span id="state"></span>
        </p>
        <p>
            <input type="text" id="message"/>
            <input type="button" id="send" value="send"/>
        </p>
        <p id="server"></p>
    </body>
</html>

Figure 1(Java7)

f:id:tomoTaka:20130822073846p:image:w360

Java Version7

f:id:tomoTaka:20130822073714p:image:w480

Figure 2(Java8)

f:id:tomoTaka:20130822074401p:image:w360

Java Version8

f:id:tomoTaka:20130821081630p:image:w480

After having several hours for learning Gradle, I found that using Gradle is fun.
The Java plugin is very helpful(F.Y.R Chapter 23. The Java Plugin)
This project layout is based on the Java plugin.(see Figure 3)I just wanted to change the output resources place.You can customize the build.gradle.(see code 3)

Gradle Version

f:id:tomoTaka:20130822075406p:image:w360

code 3(build.gradle)

You can add some tasks like I add the dispRes task.(see Figure 4)

apply plugin: 'java'
sourceSets {
    main {
        output.resourcesDir = 'build/classes/main/client'
    }
}
manifest.mainAttributes("Main-class" : "client.EchoClientWebView")
task dispRes << {
    println sourceSets.main.output.resourcesDir;
}

Producing JAR file

f:id:tomoTaka:20130822073942p:image:w360

Figure 3(The File Tree)

I have created this application by using JavaFX before(see File Tree View Sample(Part 2) - tomoTakaの日記)
f:id:tomoTaka:20130822075711p:image:w540

Figure 4

Executing the dispRes task shows the location of resources.
f:id:tomoTaka:20130823074015p:image:w480

The code is heretomoTaka01/EchoClientWebView ? GitHub
just keep coding...

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/tomoTaka/20130824/1377298898