Small updates to the event triggers and javascript to show individual endpoints

awx/main/management/commands/run_socketio_service.py

@@ -9,7 +9,7 @@ import json
 import signal
 import time
 from optparse import make_option
-from multiprocessing import Process
+from threading import Thread
 
 # Django
 from django.conf import settings
@@ -27,6 +27,7 @@ from awx.main.models import *
 import zmq
 
 # gevent & socketio
+import gevent
 from socketio import socketio_manage
 from socketio.server import SocketIOServer
 from socketio.namespace import BaseNamespace
@@ -35,19 +36,17 @@ class TestNamespace(BaseNamespace):
 
     def recv_connect(self):
         print("Received client connect for test namespace from %s" % str(self.environ['REMOTE_ADDR']))
-        self.emit('connect', True)
+        self.emit('test', "If you see this then you are connected to the test socket endpoint")
 
 class JobNamespace(BaseNamespace):
 
     def recv_connect(self):
         print("Received client connect for job namespace from %s" % str(self.environ['REMOTE_ADDR']))
-        self.emit('connect', True)
 
 class JobEventNamespace(BaseNamespace):
 
     def recv_connect(self):
         print("Received client connect for job event namespace from %s" % str(self.environ['REMOTE_ADDR']))
-        self.emit('connect', True)
 
 class TowerSocket(object):
 
@@ -55,9 +54,9 @@ class TowerSocket(object):
         path = environ['PATH_INFO'].strip('/') or 'index.html'
         print path
         if path.startswith('socket.io'):
-            socketio_manage(environ, {'/socket.io/test': TestNamespace})
+            socketio_manage(environ, {'/socket.io/test': TestNamespace,
-            socketio_manage(environ, {'/socket.io/jobs': JobNamespace})
+                                      '/socket.io/jobs': JobNamespace,
-            socketio_manage(environ, {'/socket.io/job_events': JobEventNamespace})
+                                      '/socket.io/job_events': JobEventNamespace})
         else:
             start_response('404 Not Found', [])
             return ['<h1>Not Found</h1>']
@@ -111,7 +110,12 @@ class Command(NoArgsCommand):
             else:
                 print 'Listening on port http://0.0.0.0:' + str(socketio_listen_port)
                 server = SocketIOServer(('0.0.0.0', socketio_listen_port), TowerSocket(), resource='socket.io')
-            gevent.spawn(notification_handler, socketio_notification_port, server)
+
+            #gevent.spawn(notification_handler, socketio_notification_port, server)
+            handler_thread = Thread(target=notification_handler, args = (socketio_notification_port, server,))
+            handler_thread.daemon = True
+            handler_thread.start()
+
             server.serve_forever()
         except KeyboardInterrupt:
             pass

awx/ui/static/js/controllers/Sockets.js

@@ -8,19 +8,34 @@
 
 'use strict';
 
-function SocketsController ($scope, ClearScope, Socket) {
+function SocketsController ($scope, $compile, ClearScope, Socket) {
 
     ClearScope();
 
-    var socket = Socket({ scope: $scope });
+    var test_scope = $scope.$new(),
-    socket.init(); //make the connection
+        jobs_scope = $scope.$new(),
+        job_events_scope = $scope.$new();
 
-    $scope.messages = ['Stuff happened', 'message received', 'blah blah bob blah'];
+    var test_socket = Socket({ scope: test_scope, endpoint: "test" }),
+        jobs_socket = Socket({ scope: jobs_scope, endpoint: "jobs" }),
+        job_events_socket = Socket({ scope: job_events_scope, endpoint: "job_events" });
 
-    socket.on('anything', function(data) {
+    var test_element = angular.element(document.getElementById('test_url'));
-        $scope.messages.push(data);
+    $compile(test_element)(test_scope);
+    var jobs_element = angular.element(document.getElementById("jobs_url"));
+    $compile(jobs_element)(jobs_scope);
+    var job_events_element = angular.element(document.getElementById("job_events_url"));
+    $compile(job_events_element)(job_events_scope);
+
+    test_socket.init();
+    jobs_socket.init();
+    job_events_socket.init();
+
+    test_scope.messages = ['Message Displayed Before Connection'];
+
+    test_socket.on('test', function(data) {
+            test_scope.messages.push(data);
     });
-
 }
 
-SocketsController.$inject = [ '$scope', 'ClearScope', 'Socket'];
+SocketsController.$inject = [ '$scope', '$compile', 'ClearScope', 'Socket'];

awx/ui/static/lib/ansible/Socket.js

@@ -16,8 +16,9 @@ angular.module('SocketIO', ['AuthService', 'Utilities'])
         return function(params) {
             var scope = params.scope,
                 host = $location.host(),
+                endpoint = params.endpoint,
                 protocol = $location.protocol(),
-                url = protocol + '://' + host + ':8080';
+                url = protocol + '://' + host + ':8080/socket.io/' + endpoint;
 
             if (scope.removeSocketErrorEncountered) {
                 scope.removeSocketErrorEncountered();

awx/ui/static/partials/sockets.html

@@ -1,11 +1,34 @@
 <div class="tab-pane" id="sockets">
     <div ng-cloak id="htmlTemplate">
-        <div class="alert alert-info"><strong>Socket url</strong>: {{ socket_url }} &nbsp;<strong>Status:</strong> {{ socket_status }} {{ socket_reason }}</div>
+        <div id="test_url">
-        <div class="well">
+            <div class="alert alert-info"><strong>Socket url</strong>: {{ socket_url }} &nbsp;<strong>Status:</strong> {{ socket_status }} {{ socket_reason }}</div>
-            <h5>Received Messages:</h5>
+            <div class="well">
-            <ul>
+                <h5>Received Test Messages:</h5>
-                <li ng-repeat="message in messages">{{ message }} </li>
+                <ul>
-            </ul>
+                    <li>{{messages}}</li>
+                    <li ng-repeat="message in messages">{{ message }} </li>
+                </ul>
+            </div>
+        </div>
+
+        <div id="jobs_url">
+            <div class="alert alert-info"><strong>Socket url</strong>: {{ socket_url }} &nbsp;<strong>Status:</strong> {{ socket_status }} {{ socket_reason }}</div>
+            <div class="well">
+                <h5>Received Jobs Messages:</h5>
+                <ul>
+                    <li ng-repeat="message in messages">{{ message }} </li>
+                </ul>
+            </div>
+        </div>
+
+        <div id="job_events_url">
+            <div class="alert alert-info"><strong>Socket url</strong>: {{ socket_url }} &nbsp;<strong>Status:</strong> {{ socket_status }} {{ socket_reason }}</div>
+            <div class="well">
+                <h5>Received Job Event Messages:</h5>
+                <ul>
+                    <li ng-repeat="message in messages">{{ message }} </li>
+                </ul>
+            </div>
         </div>
     </div>
 </div>