我正在尝试使用 websockets 将实时数据流式传输到 Chartjs，但是我一直收到以下错误。
main.js:1 Uncaught SyntaxError: Unexpected token <
我做错了什么？
我的服务器代码/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
}
}]
}
}
});
最佳答案
您的 Express 应用配置如下:
const server = express()
.use((req, res) => res.sendFile(INDEX))
.listen(PORT, () => console.log(`Listening on ${ PORT }`));
调用 .use()没有指定路径，如 docs推荐？这意味着对于您的应用收到的每个请求，INDEX 指定的文件将被发射。所以当浏览器解析index.html并看到 <script>指向 main.js 的标签，它会要求您的应用程序提供 /main.js并得到 INDEX .当您的浏览器需要 Javascript 但获得 HTML 时，它会抛出您在控制台中看到的 SyntaxError。
尝试在您的应用中使用显式路由和中间件功能(以及 HTTP 请求类型):
app.get('/index.html', function(req, res) {
res.sendFile(INDEX);
});
app.get('/main.js', function(req, res) {
res.sendFile('/path/to/main.js');
});
(这是一个天真的例子，但它应该让你开始。)
关于javascript - 快速应用程序中未捕获的语法错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44590586/