在快速应用中未捕获的SyntaxError
我试图用Websockets实时数据streamChartjs但是我不断收到以下错误。
main.js：1未捕获的SyntaxError：意外的标记<
我究竟做错了什么？
我的服务器代码/ HTML看起来像这样： 
server.js
const config = require('./config.json'); const express = require('express'); const SocketServer = require('ws').Server; const path = require('path'); const PORT = config.PORT|| process.env.PORT ; const INDEX = path.join(__dirname, config.INDEX); const server = express() .use((req, res) => res.sendFile(INDEX)) .listen(PORT, () => console.log(`Listening on ${ PORT }`)); const wss = new SocketServer({ server }); wss.on('connection', (ws) => { console.log('Client connected'); ws.on('close', () => console.log('Client disconnected')); }); setInterval(() => { wss.clients.forEach((client) => { client.send(new Date().toTimeString()); }); }, 1000); 的index.html
<html> <body> <p>Hello, World</p> <p id='server-time'></p> <canvas id="myChart" width="400" height="400"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js" ></script> <script src="main.js"></script> <script> var HOST = location.origin.replace(/^http/, 'ws') var ws = new WebSocket(HOST); var el = document.getElementById('server-time'); ws.onmessage = function(event) { el.innerHTML = 'Server time: ' + event.data; }; </script> </body> </html>
main.js
console.log("hello,world"); var ctx = document.getElementById("myChart"); var myChart = new Chart(ctx, { type: 'bar', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ 'rgba(255,99,132,1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 }] }, options: { scales: { yAxes: [{ ticks: { beginAtZero:true } }] } } });
你有这样configuration你的快速应用程序：
const server = express() .use((req, res) => res.sendFile(INDEX)) .listen(PORT, () => console.log(`Listening on ${ PORT }`));
调用.use()没有指定像docsbuild议的path？ 这意味着对于您的应用程序收到的每一个请求， INDEX指定的文件将被发射。 所以，当浏览器parsingindex.html并看到一个指向main.js的<script>标签时，它会请求你的应用程序获取/main.js并获取INDEX 。 当你的浏览器期望Javascript，但得到HTML，它会抛出你在控制台中看到的SyntaxError。
尝试在您的应用中使用显式路由和中间件function（和HTTP请求types）：
app.get('/index.html', function(req, res) { res.sendFile(INDEX); }); app.get('/main.js', function(req, res) { res.sendFile('/path/to/main.js'); });
（这是一个天真的例子，但它应该让你开始。）