CMJavaSocketBridge/examples/basic_client.html at master · CustomizedExcellenceStudioLLC/CMJavaSocketBridge · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<html>
    <head>
        <!-- 'cuz we love nice things -->
        <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
        <style type="text/css">
            .rlegend {
                text-align: right;
            }
            .console { list-style-type: none; margin: 0; padding: 10px; }
            .console li { padding: 5px 10px; }
            .console li:nth-child(odd) { background: #eee; }
        </style>
        <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script src="../js/jsbhandler.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                //
                // Example Javascript client code of usage
                //

                // Retrieve Singleton handler
                var jsbhandler = jsb.handler();

                $(jsbhandler).on("error", function(event, err) {
                    console.error(err[0]);
                });

                // Wait for jsbhandler to initialize
                $(jsbhandler).on("ready", function() {
                    $(jsbhandler).on("clientRegistered", function(event, client) {

                    });

                    // fire up some action on the page
                    $("#connectfrm").on("submit", function() {
                        var client = jsbhandler.getClient("homeClient");

                        try {
                            if(client.isConnected)
                                client.disconnect();
                            else
                                client.connect();
                        } catch(err){
                            console.warn("connect err:" + err.message);
                        }

                        return false;
                    });

                    $("#sendfrm").on("submit", function() {
                        if(typeof client1 !== 'undefined') {
                            var m = $("#message").val();
                            client1.send(m);
                            $("#console").append($('<li>').text("Sent: " + m));
                            $("#message").val('');
                        } else {
                            console.warn("client cannot be found...");
                        }

                        return false;
                    });

                    // Create a client on the handler
                    var client1ID = "homeClient";
                    var client1 = jsbhandler.registerClient(client1ID, "localhost", 10100);
                    // wait for connection
                    $(client1).on("connected", function() {
                        // display connection state for fun
                        $("#connectionState").text( "Conntected" );
                        $("#connect").text("Disconnect"); // change button label

                        // just so we know display current connection's duration with refresh-interval of 1000ms
                        var timeCheck = setInterval(function() {
                            $("#connectionTime").text(" " + client1.connectionTime() + " sec" );
                        }, 1000); // little less then a second - to be certain

                        // Listen for disconnect event
                        $(client1).on("disconnected", function() {
                            // reset connection state flag
                            $("#connectionState").text( "Disconnected" );
                            $("#connectionTime").text("");
                            // change button label
                            $("#connect").text("Connect");
                            // kill further time checks
                            clearInterval(timeCheck);
                        });

                        // Listen for data event
                        $(client1).on("readData", function(event, data) {
                            // simply append data to repsonse list
                            $("#console").append($('<li>').text("Received: " + JSON.stringify(data)));
                        });
                    });

                    $(client).on("error", function(event, error) {
                        console.error(error[0] + "\n" + error[1]);
                    });
                });
            });

        </script>
    </head>
    <body>
        <h1>CMJavaSocketBridge Basic Example</h1>
        <div class="pure-g">
            <div class="pure-u-2-5">
                <form id="connectfrm" action="" class="pure-form pure-form-stacked">

                        <legend><span id="connectionState">Disconnected</span><span id="connectionTime"></span></legend>
                        <button id="connect" class="pure-button pure-button-primary">Connect</button>
                </form>

                <form id="sendfrm" action="" class="pure-form pure-form-stacked">
                        <label for="message">Data to send:</label>
                        <textarea id="message" placeholder='{"test" : "json"}' cols="45" rows="5"></textarea>
                        <button id="send" class="pure-button pure-button-primary">Send</button>
                </form>
            </div>
            <div class="pure-u-3-5">
                <form action="" class="pure-form pure-form-stacked">
                    <legend class="rlegend">Console</legend>
                </form>
                <ul id="console" class="console"></ul>
            </div>
        </div>
        <applet id="CMJavaSocketBridge" archive="../java/dist/CMJavaSocketBridge.jar" code=com.cmexc.socketbridge.CMJSocketBridge.class width="1" height="1" mayscript></applet>
    </body>
</html>