So for some reason the web socket address is the head of my html in URL form and on load socket.io fails to connect. In the JavaScript console I get this output;
WebSocket connection to 'ws://localhost:3000/socket.io/1/websocket/%3C!DOCTYPE%20html%3E%3Chtml%20ng-app=%22myApp%22%3E%3Chead%3E%3Cmeta%20charset=%22utf8%22%3E%3Cbase%20href=%22/%22%3E%3Ctitle%3EOnSite%3C/title%3E%3Clink%20rel=%22stylesheet%22%20href=%22/css/app.css%22%3E%3Clink%20rel=%22stylesheet%22%20href=%22/css/bootstrap.min.css%22%3E%3Clink%20rel=%22stylesheet%22%20href=%22/css/pixel-admin.min.css%22%3E%3Clink%20rel=%22stylesheet%22%20href=%22/css/widgets.min.css%22%3E%3Clink%20rel=%22stylesheet%22%20href=%22/css/rtl.min.cs...app.js%22%3E%3C/script%3E%3Cscript%20src=%22js/services.js%22%3E%3C/script%3E%3Cscript%20src=%22js/controllers.js%22%3E%3C/script%3E%3Cscript%20src=%22js/filters.js%22%3E%3C/script%3E%3Cscript%20src=%22js/directives.js%22%3E%3C/script%3E%3Cscript%20src=%22js/lib/bootstrap/bootstrap.min.js%22%3E%3C/script%3E%3Cscript%20src=%22js/lib/bootstrap/pixel-admin.min.js%22%3E%3C/script%3E%3Cscript%20src=%22js/lib/jQuery/jQuery_v2.1.1.js%22%3E%3C/script%3E%3Cscript%20src=%22js/mytest.js%22%3E%3C/script%3E%3C/html%3E' failed: Connection closed before receiving a handshake response
mytest.js:6(anonymous function) mytest.js:6j jQuery_v2.1.1.js:2k.fireWith jQuery_v2.1.1.js:2x jQuery_v2.1.1.js:4(anonymous function)
I figured this must have been because of my node setup so I rebuilt the app.js but had the same result each time, but after some research I found someone who solved a very similar bug but I'm not sure how I can apply their fix to my code. app.js;
// ::::::::::::::::::::::::::::::::::::::::::::::: //
// :: Module dependencies :: //
// ::::::::::::::::::::::::::::::::::::::::::::::: //
var express = require('express');
var server = require('http').Server(app);
var io = require('socket.io')(server);
var methodOverride = require('method-override');
var morgan = require('morgan');
var cookieParser = require('cookie-parser');
var path = require('path');
var bodyParser = require('body-parser');
var mongoose = require('mongoose');
var passport = require('passport');
var bcrypt = require('bcrypt');
var randomstring = require("randomstring");
var moment = require("moment");
var api = require('./routes/api');
var app = express();
// ::::::::::::::::::::::::::::::::::::::::::::::: //
// :: Configuration :: //
// ::::::::::::::::::::::::::::::::::::::::::::::: //
// All environments
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(morgan('dev'));
app.use(methodOverride());
app.use(express.static(__dirname + '/public'));
app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());
// Database
mongoose.connect('mongodb://localhost/onsite');
var db = mongoose.connection;
db.on('error', console.error.bind(console, 'connection error:'));
db.once('open', function callback () {});
require('./models/History');
require('./models/Person');
require('./models/Zone');
require('./models/User');
// Passport Setup
require('./config/passport')(app, passport, db, mongoose);
var env = process.env.NODE_ENV || 'development';
// ::::::::::::::::::::::::::::::::::::::::::::::: //
// :: socket.io :: //
// ::::::::::::::::::::::::::::::::::::::::::::::: //
io.on('connection', function(socket){
io.emit('socket', "hello");
});
io.on('api', function(socket){
io.emit('socket', "server message");
});
// ::::::::::::::::::::::::::::::::::::::::::::::: //
// :: Start Server :: //
// ::::::::::::::::::::::::::::::::::::::::::::::: //
app.listen(process.env.PORT || 3000, function () {
console.log('\nServer listing on http://localhost:' + app.get('port'));
console.log('\t-> To stop server running: CONTROL + C ')
});
Bottom of my body where I include socket.io.min.js;
</div><script src="js/lib/socket.io.min.js"></script>
<script>
var socket = io.connect();
</script>
<script src="js/lib/angular/angular.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
<script src="js/lib/bootstrap/bootstrap.min.js"></script>
<script src="js/lib/bootstrap/pixel-admin.min.js"></script>
<script src="js/lib/jQuery/jQuery_v2.1.1.js"></script>
<script src="js/mytest.js"></script>