我正在用 Express、Handlebars 和 Socket.IO 做一個個人專案。我很好地設定了 Express 和 Handlebars 部分,但是當我嘗試將客戶端連接到 socket.io(通過將腳本標記放在頁面上)時,它沒有找到它。我試過安裝“socket.io-client”,但它也沒有作業,與出現在 socket.io 網站上的 CDN 安裝相同。
這是我的服務器:
const express = require('express');
const app = express();
const port = 3000;
const exphbs = require('express-handlebars');
const engine = exphbs.engine;
const http = require('http');
const socketio = require('socket.io');
const server = http.createServer(app);
const io = socketio(server);
app.engine('handlebars', engine());
app.set('view engine', 'handlebars');
app.set('views', './views');
app.use(express.static('public')); //Expongo al lado cliente la carpeta "public"
io.on('connection', socket => {
console.log(`Socket ${socket.id} connected`)
})
app.get('/', (req, res) => {
res.render("home");
})
app.get('/Hola', (req, res) => {
res.render("hola");
})
app.listen(port, ()=> console.log(`App listening to port ${port}`));
我把腳本標簽放在主布局上:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Card Game</title>
<link rel="stylesheet" href="/css/styles.css">
</head>
<body>
<h1 id="titulo">Card Game</h1>
{{{body}}}
<script src="/socket.io/socket.io.js"></script>
<script src="/js/main.js"></script>
</body>
</html>
該程式在找到位于 public 檔案夾中的 main.js 檔案時沒有問題,但它似乎無法找到 socket.io.js。
運行程式時出現的控制臺錯誤的螢屏截圖
任何幫助將不勝感激!
uj5u.com熱心網友回復:
問題是您正在創建兩個 http 服務器,將 socket.io 和 Express 附加到其中一個,但從未啟動該服務器。另一個只連接了 Express。
您創建一個 http 服務器并將 socket.io 附加到它:
const server = http.createServer(app);
const io = socketio(server);
但是,該服務器從未啟動,因此它沒有運行。所以,socket.io 沒有運行。
你用這個創建另一個 http 服務器:
app.listen(port, ()=> console.log(`App listening to port ${port}`));
這個已經啟動,但沒有附加 socket.io,因此沒有安裝任何東西來提供服務/socket.io/socket.io.js,因此瀏覽器在請求它時會收到 404。
要修復,請更改這行代碼:
app.listen(port, ()=> console.log(`App listening to port ${port}`));
對此:
server.listen(port, ()=> console.log(`App listening to port ${port}`));
作為進一步解釋的一點,在 內部app.listen(),它執行以下操作:
app.listen = function listen() {
var server = http.createServer(this);
return server.listen.apply(server, arguments);
};
因此,您可以看到它正在創建另一個 http 服務器,而不是您將 socket.io 附加到的那個。您顯然不需要創建另一個 - 您只需要呼叫.listen()您已經創建的 http 服務器。
轉載請註明出處,本文鏈接:https://www.uj5u.com/houduan/395855.html
標籤:节点.js 表达 插座 socket.io 把手.js
