installing socketIO and testing the WebSocket connection

app/__init__.py

@@ -18,6 +18,7 @@ from flask import (
 )
 from flask.globals import request_ctx
 from flask_login import LoginManager, current_user
+from flask_socketio import SocketIO
 from flask_talisman import Talisman
 from flask_wtf import CSRFProtect
 from flask_wtf.csrf import CSRFError
@@ -118,6 +119,7 @@ from notifications_utils.recipients import format_phone_number_human_readable
 login_manager = LoginManager()
 csrf = CSRFProtect()
 talisman = Talisman()
+socketio = SocketIO()
 
 
 # The current service attached to the request stack.
@@ -175,6 +177,7 @@ def create_app(application):
 
     init_govuk_frontend(application)
     init_jinja(application)
+    socketio.init_app(application)
 
     for client in (
         csrf,

app/assets/javascripts/socket.js

@@ -0,0 +1,23 @@
+
+(function (window) {
+    document.addEventListener('DOMContentLoaded', (event) => {
+        var socket = io();
+
+        socket.on('connect', function() {
+            console.log('Connected to the server');
+        });
+
+        socket.on('message', function(msg) {
+            var li = document.createElement("li");
+            li.appendChild(document.createTextNode(msg));
+            document.getElementById("messages").appendChild(li);
+        });
+
+        document.getElementById('sendButton').addEventListener('click', function() {
+            var message = document.getElementById("message").value;
+            socket.send(message);
+            document.getElementById("message").value = '';
+        });
+    });
+
+})(window);

app/main/views/dashboard.py

@@ -6,6 +6,7 @@ from itertools import groupby
 
 from flask import Response, abort, jsonify, render_template, request, session, url_for
 from flask_login import current_user
+from flask_socketio import send, emit
 from werkzeug.utils import redirect
 
 from app import (
@@ -15,6 +16,7 @@ from app import (
     notification_api_client,
     service_api_client,
     template_statistics_client,
+    socketio
 )
 from app.formatters import format_date_numeric, format_datetime_numeric, get_time_left
 from app.main import main
@@ -32,6 +34,16 @@ from app.utils.user import user_has_permissions
 from notifications_utils.recipients import format_phone_number_human_readable
 
 
+@socketio.on('message')
+def handle_message(msg):
+    print('''Message:
+
+
+
+          ''' + msg)
+    emit('message', msg, broadcast=True)
+
+
 @main.route("/services/<uuid:service_id>/dashboard")
 @user_has_permissions("view_activity", "send_messages")
 def old_service_dashboard(service_id):

app/templates/new/components/head.html

@@ -32,6 +32,7 @@
     {# google #}
     <script type="text/javascript" src="{{ asset_url('js/gtm_head.js') }}"></script>
     <script type="text/javascript" src="{{ url_for('static', filename='js/chart.umd.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/socket.io.min.js') }}"></script>
     <meta name="google-site-verification" content="niWnSqImOWz6mVQTYqNb5tFK8HaKSB4b3ED4Z9gtUQ0" />
     {% if g.hide_from_search_engines %}
     <meta name="robots" content="noindex" />

app/templates/views/dashboard/dashboard.html

@@ -22,6 +22,9 @@
       Messages sent
     </h2>
 
+    <input id="message" autocomplete="off"><button id="sendButton">Send</button>
+    <ul id="messages"></ul>
+
     {{ ajax_block(partials, updates_url, 'inbox') }}
 
     {{ ajax_block(partials, updates_url, 'totals') }}

gulpfile.js

@@ -126,6 +126,7 @@ const javascripts = () => {
     paths.src + 'javascripts/loginAlert.js',
     paths.src + 'javascripts/main.js',
     paths.src + 'javascripts/chartDashboard.js',
+    paths.src + 'javascripts/socket.js',
   ])
     .pipe(plugins.prettyerror())
     .pipe(plugins.babel({