Question

我正在尝试使用Express-generator生成的项目来重现"chat-example" given in Socket.IO official website。我想保持生成的结构完整。我几乎将所有内容都与“聊天示例”相同，只是尝试将其适合Express-generator生成的项目。我遇到的问题是客户端无法调用脚本socket.io.js。在这里，我发布了项目文件结构，已更改/添加的代码以及错误消息。
有人能帮助我吗？非常感谢！

1.项目文件结构（*：已更改； **：新添加的文件。）

ioChat (project name)
-- bin
   -- www (*)
-- node_modules
   -- socket.io 
   -- socket.io-adapter
   -- socket.io-client
   -- socket.io-parser
   -- (many other modules)
-- public
   -- images
   -- javascripts
   -- stylesheets
      -- style.css (*)
   -- index.html (**)
-- routes
   -- index.js (*)
   -- users.js
-- views
   -- error.jade
   -- index.jade
   -- layout.jade
-- app.js
-- package-lock.json
-- package.json

2. bin \ www（添加了/// +++注释）

#!/usr/bin/env node

/**
 * Module dependencies.
 */

var app = require('../app');
var debug = require('debug')('iochat:server');
var http = require('http');
var io = require('socket.io')(http); //++++


/**
 * Get port from environment and store in Express.
 */

var port = normalizePort(process.env.PORT || '3000');
app.set('port', port);

/**
 * Create HTTP server.
 */

var server = http.createServer(app);

/**
 * Listen on provided port, on all network interfaces.
 */

server.listen(port);
server.on('error', onError);
server.on('listening', onListening);


// socket io for realtime messaging  //++++
io.on("connection", function(socket){
    socket.on("chat", function(msgin){
        var msgout = { name: msgin.name, msg: msgin.msg , mtime: new Date()};
        io.emit("chat",msgout);
    });
});


/**
 * Normalize a port into a number, string, or false.
 */

function normalizePort(val) {
  var port = parseInt(val, 10);

  if (isNaN(port)) {
    // named pipe
    return val;
  }

  if (port >= 0) {
    // port number
    return port;
  }

  return false;
}

/**
 * Event listener for HTTP server "error" event.
 */

function onError(error) {
  if (error.syscall !== 'listen') {
    throw error;
  }

  var bind = typeof port === 'string'
    ? 'Pipe ' + port
    : 'Port ' + port;

  // handle specific listen errors with friendly messages
  switch (error.code) {
    case 'EACCES':
      console.error(bind + ' requires elevated privileges');
      process.exit(1);
      break;
    case 'EADDRINUSE':
      console.error(bind + ' is already in use');
      process.exit(1);
      break;
    default:
      throw error;
  }
}

/**
 * Event listener for HTTP server "listening" event.
 */

function onListening() {
  var addr = server.address();
  var bind = typeof addr === 'string'
    ? 'pipe ' + addr
    : 'port ' + addr.port;
  debug('Listening on ' + bind);
}

3. public \ index.html（新添加）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>ioChat</title>
        <link rel="stylesheet" type="text/css" href="stylesheets/style.css">
        <script src="/socket.io/socket.io.js"></script>
        <!-- <script src="../node_modules/socket.io-client/dist/socket.io.js"></script> -->
        <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
        <script>
            $(function(){
                var socket = io();

                $("#btnSend").on("click",function(){
                    var msgout = {name:$("#senderName").val(), msg:$("#msg").val()};
                    socket.emit('chat',msgout);
                    $("#msg").val("");
                });

                socket.on("chat",function(msgin){
                    $("#msgList").append($("<li>").text(`${msgin.name} says: ${msgin.msg} (msgin.mtime)`));
                });

            });     
        </script>
    </head> 

    <body>
        <ul id="msgList"></ul>
        <div class="iptArea">
            <label for="name" class="msgItems">Name:</label>
            <input type="text" id="senderName"  class="msgItems"/
            <label for="msg"  class="msgItems">Message:</label>
            <input type="text" id="msg"  class="msgItems"/>
            <button class="msgItems" id="btnSend">Send</button>
        </div>
    </body>
</html>

4.routes \ index.js（添加了// ++注释）

var express = require('express');
var router = express.Router();

/* GET home page. Let http://localhost:3000 directly go to public\index.html*/
router.get('/'); //+++ 

module.exports = router;

5.服务器端错误消息（显然找不到404）：

GET /socket.io/socket.io.js 404 34.641 ms - 1142

6.客户端错误消息：

GET http://localhost:3000/socket.io/socket.io.js net::ERR_ABORTED 404 (Not Found)
Uncaught ReferenceError: io is not defined

Answer 1

您可以将CDN用作一种简单的方法，而不是从服务器获取文件。

签出：https://cdnjs.com/libraries/socket.io

在您的 public \ index.html

中使用它

<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>

Answer 2

经过长时间的搜索，我找到了我问题的最佳答案。请参阅A simple express socket.io tutorial using express generators.

使用Express-generator生成的项目

2 个答案: