Support connect and disconnect messages

server/package.json

@@ -57,6 +57,7 @@
     "passport-linkedin": "^1.0.0",
     "passport-openidconnect": "0.0.1",
     "qtip2": "^3.0.3",
+    "quill": "^1.1.5",
     "redis": "^2.6.2",
     "reflect-metadata": "^0.1.8",
     "request": "^2.75.0",

server/src/collab/collab.ts

@@ -1,3 +1,36 @@
 import * as io from 'socket.io-client';
+import * as Quill from 'quill';
+import * as $ from 'jquery';
 
-let socket = io();
+let socket = io();
+
+socket.on('user connect', (msg) => {
+    $("#console").append('<div>New user connected</div>');
+});
+
+socket.on('user disconnect', (msg) => {
+    $("#console").append('<div>User disconnected</div>');
+});
+
+// Implement and register module
+Quill.register('modules/counter', function(quill, options) {
+    var container = document.querySelector(options.container);
+    quill.on('text-change', function() {
+        var text = quill.getText();
+        // There are a couple issues with counting words
+        // this way but we'll fix these later
+        container.innerHTML = text.split(/\s+/).length;
+
+        socket.emit('chat message', text);
+    });
+});
+
+var editor = new Quill('#editor', {
+    modules: { 
+        toolbar: '#toolbar',
+        counter: {
+        container: '#counter'
+        } 
+    },
+    theme: 'snow'
+});

server/src/io.ts

@@ -3,8 +3,15 @@ import socketIo = require('socket.io');
 var io = socketIo();
 
 io.on('connection', (socket) => {
-    console.log('a user connected!');
+    socket.on('chat message', (msg) => {
+        console.log(`message: ` + msg);
+    });
+
+    socket.on('disconnect', () => {
+        socket.broadcast.emit('user disconnect');        
+    })
+
+    socket.broadcast.emit('user connect', 'hi');
 });
 
-
 export default io;

server/typings.json

@@ -9,6 +9,7 @@
     "node": "registry:env/node#4.0.0+20160918225031",
     "passport": "registry:dt/passport#0.2.0+20160720063208",
     "qtip2": "registry:dt/qtip2#2.2.1+20160317120654",
+    "quill": "registry:dt/quill#1.1.0+20161025144844",
     "socket.io": "registry:dt/socket.io#1.4.4+20160909205835",
     "socket.io-client": "registry:dt/socket.io-client#1.4.4+20160317120654"
   },

server/views/collab.hjs

@@ -16,36 +16,12 @@
         <div id="editor">
           <p>Hello World!</p>
         </div>   
-        <div id="counter"></div>              
+        <div id="counter"></div>
+        <div id="console"></div>
     {{/content}}
     
     {{$scripts}}
-        <!-- Include the Quill library -->
-        <script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>
-        <script src="/dist/collab/collab.js"></script>
-
-        <!-- Initialize Quill editor -->
-        <script>
-          // Implement and register module
-          Quill.register('modules/counter', function(quill, options) {
-            var container = document.querySelector(options.container);
-            quill.on('text-change', function() {
-              var text = quill.getText();
-              // There are a couple issues with counting words
-              // this way but we'll fix these later
-              container.innerHTML = text.split(/\s+/).length;
-            });
-          });
-
-          var editor = new Quill('#editor', {
-            modules: { 
-              toolbar: '#toolbar',
-              counter: {
-                container: '#counter'
-              } 
-            },
-            theme: 'snow'
-          });
-        </script>
+        <!-- Include the Quill library -->        
+        <script src="/dist/collab/collab.js"></script>        
     {{/scripts}}            
 {{/layout}}