patrickbrandt · August 30, 2023 21:28 · Dec 8, 2015 · Dec 8, 2015 · Nov 9, 2015 · Nov 9, 2015
diff --git a/socket.io_Express_Angular.md b/socket.io_Express_Angular.md
@@ -57,7 +57,7 @@ app.use('/', routes);
 
 server.listen('3000');
 ```
-You can now emit socket.io events from any route handler (./routes/index in this example):
+You can now emit socket.io events from any route handler (```./routes/index``` in this example):
 ```javascript
 var express = require('express');
 var router = express.Router();

diff --git a/socket.io_Express_Angular.md b/socket.io_Express_Angular.md
@@ -57,7 +57,7 @@ app.use('/', routes);
 
 server.listen('3000');
 ```
-You can now emit socket.io events from any route handler:
+You can now emit socket.io events from any route handler (./routes/index in this example):
 ```javascript
 var express = require('express');
 var router = express.Router();

diff --git a/socket.io_Express_Angular.md b/socket.io_Express_Angular.md
@@ -1,4 +1,4 @@
-Socket.io integration between and Express and Angular app is a breeze. I'll outline the Express implementation first, then outline Angular integration.
+Socket.io integration between an Express and Angular app is a breeze. I'll outline the Express implementation first, then outline Angular integration.
 
 # Express + socket.io
 ## Reference socket.io in layout.jade

diff --git a/socket.io_Express_Angular.md b/socket.io_Express_Angular.md
@@ -76,19 +76,19 @@ Create a service that wraps the socket.io global object:
 angular.module('example')
 .factory('io', ['$window', '$rootScope', function($window, $rootScope) {
   var _socket = $window.io('//localhost:3000');
-    return {
-      on: function(eventType, cb) {
-        _socket.on(eventType, function() {
-          cb(); 
-          //NOTE: calling $apply will ensure that any model changes are reflected in the view
-          $rootScope.$apply();
-        });
-      },
-      emit: function(eventType, data) {
-        _socket.emit(eventType, data);
-      }
-    };
-  }]);
+  return {
+    on: function(eventType, cb) {
+      _socket.on(eventType, function() {
+        cb(); 
+        //NOTE: calling $apply will ensure that any model changes are reflected in the view
+        $rootScope.$apply();
+      });
+    },
+    emit: function(eventType, data) {
+      _socket.emit(eventType, data);
+    }
+  };
+}]);
 ```
 Use the io service in a controller:
 ```javascript

diff --git a/socket.io_Express_Angular.md b/socket.io_Express_Angular.md
@@ -77,18 +77,18 @@ angular.module('example')
 .factory('io', ['$window', '$rootScope', function($window, $rootScope) {
   var _socket = $window.io('//localhost:3000');
     return {
-    on: function(eventType, cb) {
-      _socket.on(eventType, function() {
-        cb(); 
-        //NOTE: calling $apply will ensure that any model changes are reflected in the view
-        $rootScope.$apply();
-      });
-    },
-    emit: function(eventType, data) {
-      _socket.emit(eventType, data);
-    }
-  };
-}]);
+      on: function(eventType, cb) {
+        _socket.on(eventType, function() {
+          cb(); 
+          //NOTE: calling $apply will ensure that any model changes are reflected in the view
+          $rootScope.$apply();
+        });
+      },
+      emit: function(eventType, data) {
+        _socket.emit(eventType, data);
+      }
+    };
+  }]);
 ```
 Use the io service in a controller:
 ```javascript

diff --git a/socket.io_Express_Angular.md b/socket.io_Express_Angular.md
@@ -77,18 +77,18 @@ angular.module('example')
 .factory('io', ['$window', '$rootScope', function($window, $rootScope) {
   var _socket = $window.io('//localhost:3000');
     return {
-      on: function(eventType, cb) {
-        _socket.on(eventType, function() {
-          cb(); 
-          //NOTE: calling $apply will ensure that any model changes are reflected in the view
-          $rootScope.$apply();
-        });
-      },
-      emit: function(eventType, data) {
-        _socket.emit(eventType, data);
-      }
-    };
-  }]);
+    on: function(eventType, cb) {
+      _socket.on(eventType, function() {
+        cb(); 
+        //NOTE: calling $apply will ensure that any model changes are reflected in the view
+        $rootScope.$apply();
+      });
+    },
+    emit: function(eventType, data) {
+      _socket.emit(eventType, data);
+    }
+  };
+}]);
 ```
 Use the io service in a controller:
 ```javascript

diff --git a/socket.io_Express_Angular.md b/socket.io_Express_Angular.md
@@ -80,7 +80,7 @@ angular.module('example')
       on: function(eventType, cb) {
         _socket.on(eventType, function() {
           cb(); 
-          //NOTE: calling $apply will ensure that any model changes are reflected in the client view
+          //NOTE: calling $apply will ensure that any model changes are reflected in the view
           $rootScope.$apply();
         });
       },

diff --git a/socket.io_Express_Angular.md b/socket.io_Express_Angular.md
@@ -28,7 +28,7 @@ Include the following code in your app.js module (other standard Express module
 var express = require('express');
 var http = require('http');
 var io = require('socket.io');
-var routes = require('../routes/index');
+var routes = require('./routes/index');
 
 var app = express();
 

diff --git a/socket.io_Express_Angular.md b/socket.io_Express_Angular.md
@@ -28,6 +28,7 @@ Include the following code in your app.js module (other standard Express module
 var express = require('express');
 var http = require('http');
 var io = require('socket.io');
+var routes = require('../routes/index');
 
 var app = express();
 
@@ -52,6 +53,8 @@ io.on('connection', function(socket) {
   console.log('socket.io connection made');
 });
 
+app.use('/', routes);
+
 server.listen('3000');
 ```
 You can now emit socket.io events from any route handler:

diff --git a/socket.io_Express_Angular.md b/socket.io_Express_Angular.md
@@ -56,11 +56,16 @@ server.listen('3000');
 ```
 You can now emit socket.io events from any route handler:
 ```javascript
+var express = require('express');
+var router = express.Router();
+
 router.post('/', function(req, res, next) {
   req.io.emit('some_event');
   //do some stuff
   req.io.emit("some_other_event"); //we did some stuff - emit a related event
 });
+
+module.exports = router;
 ```
 #Angular + socket.io
 Create a service that wraps the socket.io global object:

diff --git a/socket.io_Express_Angular.md b/socket.io_Express_Angular.md
@@ -19,8 +19,8 @@ html(ng-app="example")
     script(type='text/javascript' src='/angular-resource/angular-resource.js')
     script(type='text/javascript' src='/angular-route/angular-route.js')
     script(type='text/javascript' src='/javascripts/app.js')
-    script(type='text/javascript' src='/javascripts/controllers.js')
     script(type='text/javascript' src='/javascripts/services.js')
+    script(type='text/javascript' src='/javascripts/controllers.js')
 ```
 ## Create socket.io middleware
 Include the following code in your app.js module (other standard Express module dependancies and middleware left out for brevity):

diff --git a/socket.io_Express_Angular.md b/socket.io_Express_Angular.md
@@ -2,7 +2,7 @@ Socket.io integration between and Express and Angular app is a breeze. I'll outl
 
 # Express + socket.io
 ## Reference socket.io in layout.jade
-```npm install socket.io --save``` and then reference in your layout.jade file:
+```npm install socket.io --save``` and then reference socket.io in your layout.jade file:
 ```jade
 doctype html
 html(ng-app="example")

diff --git a/socket.io_Express_Angular.md b/socket.io_Express_Angular.md
@@ -2,7 +2,7 @@ Socket.io integration between and Express and Angular app is a breeze. I'll outl
 
 # Express + socket.io
 ## Reference socket.io in layout.jade
-```npm install socket.io``` and then reference in your layout.jade file:
+```npm install socket.io --save``` and then reference in your layout.jade file:
 ```jade
 doctype html
 html(ng-app="example")

diff --git a/socket.io_Express_Angular.md b/socket.io_Express_Angular.md
@@ -82,7 +82,7 @@ angular.module('example')
     };
   }]);
 ```
-Use the service in a controller:
+Use the io service in a controller:
 ```javascript
 angular.module('example')
   .controller('MainCtrl', ['io', function(io) {

diff --git a/socket.io_Express_Angular.md b/socket.io_Express_Angular.md
@@ -67,20 +67,20 @@ Create a service that wraps the socket.io global object:
 ```javascript
 angular.module('example')
 .factory('io', ['$window', '$rootScope', function($window, $rootScope) {
-    var _socket = $window.io('//localhost:3000');
-		return {
-			on: function(eventType, cb) {
-				_socket.on(eventType, function() {
-					cb(); 
-					//NOTE: calling $apply will ensure that any model changes are reflected in the client view
-					$rootScope.$apply();
-			  });
-			},
-			emit: function(eventType, data) {
-				_socket.emit(eventType, data);
-			}
-		};
-	}]);
+  var _socket = $window.io('//localhost:3000');
+    return {
+      on: function(eventType, cb) {
+        _socket.on(eventType, function() {
+          cb(); 
+          //NOTE: calling $apply will ensure that any model changes are reflected in the client view
+          $rootScope.$apply();
+        });
+      },
+      emit: function(eventType, data) {
+        _socket.emit(eventType, data);
+      }
+    };
+  }]);
 ```
 Use the service in a controller:
 ```javascript

diff --git a/socket.io_Express_Angular.md b/socket.io_Express_Angular.md
@@ -66,8 +66,8 @@ router.post('/', function(req, res, next) {
 Create a service that wraps the socket.io global object:
 ```javascript
 angular.module('example')
-	.factory('io', ['$window', '$rootScope', function($window, $rootScope) {
-		var _socket = $window.io('//localhost:3000');
+.factory('io', ['$window', '$rootScope', function($window, $rootScope) {
+    var _socket = $window.io('//localhost:3000');
 		return {
 			on: function(eventType, cb) {
 				_socket.on(eventType, function() {

diff --git a/socket.io_Express_Angular.md b/socket.io_Express_Angular.md
@@ -72,7 +72,8 @@ angular.module('example')
 			on: function(eventType, cb) {
 				_socket.on(eventType, function() {
 					cb(); 
-					$rootScope.$apply(); //NOTE: calling $apply will ensure that any model changes are reflected in the client view
+					//NOTE: calling $apply will ensure that any model changes are reflected in the client view
+					$rootScope.$apply();
 			  });
 			},
 			emit: function(eventType, data) {

diff --git a/socket.io_Express_Angular.md b/socket.io_Express_Angular.md
@@ -73,7 +73,7 @@ angular.module('example')
 				_socket.on(eventType, function() {
 					cb(); 
 					$rootScope.$apply(); //NOTE: calling $apply will ensure that any model changes are reflected in the client view
-				});
+			  });
 			},
 			emit: function(eventType, data) {
 				_socket.emit(eventType, data);

diff --git a/socket.io_Express_Angular.md b/socket.io_Express_Angular.md
@@ -57,9 +57,9 @@ server.listen('3000');
 You can now emit socket.io events from any route handler:
 ```javascript
 router.post('/', function(req, res, next) {
-  req.io.emit('some event');
+  req.io.emit('some_event');
   //do some stuff
-  req.io.emit("some other event - now that we've done stuff");
+  req.io.emit("some_other_event"); //we did some stuff - emit a related event
 });
 ```
 #Angular + socket.io
@@ -80,4 +80,14 @@ angular.module('example')
 			}
 		};
 	}]);
+```
+Use the service in a controller:
+```javascript
+angular.module('example')
+  .controller('MainCtrl', ['io', function(io) {
+    this.state = 'something';
+  	io.on('some_event', function() {
+		  this.state = 'something else';
+	  }.bind(this));
+  }]);
 ```
diff --git a/socket.io_Express_Angular.md b/socket.io_Express_Angular.md
@@ -62,7 +62,7 @@ router.post('/', function(req, res, next) {
   req.io.emit("some other event - now that we've done stuff");
 });
 ```
-#Angluar + socket.io
+#Angular + socket.io
 Create a service that wraps the socket.io global object:
 ```javascript
 angular.module('example')

diff --git a/socket.io_Express_Angular.md b/socket.io_Express_Angular.md
@@ -5,7 +5,7 @@ Socket.io integration between and Express and Angular app is a breeze. I'll outl
 ```npm install socket.io``` and then reference in your layout.jade file:
 ```jade
 doctype html
-html(ng-app="angular_example")
+html(ng-app="example")
   head
     title= title
     link(rel='stylesheet', href='/bootstrap/dist/css/bootstrap.css')
@@ -61,4 +61,23 @@ router.post('/', function(req, res, next) {
   //do some stuff
   req.io.emit("some other event - now that we've done stuff");
 });
+```
+#Angluar + socket.io
+Create a service that wraps the socket.io global object:
+```javascript
+angular.module('example')
+	.factory('io', ['$window', '$rootScope', function($window, $rootScope) {
+		var _socket = $window.io('//localhost:3000');
+		return {
+			on: function(eventType, cb) {
+				_socket.on(eventType, function() {
+					cb(); 
+					$rootScope.$apply(); //NOTE: calling $apply will ensure that any model changes are reflected in the client view
+				});
+			},
+			emit: function(eventType, data) {
+				_socket.emit(eventType, data);
+			}
+		};
+	}]);
 ```
diff --git a/socket.io_Express_Angular.md b/socket.io_Express_Angular.md
@@ -59,6 +59,6 @@ You can now emit socket.io events from any route handler:
 router.post('/', function(req, res, next) {
   req.io.emit('some event');
   //do some stuff
-  req.io.emit('some other event - now that we\'ve done stuff');
+  req.io.emit("some other event - now that we've done stuff");
 });
 ```
diff --git a/socket.io_Express_Angular.md b/socket.io_Express_Angular.md
@@ -58,5 +58,7 @@ You can now emit socket.io events from any route handler:
 ```javascript
 router.post('/', function(req, res, next) {
   req.io.emit('some event');
+  //do some stuff
+  req.io.emit('some other event - now that we\'ve done stuff');
 });
 ```
diff --git a/socket.io_Express_Angular.md b/socket.io_Express_Angular.md
@@ -53,4 +53,10 @@ io.on('connection', function(socket) {
 });
 
 server.listen('3000');
+```
+You can now emit socket.io events from any route handler:
+```javascript
+router.post('/', function(req, res, next) {
+  req.io.emit('some event');
+});
 ```
diff --git a/socket.io_Express_Angular.md b/socket.io_Express_Angular.md
@@ -48,7 +48,8 @@ app.use(function(req, res, next) {
   next();
 });
 io.on('connection', function(socket) {
-  log.info('socket.io connection made');
+  //log.info('socket.io connection made');
+  console.log('socket.io connection made');
 });
 
 server.listen('3000');

diff --git a/socket.io_Express_Angular.md b/socket.io_Express_Angular.md
@@ -50,4 +50,6 @@ app.use(function(req, res, next) {
 io.on('connection', function(socket) {
   log.info('socket.io connection made');
 });
+
+server.listen('3000');
 ```
diff --git a/socket.io_Express_Angular.md b/socket.io_Express_Angular.md
@@ -23,7 +23,7 @@ html(ng-app="angular_example")
     script(type='text/javascript' src='/javascripts/services.js')
 ```
 ## Create socket.io middleware
-Include the following code in your app.js module (other standard Express module dependancies left out for brevity):
+Include the following code in your app.js module (other standard Express module dependancies and middleware left out for brevity):
 ```javascript
 var express = require('express');
 var http = require('http');

diff --git a/socket.io_Express_Angular.md b/socket.io_Express_Angular.md
@@ -21,4 +21,33 @@ html(ng-app="angular_example")
     script(type='text/javascript' src='/javascripts/app.js')
     script(type='text/javascript' src='/javascripts/controllers.js')
     script(type='text/javascript' src='/javascripts/services.js')
+```
+## Create socket.io middleware
+Include the following code in your app.js module (other standard Express module dependancies left out for brevity):
+```javascript
+var express = require('express');
+var http = require('http');
+var io = require('socket.io');
+
+var app = express();
+
+/**
+ * Create HTTP server.
+ */
+
+var server = http.createServer(app);
+
+/**
+ * Setup custom app middleware
+ */
+
+/* setup socket.io */
+io = io(server);
+app.use(function(req, res, next) {
+  req.io = io;
+  next();
+});
+io.on('connection', function(socket) {
+  log.info('socket.io connection made');
+});
 ```