DevSummit2014-realtime/simplewebsocket.html at master · jcardonadcdev/DevSummit2014-realtime · 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
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test Web Sockets</title>
    <script>
      var connection,
        msgcount = 0;

      function connectSocket(){
        //check if browser supports web sockets
        if ("WebSocket" in window){
          try{
            //get web socket url and make new WebSocket using url entered in textbox
            var host = document.getElementById("txtSocketHost").value;
            connection = new WebSocket(host);

            //handle web socket's events
            connection.onopen = function(){
              setUI(true);
              addToLog("Opened Web Socket");
            };
            connection.onclose = function(m){
              setUI(false);
              addToLog("Closed web socket");
              msgcount = 0;
            };
            connection.onerror = function(err){
              setUI(false);
              msgcount = 0;
              addToLog("Error: " + err);
            };

            /* onmessage gets an object that has a data property that contains the actual message.
             *
             * The message from GeoEvent processor should be an array of feature JSON
             */
            connection.onmessage = function(e){
              var msg = JSON.parse(e.data);
              addToLog("Message received: " + JSON.stringify(msg));
            };
          }
          //if using Internet Explorer and a Security Error is thrown, try using the fully qualified server name in the websocket url
          catch(err){
            addToLog("Error creating websocket connection: " + err.toString());
          }
        }
        else{
          addToLog("WebSocket not supported");
        }
      }

      function disconnectSocket(){
        connection.close();
      }

      function clearLog(){
        txtLog.value = "";
      }

      function addToLog(msg){
        txtLog.value = txtLog.value + "\n\n" + msgcount + ": " + msg;
        msgcount++;
      }

      //change UI to reflect connected or disconnected state
      function setUI(connected){
        document.getElementById("cmdDisconnect").disabled = ! connected;
        document.getElementById("cmdConnect").disabled = connected;
        document.getElementById("txtSocketHost").style.backgroundColor = connected ? "#008000" : "#ff0000";
      }
    </script>
  </head>
  <body>
    <div style="width: 100%; position:relative; padding-bottom: 5px">
      <span>Websocket url: </span><input type="text" value="ws://localhost:6180/workerlocations" id="txtSocketHost" style="font-size:12pt; width: 50%; background-color: #ffffff" /><br/>
      <input type="button" id="cmdConnect" value="ConnectWS" onclick="connectSocket();"/>
      <input type="button" id="cmdDisconnect" value="DisconnectWS" onclick="disconnectSocket();" disabled="disabled"/>
    </div>
    <div style="width: 100%; position: relative; left: 0px; top: 0px;">
      <div style="width:100%; position: absolute; left: 0px; top:0px; background-color: #dcdcdc">
        <p style="padding-left: 10px">Messages received</p>
        <textarea id="txtLog" wrap="soft" style="width:99%;" rows="30">
        </textarea><br/>
        <input type="button" id="cmdClear" value="Clear Log" onclick="clearLog();"/>
      </div>
    </div>
  </body>
</html>