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