plcWebSocketServer/websock.html at master · murdemon/plcWebSocketServer · 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
<!doctype HTML>

<html>

  <head>
    <style type="text/css">
      * { font-family:Arial;}
      .entry { background-color:#eeeeee; margin-bottom:0.3em; }
      #log { max-height:300px; min-height:300px; overflow-y:scroll; border:1px solid black; background-color:#aaaaaa; }
      .level { font-weight:bold; text-transform:uppercase; margin-right:1em; }
      .info { color:green; }
      .warning { color:yellow; }
      .error { color:red; }
      .date { float:clear; }
      .msg { display:block; }
    </style>
  </head>

  <body>

    <input type="button" id="connect" value="Connect" />
    <input type="text" value="1,2,3,4" id="text"></input>
    <input type="button" text="submit" id="submitAsBinary" value="Submit" />

    <p id="log">

    </p>

    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
    <script type="text/javascript">

      $(document).ready(function () {

	var INFO = 'info', WARNING = 'warning', ERROR = 'error';

	function log(level, msg) {
	  var date = new Date(),
	      levelElem = $('<span class="level ' + level + '">' + level + '</span>'),
	      dateElem = $('<span class="date">' + date + '</span>'),
	      msgElem = $('<span class="msg">' + msg + '</span>'),
	      contElem = $('<div class="entry"></div>');

	  contElem.append(levelElem, dateElem, msgElem);

	  $('#log').append(contElem);
	};

        var Socket, isConnected;

        $('#connect').click(function() {

	  $('#connect').attr('disabled', 'disabled');

  	  if (isConnected && Socket !== null) {
	    Socket.close();
	    return;
	  }

          Socket = new WebSocket("ws://10.0.6.10:200");

	  Socket.binaryType = 'arraybuffer';
	  Socket.onmessage = function (e) {

	    var arr = new Uint8Array(e.data),
		msg = '[';
	    for (var i = 0; i < e.data.byteLength; i += 1) {
	      msg += (i < e.data.byteLength - 1)?arr[i] + ', ': arr[i] + '';
	    }
	    msg += ']';

	    log(INFO, "Received " + e.data.byteLength + " bytes. (" + msg + ")");


	  };

	  Socket.onopen = function() {
            log(INFO, 'connection established.');
	    isConnected = true;
	    $('#connect').attr("value", "Disconnect");
	    $('#connect').removeAttr('disabled');
          };


          Socket.onclose = function () {
            log(INFO, 'connection closed.');
	    isConnected = false;
	    $('#connect').attr("value", "Connect");
	    $('#connect').removeAttr('disabled');
          };


        });

	$('#submitAsBinary').click(function () {

          if (!isConnected)
	    return;

          var text = $('#text').val(),
            bytes = text.split(','),
            buf = new ArrayBuffer(bytes.length),
            bufView = new Uint8Array(buf);

	  for (var i=0; i<bytes.length; i++) {
    	    bufView[i] = parseInt(bytes[i]);
  	  }

	  log(INFO, 'sending as binary : ' + '([' + text + '])');
	  Socket.send(buf);
        });

      });

    </script>

  </body>

</html>