You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
151 lines
6.2 KiB
151 lines
6.2 KiB
<!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>
|