<!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>