Javascript代码未在PUG / Jade文件上运行

Question

我正在按照本教程使用socket.io实现井字游戏： https ://ayushgp.github.io/Tic-Tac-Toe-Socket-IO/。

但是我也想使用登录系统。

当用户登录时，它成功转到了/views/game.pug上的此页面（我将html转换为pug）。

doctype html
html
  head
    title Tic Tac Toe
    link(rel='stylesheet', href='/css/main.css')
    link(rel='stylesheet', href='/node_modules/skeleton-css/css/skeleton.css')
  body
    .container
      .menu
        h1 Tic - Tac - Toe
        h3 How To Play
        ol
          li Player 1 Create a new game by entering the username
          li
            | Player 2 Enter another username and the room id that is displayed on first window.
          li Click on join game. 
        h4 Create a new Game
        input#nameNew(type='text', name='name', placeholder='Enter your name', required='')
        button#new New Game
        br
        br
        h4 Join an existing game
        input#nameJoin(type='text', name='name', placeholder='Enter your name', required='')
        input#room(type='text', name='room', placeholder='Enter Game ID', required='')
        button#join Join Game
      .gameBoard
        h2#userHello
        h3#turn
        table.center
          tr
            td
              button#button_00.tile
            td
              button#button_01.tile
            td
              button#button_02.tile
          tr
            td
              button#button_10.tile
            td
              button#button_11.tile
            td
              button#button_12.tile
          tr
            td
              button#button_20.tile
            td
              button#button_21.tile
            td
              button#button_22.tile
    .container
    script(src='/node_modules/jquery/dist/jquery.min.js')
    script(src='/socket.io/socket.io.js')
    script(src='/js/main2.js')

很好 但是，当我单击ID为#new的按钮时，没有任何反应。 这是我得到的错误： https : //i.imgur.com/83p72Ag.png 。

这是main2.js的相关部分，位于/public/js/main2.js上：

  $('#new').on('click', () => {
    const name = $('#nameNew').val();
    if (!name) {
      alert('Please enter your name.');
      return;
    }
    socket.emit('createGame', { name });
    player = new Player(name, P1);
  });

编辑：

文件的位置：

/public/css/main.css上的main.css

skeleton.css上/node_modules/skeleton-css/css/skeleton.css

/node_modules/jquery/dist/jquery.min.js上的jquery.min.js

/node_modules/socket.io-client/dist/socket.io.js上的socket.io.js

/public/js/main2.js上的main2.js

app.js（仅显示相关部分）：

const express = require('express');
const path = require('path');
const app = express();
const server = require('http').Server(app);
const io = require('socket.io')(server);
app.use(express.static('.'));
//Load View engine
app.engine('pug', require('pug').__express);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

//Set public folder
app.use(express.static(path.join(__dirname, 'public')));

//This get request is sent after the user logs in. It works fine
    app.get('/users/game', function(req, res) {
        res.render('game', {
          title:'Game'
      });
    });

io.on('connection', (socket) => {
//See full code here:https://github.com/ayushgp/tic-tac-toe-socket-io/blob/master/index.js
}

let articles = require('./routes/articles');
let users = require('./routes/users');
app.use('/articles', articles);
app.use('/users', users);

另外，我的main2.js文件与此文件相同： https : //github.com/ayushgp/tic-tac-toe-socket-io/blob/master/main.js

EDIT2：完整的app.js代码（相关部分是对用户/游戏的获取请求：

const express = require('express');
const path = require('path');
const app = express();
const server = require('http').Server(app);
const io = require('socket.io')(server);
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const expressValidator = require('express-validator');
const flash = require('connect-flash');
const session = require('express-session');
const config = require('./config/database');
const passport = require('passport');

let rooms = 0;

app.use(express.static('.'));

mongoose.connect(config.database, {
  useMongoClient: true
});
let db = mongoose.connection;

//Check connection
db.once('open', function(){
  console.log('Connected to MONGOdb')
});

//Check for DB errors
db.on('error', function(err){
  console.log(err);
});

//Bring in models
let Article = require('./models/article');

//Load View Engine
app.engine('pug', require('pug').__express);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

// Boddy parser middlware
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())

//Set public folder
app.use(express.static(path.join(__dirname, 'public')));

//Express Session Middleware
app.set('trust proxy', 1) // trust first proxy
app.use(session({
  secret: 'keyboard cat',
  resave: true,
  saveUninitialized: true,
  cookie: { secure: false }
}));

//Express Messages Middleware
app.use(require('connect-flash')());
app.use(function (req, res, next) {
  res.locals.messages = require('express-messages')(req, res);
  next();
});

//Express Messages Middleware
app.use(expressValidator());

//Passport Config
require('./config/passport')(passport);
//Passport Middleware
app.use(passport.initialize());
app.use(passport.session());

app.get('*', function(req, res, next){
  res.locals.user = req.user || null;
  next();
});


//Home ROute
app.get('/', function(req, res) {
  Article.find({}, function(err, articles){
    if(err){
      console.log(err);
    } else {
      res.render('index', {
        title:'Articles',
        articles: articles
      });
    }
  });
});

app.get('/users/game', function(req, res) {
    res.render('game', {
      title:'Game'
  });
});

io.on('connection', (socket) => {

    // Create a new game room and notify the creator of game.
    socket.on('createGame', (data) => {
        socket.join(`room-${++rooms}`);
        socket.emit('newGame', { name: data.name, room: `room-${rooms}` });
    });

    // Connect the Player 2 to the room he requested. Show error if room full.
    socket.on('joinGame', function (data) {
        var room = io.nsps['/'].adapter.rooms[data.room];
        if (room && room.length === 1) {
            socket.join(data.room);
            socket.broadcast.to(data.room).emit('player1', {});
            socket.emit('player2', { name: data.name, room: data.room })
        } else {
            socket.emit('err', { message: 'Sorry, The room is full!' });
        }
    });

    /**
       * Handle the turn played by either player and notify the other.
       */
    socket.on('playTurn', (data) => {
        socket.broadcast.to(data.room).emit('turnPlayed', {
            tile: data.tile,
            room: data.room
        });
    });

    /**
       * Notify the players about the victor.
       */
    socket.on('gameEnded', (data) => {
        socket.broadcast.to(data.room).emit('gameEnd', data);
    });
});

//Route files
let articles = require('./routes/articles');
let users = require('./routes/users');
app.use('/articles', articles);
app.use('/users', users);


//Start Sever
app.listen(3000, function() {
  console.log('Server running');
});

Answer 1

该代码块将不起作用：

script(src='node_modules/jquery/dist/jquery.min.js')

请尝试这样：

app.use('/scripts', 
    express.static(path.join(__dirname, 'node_modules/jquery/dist')),
    // add some others
    );

app.use('/styles', 
    express.static(path.join(__dirname, '/node_modules/skeleton-css/css')),
    // add some others
    );

在视图上：

script(src='/scripts/jquery.min.js')
link(type='text/stylesheet' href='/styles/skeleton.css')

而且您不需要套接字客户端的socket-io-client模块。

在代码块上，如果要使用同一原始主机的套接字连接，则不需要socket-io-client模块。

如果您是使用socket.io创建套接字服务器的，则在使用视图模板时可以包括如下所示的socket.io脚本。

script(type='text/javascript', src='/socket.io/socket.io.js')

Answer 2

根据控制台屏幕抓取 ，这里至少存在两个问题：

1. 您的script(src='node_modules/jquery/dist/jquery.min.js')服务器端路由（如果有的话script(src='node_modules/jquery/dist/jquery.min.js')不起作用，因此jQuery永远不会加载到网页中。 因此，没有尝试使用jQuery的尝试。

2. 您的socket.io服务器未在服务器上正确启动或初始化。

为了提供修复建议，我们需要查看相关的服务器端代码，并且需要知道game.pug中引用的所有资源在服务器端文件系统中的完整位置（完整路径）。 您或者缺少jQuery文件的路由定义，或者路由定义中存在错误。

确实看起来main2.js正在正确加载，尽管由于缺少jQuery它立即遇到错误。

---

仅供参考，使用如下脚本路径：

script(src='/node_modules/jquery/dist/jquery.min.js')

通常不认为这是一种好的做法，因为它会将您公开并绑定到特定的服务器端文件结构。 通常，您将改为执行以下操作：

app.use("/jquery", express.static(path.join(__dirname, "/node_modules/jQuery/dist")));

然后，在客户端中使用它：

script(src='/jquery/jquery.min.js')

现在，您公开的唯一目录是/node_modules/jQuery/dist并且您尚未在客户端网页和服务器端文件结构之间创建硬链接。

您将对需要绘制的每个dist目录重复该过程。 现在，您已经授予了对整个node_modules服务器端目录的公共访问权限，而这node_modules您想要做的。

---

另外，当您的socket.io服务器在服务器上正常工作时，它具有socket.io.js的内置路由。 您可以在客户端中使用它：

script(src='/socket.io/socket.io.js')

并且，socket.io服务器将从该路由自动为socket.io.js提供服务器。 您不必为此手动创建路由。

---

为了使socket.io正常工作，请更改此设置；

//Start Sever
app.listen(3000, function() {
  console.log('Server running');
});

对此：

//Start Sever
server.listen(3000, function() {
  console.log('Server running');
});

在这两行代码中，您创建了一个Web服务器并将socket.io绑定到该服务器：

const server = require('http').Server(app);
const io = require('socket.io')(server);

但是，然后使用app.listen()创建了另一台Web服务器并启动了它，却从未启动过socket.io连接到的服务器。 相反，您想使用server.listen(...)来启动将socket.io附加到的那个。