Incompatible with bootstrap? #127

loudking · 2016-11-17T07:38:14Z

Hi, I encountered this weird issue - When I commented out bootstrap or other css/js files this passport.socketio is working well but when those modules are loaded, passport.socketio is not stable. Sometimes socket.io client is not created and more than one session files are created. Can you please confirm and fix? Thanks.

my home1.html

<html>
<head>
  <title>Recon Frontend</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/bootstrap-theme.min.css">
  <link rel="stylesheet" href="css/jquery.tablesorter.pager.min.css">
  <link rel="stylesheet" href="css/theme.bootstrap.min.css">
  <link rel="stylesheet" href="css/daterangepicker.css">
  <link rel="stylesheet" href="css/custom.min.css">
</head>
<body>
  <h2 id="user">NO USER INFO FOUND!</h2>
  <a href="logout">Log out</a>
  <script src="js/socket.io.js"></script>
  <script src="js/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/jquery.tablesorter.js"></script>
  <script src="js/jquery.tablesorter.widgets.js"></script>
  <script src="js/moment.min.js"></script>
  <script src="js/daterangepicker.js"></script>
  <script src="js/widgets/widget-pager.min.js"></script>
  <script src="js/widgets/widget-output.min.js"></script>
  <script>
    $(document).ready(function() {
        var socket = io();
        socket.emit("request_fullname");
        socket.on('respond_fullname', function(data) {
            $("#user").text(data+" LOGGED IN!");
            console.log("socket.io client fullname="+data);
        });
    });
  </script>
</body>
</html>

My server.js

var express = require('express'),
  app = express(),
  server  = require("http").createServer(app),
  io = require("socket.io")(server),
  session = require("express-session"),
  FileStore = require('connect-fs2')(session),
  passport = require('passport'),
  LocalStrategy = require('passport-local').Strategy;
var passportSocketIo = require("passport.socketio");
var records = [
  { id: 1, username: 'jack', password: 'secret', name: 'Jack'},
  { id: 2, username: 'jill', password: 'birthday', name: 'Jill'}
];

passport.use(new LocalStrategy(
  function(username, password, cb) {
    console.log("username="+username+" password="+password);
    findByUsername(username, function(err, user) {
      if (err) { console.log("err"); return cb(err); }
      if (!user) { console.log("user not found"); return cb(null, false); }
      if (user.password != password) { console.log("password not match"); return cb(null, false); }
      console.log("login success");
      return cb(null, user);
    });
  }
));
passport.serializeUser(function(user, cb) {
    console.log("serializeUser="+JSON.stringify(user));
    cb(null, user.id);
});
passport.deserializeUser(function(id, cb) {
    console.log("deserializeUser="+id);
    findById(id, function (err, user) {
      if (err) { return cb(err); }
      cb(null, user);
    });
});
var options={
    store: new FileStore,
    secret: "my-secret",
    resave: true,
    saveUninitialized: true
};
app.use(require('cookie-parser')())
.use(require('body-parser').urlencoded({ extended: true }))
.use(session(options))
.use(passport.initialize())
.use(passport.session())
.use('/js', express.static(__dirname + '/js'))
.use('/css', express.static(__dirname + '/css'));

io.use(passportSocketIo.authorize({
  secret: options.secret,
  store: options.store
}));

io.on("connection", function(socket) {
    console.log("new client id="+socket.id);
    socket.on('request_fullname', function() {
        console.log("request_fullname: "+JSON.stringify(socket.request.user));
        socket.emit('respond_fullname', socket.request.user.name);
    });
});

app.get('/', function(req, res) {
    res.sendFile(__dirname + '/index1.html');
}).get('/home',
  require('connect-ensure-login').ensureLoggedIn('/'),
  function(req, res) {
    res.sendFile(__dirname + '/home1.html');
}).post('/login',
  passport.authenticate('local', {successRedirect: '/home',
                                  failureRedirect: '/'
})).get('/logout', function(req, res){
    req.session.destroy();
    res.redirect('/');
});

server.listen(3000);

function findByUsername(username, cb)
{
    for (var i = 0, len = records.length; i < len; i++) {
        var record = records[i];
        if (record.username === username) {
            return cb(null, record);
        }
    }
    return cb(null, null);
}
function findById(id, cb)
{
    var idx = id - 1;
    if (records[idx]) {
        cb(null, records[idx]);
    } else {
        cb(new Error('User ' + id + ' does not exist'));
    }
}

The text was updated successfully, but these errors were encountered:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Incompatible with bootstrap? #127

Incompatible with bootstrap? #127

loudking commented Nov 17, 2016

Incompatible with bootstrap? #127

Incompatible with bootstrap? #127

Comments

loudking commented Nov 17, 2016