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)

Java Version7

Figure 2(Java8)

Java Version8

After having several hours for learning Gradle, I found that using Gradle is fun.
The Java plugin is very helpful(F.Y.R Chapter 45. 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

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

Figure 3(The File Tree)

I have created this application by using JavaFX before(see File Tree View Sample(Part 2) - tomoTakaの日記)

Figure 4

Executing the dispRes task shows the location of resources.

The code is heretomoTaka01/EchoClientWebView - Java - GitHub
just keep coding...