我正在尝试使用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
您可以将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>