133 lines
5.0 KiB
HTML
133 lines
5.0 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<title>Websock VPN Test Client</title>
|
||
|
|
</head>
|
||
|
|
<body ng-app="vpnTest" ng-controller="vpnTestController">
|
||
|
|
|
||
|
|
<div class="panel panel-default panel-primary">
|
||
|
|
<div class="panel-heading">WebSocket Client Test</div>
|
||
|
|
<div class="panel-body">
|
||
|
|
<div class="panel panel-default panel-info">
|
||
|
|
<div class="panel-heading ">Control Plane</div>
|
||
|
|
<div class="panel-body">
|
||
|
|
|
||
|
|
<div class="row"> <!-- Auth -->
|
||
|
|
<div class="col-lg-6">
|
||
|
|
<div class="input-group">
|
||
|
|
<span class="input-group-btn">
|
||
|
|
<button class="btn btn-default" type="button" ng-click="startWebSocket()">Start WebSocket</button>
|
||
|
|
</span>
|
||
|
|
<button class="btn btn-default" type="button" ng-class="conn == false && 'btn-danger' || 'btn-success'">
|
||
|
|
{[{ conn == false && 'False' || 'True' }]}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<br>
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-lg-6">
|
||
|
|
<div class="input-group">
|
||
|
|
<span class="input-group-btn">
|
||
|
|
<button class="btn btn-default" type="button">Auth</button>
|
||
|
|
</span>
|
||
|
|
<input type="text" class="form-control" placeholder="Enter auth data here">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<br>
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-lg-6">
|
||
|
|
<div class="input-group">
|
||
|
|
<span class="input-group-btn">
|
||
|
|
<button class="btn btn-default" ng-click="send_click()" type="button">Send</button>
|
||
|
|
</span>
|
||
|
|
<input ng-model="send_data" type="text" class="form-control" placeholder="Enter send data here">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="panel panel-default panel-danger">
|
||
|
|
<div class="panel-heading">Messages</div>
|
||
|
|
<div class="panel-body">
|
||
|
|
<p ng-repeat="text in log_elements">{[{text}]}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
|
||
|
|
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
|
||
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
|
||
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
|
||
|
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
console.log("startup");
|
||
|
|
|
||
|
|
var vpnTest = angular.module('vpnTest',[]);
|
||
|
|
vpnTest.config(function($interpolateProvider) {
|
||
|
|
console.log("vpnTest Config");
|
||
|
|
$interpolateProvider.startSymbol('{[{');
|
||
|
|
$interpolateProvider.endSymbol('}]}');
|
||
|
|
});
|
||
|
|
vpnTest.controller('vpnTestController', function ($scope) {
|
||
|
|
console.log("vpnTestController startup");
|
||
|
|
|
||
|
|
$scope.log_elements = [];
|
||
|
|
$scope.auth_key = "";
|
||
|
|
$scope.conn = false;
|
||
|
|
$scope.send_data = ""
|
||
|
|
|
||
|
|
$scope.webSocketStatus = function() {
|
||
|
|
if ($scope.conn == false) {
|
||
|
|
return ""
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
$scope.startWebSocket = function() {
|
||
|
|
console.log("Start webSocket {{$}}");
|
||
|
|
if (window["WebSocket"]) {
|
||
|
|
$scope.conn = new WebSocket("wss://{{$}}/ws/client");
|
||
|
|
$scope.append_log("Websocket opened");
|
||
|
|
$scope.conn.onclose = function (evt) {
|
||
|
|
$scope.append_log("Connection closed.");
|
||
|
|
}
|
||
|
|
$scope.conn.onmessage = function (evt) {
|
||
|
|
console.log(evt.data)
|
||
|
|
$scope.append_log(evt.data)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
appendLog($("<div><b>Your browser does not support WebSockets.</b></div>"))
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
$scope.auth_click = function() {
|
||
|
|
$scope.append_log($scope.auth_key)
|
||
|
|
};
|
||
|
|
|
||
|
|
$scope.send_click = function() {
|
||
|
|
console.log("send_click")
|
||
|
|
$scope.conn.send($scope.send_data)
|
||
|
|
};
|
||
|
|
|
||
|
|
$scope.append_log = function(txt) {
|
||
|
|
$scope.log_elements.push(txt)
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</html>
|