From cbe2b27e280504b4e00ec28dd9e04289fde59373 Mon Sep 17 00:00:00 2001 From: alexfriesen Date: Fri, 21 Apr 2017 14:02:39 +0200 Subject: [PATCH 1/3] add command to start dev http server you can use a simple node http server to start a http server for development on localhost:8888. also added generic nodejs gitignore --- .gitignore | 59 ++++++++++++++++++++++++++++++++++++++++++++++++++++ package.json | 15 +++++++++++++ 2 files changed, 74 insertions(+) create mode 100644 package.json diff --git a/.gitignore b/.gitignore index fafff2e..2f60dcd 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,61 @@ .DS_Store Thumbs.db + +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# Runtime data +pids +*.pid +*.seed +*.pid.lock + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage + +# nyc test coverage +.nyc_output + +# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# Bower dependency directory (https://bower.io/) +bower_components + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (http://nodejs.org/api/addons.html) +build/Release + +# Dependency directories +node_modules/ +jspm_packages/ + +# Typescript v1 declaration files +typings/ + +# Optional npm cache directory +.npm + +# Optional eslint cache +.eslintcache + +# Optional REPL history +.node_repl_history + +# Output of 'npm pack' +*.tgz + +# Yarn Integrity file +.yarn-integrity + +# dotenv environment variables file +.env diff --git a/package.json b/package.json new file mode 100644 index 0000000..ff94bf2 --- /dev/null +++ b/package.json @@ -0,0 +1,15 @@ +{ + "name": "webrcon", + "description": "Game server Rcon, using websockets", + "repository": { + "type": "git", + "url": "https://github.com/Facepunch/webrcon" + }, + "scripts": { + "server": "http-server -p 8888", + "start": "npm run server" + }, + "devDependencies": { + "http-server": "^0.9.0" + } +} From a02a57bf9992399239aefcdb1e5d5a25d490945f Mon Sep 17 00:00:00 2001 From: alexfriesen Date: Fri, 21 Apr 2017 15:06:52 +0200 Subject: [PATCH 2/3] add Disconnect added disconnect feature auto formatted js/html code --- html/connect.html | 2 +- index.html | 144 ++++++++++++++++++------------- js/app.js | 169 +++++++++++++++++++----------------- js/rconService.js | 215 ++++++++++++++++++++++++---------------------- 4 files changed, 289 insertions(+), 241 deletions(-) diff --git a/html/connect.html b/html/connect.html index fd812f8..56edec3 100644 --- a/html/connect.html +++ b/html/connect.html @@ -51,4 +51,4 @@ - \ No newline at end of file + diff --git a/index.html b/index.html index 87d90a7..59b4e8d 100644 --- a/index.html +++ b/index.html @@ -1,4 +1,4 @@ - + @@ -6,74 +6,102 @@ Websocket Rcon - - + + - - -
+ -
+
-
+
-

{{$route.current.Title}}

-
-
+
-
- - - - - - - - - - - - - - - - - - - + + +
+ +
+ +

{{$route.current.Title}}

+
+ +
+ + + + + + + + + + + + + + + + + + + + + - - + + @@ -82,6 +110,6 @@ - + diff --git a/js/app.js b/js/app.js index d1966b5..8e03643 100644 --- a/js/app.js +++ b/js/app.js @@ -1,101 +1,114 @@ +var app = angular.module('RconApp', ['ngRoute', 'nvd3']); +app.service('rconService', [RconService]); -var app = angular.module( 'RconApp', ['ngRoute', 'nvd3'] ); +app.config(function($routeProvider) { + $routeProvider.when("/home", {Title: "Home"}); + $routeProvider.when("/:address/info", { + Title: "Server", + templateUrl: "html/serverInfo.html", + Nav: true + }); + $routeProvider.when("/:address/console", { + Title: "Console", + templateUrl: "html/console.html", + Nav: true + }); + $routeProvider.when("/:address/chat", { + Title: "Chat", + templateUrl: "html/chat.html", + Nav: true + }); + $routeProvider.when("/:address/playerlist", { + Title: "Player List", + templateUrl: "html/playerlist.html", + Nav: true + }); + $routeProvider.when("/:address/player/:userid", { + Title: "Player Info", + templateUrl: "html/playerInfo.html" + }); + $routeProvider.otherwise({redirectTo: '/home'}); +}); -app.service( 'rconService', [RconService] ); +app.controller('RconController', RconController); -app.config( function ( $routeProvider ) -{ - $routeProvider.when( "/home", { Title: "Home" } ) - $routeProvider.when( "/:address/info", { Title: "Server", templateUrl: "html/serverInfo.html", Nav: true } ) - $routeProvider.when( "/:address/console", { Title: "Console", templateUrl: "html/console.html", Nav: true } ) - $routeProvider.when( "/:address/chat", { Title: "Chat", templateUrl: "html/chat.html", Nav: true } ) - $routeProvider.when( "/:address/playerlist", { Title: "Player List", templateUrl: "html/playerlist.html", Nav: true } ) - $routeProvider.when( "/:address/player/:userid", { Title: "Player Info", templateUrl: "html/playerInfo.html" } ) - $routeProvider.when( "/:address/player/:userid/xp", { Title: "Player Xp Stats", templateUrl: "html/playerXp.html" } ) - $routeProvider.otherwise( { redirectTo: '/home' } ); +function RconController($scope, $rootScope, rconService, $timeout, $route) { + $scope.$route = $route; -} ); + $scope.pages = $.map($route.routes, function(value, index) { + if (value.Nav) { + return [value]; + } + }); -app.controller( 'RconController', RconController ); + $scope.OpenLeftMenu = function() { + $mdSidenav('left').toggle(); + }; -function RconController( $scope, $rootScope, rconService, $timeout, $route ) -{ - $scope.$route = $route; - + $scope.IsConnected = function() { + return rconService.IsConnected(); + } - $scope.pages = $.map( $route.routes, function ( value, index ) - { - return [value]; - } ); + $rootScope.Nav = function(url) { + return url.replace(":address", rconService.Address); + } - $scope.OpenLeftMenu = function () - { - $mdSidenav( 'left' ).toggle(); - }; + $rootScope.$on('$stateChangeStart', function(next, current) { + console.log(next); + }); - $scope.IsConnected = function () - { - return rconService.IsConnected(); - } + rconService.OnOpen = function() { + $scope.Connected = true; + $scope.$broadcast("OnConnected"); + $scope.$digest(); + $scope.address = rconService.Address; + } - $rootScope.Nav = function ( url ) - { - return url.replace( ":address", rconService.Address ); - } + rconService.OnClose = function(ev) { + $scope.$broadcast("OnDisconnected", ev); + $scope.$digest(); + } - $rootScope.$on( '$stateChangeStart', function ( next, current ) - { - console.log( next ); - } ); + rconService.OnError = function(ev) { + $scope.$broadcast("OnConnectionError", ev); + $scope.$digest(); + } - rconService.OnOpen = function () - { - $scope.Connected = true; - $scope.$broadcast( "OnConnected" ); - $scope.$digest(); - $scope.address = rconService.Address; - } + rconService.OnMessage = function(msg) { + $scope.$apply(function() { + $scope.$broadcast("OnMessage", msg); + }); + } - rconService.OnClose = function ( ev ) - { - $scope.$broadcast( "OnDisconnected", ev ); - $scope.$digest(); - } + $scope.Disconnect = function() { + if (confirm('Do you really want to disconnect?')) { + rconService.Disconnect(); + $scope.Connected = false; - rconService.OnError = function ( ev ) - { - $scope.$broadcast( "OnConnectionError", ev ); - $scope.$digest(); - } - - rconService.OnMessage = function ( msg ) - { - $scope.$apply( function () - { - $scope.$broadcast( "OnMessage", msg ); - } ); - } + $scope.address = '#/home'; + } + } } -app.filter( 'SecondsToDuration', [SecondsToDuration] ); +app.filter('SecondsToDuration', [SecondsToDuration]); -function SecondsToDuration() -{ - return function ( input ) - { - input = parseInt( input ); +function SecondsToDuration() { + return function(input) { + input = parseInt(input); - var out = ""; - var hours = Math.floor( input / 3600 ); - if ( input > 3600 ) out += hours + "h"; + var out = ""; + var hours = Math.floor(input / 3600); + if (input > 3600) + out += hours + "h"; - var minutes = Math.floor( input / 60 ) % 60; - if ( input > 60 ) out += minutes + "m"; + var minutes = Math.floor(input / 60) % 60; + if (input > 60) + out += minutes + "m"; - var seconds = input % 60; - out += seconds + "s"; + var seconds = input % 60; + out += seconds + "s"; - return out; - } + return out; + } } diff --git a/js/rconService.js b/js/rconService.js index aaff497..91d3047 100644 --- a/js/rconService.js +++ b/js/rconService.js @@ -1,123 +1,130 @@ +function RconService() { + var ConnectionStatus = { + 'CONNECTING': 0, + 'OPEN': 1, + 'CLOSING': 2, + 'CLOSED': 3 + }; -function RconService() -{ - var s = { - Callbacks: {} - }; + var Service = { + Socket: null, + Address: null, + Callbacks: {} + }; - s.Connect = function ( addr, pass ) - { - s.Socket = new WebSocket( "ws://" + addr + "/" + pass ); - s.Address = addr; + var LastIndex = 1001; - s.Socket.onmessage = function ( e ) - { - var data = angular.fromJson( e.data ); + Service.Connect = function(addr, pass) { + this.Socket = new WebSocket("ws://" + addr + "/" + pass); + this.Address = addr; - // - // This is a targetted message, it has an identifier - // So feed it back to the right callback. - // - if ( data.Identifier > 1000 ) - { - var cb = s.Callbacks[data.Identifier]; - if ( cb != null ) - { - cb.scope.$apply( function () - { - cb.callback( data ); - } ); - } - s.Callbacks[data.Identifier] = null; + this.Socket.onmessage = function(e) { + var data = angular.fromJson(e.data); - return; - } + // + // This is a targetted message, it has an identifier + // So feed it back to the right callback. + // + if (data.Identifier > 1000) { + var cb = Service.Callbacks[data.Identifier]; + if (cb != null) { + cb.scope.$apply(function() { + cb.callback(data); + }); + } + Service.Callbacks[data.Identifier] = null; - // - // Generic console message, let OnMessage catch it - // - if ( s.OnMessage != null ) - { - s.OnMessage( data ); - } - }; + return; + } - s.Socket.onopen = s.OnOpen; - s.Socket.onclose = s.OnClose; - s.Socket.onerror = s.OnError; - } + // + // Generic console message, let OnMessage catch it + // + if (Service.OnMessage != null) { + Service.OnMessage(data); + } + }; - s.Command = function ( msg, identifier ) - { - if ( identifier == null ) - identifier = -1; + this.Socket.onopen = this.OnOpen; + this.Socket.onclose = this.OnClose; + this.Socket.onerror = this.OnError; + } - if ( s.Socket == null ) - return; - - if ( !s.IsConnected ) - return; + Service.Disconnect = function() { + if (this.Socket) { + this.Socket.close(); + this.Socket = null; + } - var packet = - { - Identifier: identifier, - Message: msg, - Name: "WebRcon" - } + this.Callbacks = {}; + } - s.Socket.send( JSON.stringify( packet ) ); - }; + Service.Command = function(msg, identifier) { + if (this.Socket === null) + return; - var LastIndex = 1001; + if (!this.IsConnected()) + return; - // - // Make a request, call this function when it returns - // - s.Request = function ( msg, scope, callback ) - { - LastIndex++; - s.Callbacks[LastIndex] = { scope: scope, callback: callback }; - s.Command( msg, LastIndex ); - } + if (identifier === null) + identifier = -1; - // - // Returns true if websocket is connected - // - s.IsConnected = function () - { - if ( s.Socket == null ) return false; - return s.Socket.readyState == 1; - } + var packet = { + Identifier: identifier, + Message: msg, + Name: "WebRcon" + }; - // - // Helper for installing connectivity logic - // - // Basically if not connected, call this function when we are - // And if we are - then call it right now. - // - s.InstallService = function( scope, func ) - { - scope.$on( "OnConnected", function () - { - func(); - }); + this.Socket.send(JSON.stringify(packet)); + }; - if ( s.IsConnected() ) - { - func(); - } - } + // + // Make a request, call this function when it returns + // + Service.Request = function(msg, scope, callback) { + LastIndex++; + this.Callbacks[LastIndex] = { + scope: scope, + callback: callback + }; + Service.Command(msg, LastIndex); + } - s.getPlayers = function(scope, success) { - this.Request( "playerlist", scope, function ( response ) - { - var players = JSON.parse( response.Message ); + // + // Returns true if websocket is connected + // + Service.IsConnected = function() { + if (this.Socket == null) + return false; - if(typeof success === 'function') { - success.call(scope, players); - } - }); - } + return this.Socket.readyState === ConnectionStatus.OPEN; + } - return s; -} \ No newline at end of file + // + // Helper for installing connectivity logic + // + // Basically if not connected, call this function when we are + // And if we are - then call it right now. + // + Service.InstallService = function(scope, func) { + scope.$on("OnConnected", function() { + func(); + }); + + if (this.IsConnected()) { + func(); + } + } + + Service.getPlayers = function(scope, success) { + this.Request("playerlist", scope, function(response) { + var players = JSON.parse(response.Message); + + if (typeof success === 'function') { + success.call(scope, players); + } + }); + } + + return Service; +} From 39960aa897d5eb6c8bb858760230e37e10135a21 Mon Sep 17 00:00:00 2001 From: alexfriesen Date: Fri, 21 Apr 2017 15:45:55 +0200 Subject: [PATCH 3/3] move disconnect button to nav-header moved disconnect button to nav-header fix navbar (responsive again) replace custon classes with bootstap classes --- index.html | 41 ++++++++++++++++++++++++++--------------- js/rconService.js | 1 + rcon.css | 1 + 3 files changed, 28 insertions(+), 15 deletions(-) diff --git a/index.html b/index.html index 59b4e8d..1286fbe 100644 --- a/index.html +++ b/index.html @@ -15,43 +15,57 @@ @@ -65,9 +79,6 @@
  • {{page.Title}}
    • -
  • - Disconnect -
    • diff --git a/js/rconService.js b/js/rconService.js index 91d3047..7750daa 100644 --- a/js/rconService.js +++ b/js/rconService.js @@ -1,4 +1,5 @@ function RconService() { + var ConnectionStatus = { 'CONNECTING': 0, 'OPEN': 1, diff --git a/rcon.css b/rcon.css index 97dde59..43e427b 100644 --- a/rcon.css +++ b/rcon.css @@ -118,6 +118,7 @@ a:hover color: #fff; } +.navbar-default .navbar-nav > li > .navbar-text, .navbar-default .navbar-nav > li > a, .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: #fff;