Angular + Node.js HTTP & HTTPS (SSL) - angularjs

Question

I want to use https for the post requests in my payment view. I stumbled over diff tutorials and now my setup is the following (and I still don't get it running):
Certificates
I generated certificates for my development environment using this tutorial:
http://greengeckodesign.com/blog/2013/06/15/creating-an-ssl-certificate-for-node-dot-js/
Node.js
I followed answer #2 to setup the http and https server in node:
Listen on HTTP and HTTPS for a single express app
It looks like that:
environment = require('./config/config.js')()
express = require('express')
bodyParser = require('body-parser')
app = express()
portHTTP = process.env.PORT || 61361
portHTTPS = 3030
mongoose = require('mongoose')
morgan = require('morgan')
http = require('http')
https = require('https')
socket = require('socket.io')
#SSL Server
fs = require('fs')
sslOptions = {
key: fs.readFileSync(__dirname + '/config/ssl/server.key'),
cert: fs.readFileSync(__dirname + '/config/ssl/server.crt'),
ca: fs.readFileSync(__dirname + '/config/ssl/ca.crt'),
requestCert: true,
rejectUnauthorized: false
}
#Database
configDB = require('./config/database.js')(environment)
mongoose.connect(configDB.url,{auth:{authdb:configDB.authdb}}, (err)->
if (err)
console.log(err)
)
db = mongoose.connection
db.on('error', console.error.bind(console, 'connection error:'))
db.once('open', () ->
console.log "Database established"
)
#Express Application
app.use(morgan('dev'))# log every request to the console
app.use(bodyParser.urlencoded({ extended: true }))
app.use(bodyParser.json())
rootPath = __dirname + '/../../'
app.use('/bower_components', express.static(rootPath + 'bower_components'))
app.use('/partials', express.static(__dirname + '/../partials'))
# Routes
require('./node/routes.js')(app, db) # load our routes and pass in our app and fully configured passport
# Launch the application
https.createServer(sslOptions,app).listen(portHTTPS, () ->
console.log("Secure Express server listening on port #{portHTTPS}")
)
http.createServer(app).listen(portHTTP)
io = socket.listen(https)
#app.listen(portHTTP)
console.log('Unsecure Express server listening on port #{portHTTP} environment: #{environment}')
Angularjs
I installed the angular module:
https://github.com/btford/angular-socket-io
And added it to my index.coffee
angular.module "app", [lots of dependencies, 'btford.socket-io', 'myCodeService']
.config ($stateProvider, $urlRouterProvider) ->
...states...
.factory('mySocket', (socketFactory) ->
return socketFactory({
ioSocket: io.connect('https://localhost:3030/',{secure: true})
#ioSocket: io.connect('https://cdn.socket.io/socket.io-1.3.4.js',{secure: true})
})
)
I added the two script tags into my index.html
<script src="../bower_components/angular-socket-io/socket.js"></script>
<script src="http://localhost:3030/socket.io/socket.io.js"></script>
Gulp Setup
And I serve in gulp with nodemon and browsersync
gulp.task('serve',['watch'], function(cb){
var called = false;
return nodemon({
script: paths.tmp + '/serve/server.js',
watch: [paths.src + '/node', paths.src + '/config'],
ext: 'coffee',
tasks: ['templateCache', 'partials_tmp'],
env: { 'NODE_ENV': 'development' } ,
nodeArgs: ['--debug=9999']
})
....
function browserSyncInit(files, browser) {
browser = browser === undefined ? 'default' : browser;
browserSync.instance = browserSync.init(files, {
startPath: '/#/',
browser: browser,
proxy: "http://localhost:61361"
});
}
I get an empty response from socket.io and I don't see anything in my browser which bugs me to accept the certificate.
There is an https option for browsersync but I don't really know how to split the traffic/ or if this is done automatically in node.js.

Answer 1

io = socket.listen(https) is incorrect. You should be passing the server instance, not the https module:
// ...
var srv = https.createServer(sslOptions,app);
srv.listen(portHTTPS, () ->
console.log("Secure Express server listening on port #{portHTTPS}")
)
io = socket.listen(srv);
// ...
Also your <script> src that points to socket.io.js should be https and not http.

Answer 2

To split the routing in the front end this can be used:
.run ($rootScope, $window, authUserService) ->
#Listens for state changes and redirects User if he is not logged in
$rootScope.$on "$stateChangeStart", (event, toState, toParams, fromState, fromParams) ->
#After login send user to share
if toState.name is "payment" and !authUserService.isSecure()
event.preventDefault()
$window.location.href='https://localhost:3030/#/spenden'
true