socket.io 的连接由于某种原因无法工作,并且连接日志没有出现在控制台日志上。我尝试按照 socket.io 的文档一步步操作,但仍然没有任何效果...
这里是代码文件,主要可以看index.js文件中socket代码片段的
"connection"
路线,看看我的意思。
index.html 文件包含负责接收来自 form 的输入的标签。
index.js:
import express from 'express';
import { createServer } from 'node:http';
import { fileURLToPath } from 'node:url';
import { dirname, join } from 'node:path';
import { Server } from 'socket.io';
const app = express();
const port = 3000;
const server = createServer(app);
const io = new Server(server);
const __dirname = dirname(fileURLToPath(import.meta.url));
app.get('/', (req, res) => {
res.sendFile(join(__dirname, 'index.html'));
});
io.on("connection", (socket) => {
console.log("A user connected");
socket.on("chat message", (msg) => {
console.log("Message: " + msg);
});
socket.on("disconnect", () => {
console.log("User disconnected");
});
});
app.listen(port, () => {
console.log(`Listening on port ${port}`)
});
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Chat App</title>
<style>
body { margin: 0; padding-bottom: 3rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
#form { background: rgba(0, 0, 0, 0.15); padding: 0.25rem; position: fixed; bottom: 0; left: 0; right: 0; display: flex; height: 3rem; box-sizing: border-box; backdrop-filter: blur(10px); }
#input { border: none; padding: 0 1rem; flex-grow: 1; border-radius: 2rem; margin: 0.25rem; }
#input:focus { outline: none; }
#form > button { background: #333; border: none; padding: 0 1rem; margin: 0.25rem; border-radius: 3px; outline: none; color: #fff; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages > li { padding: 0.5rem 1rem; }
#messages > li:nth-child(odd) { background: #efefef; }
</style>
</head>
<body>
<ul id="messages"></ul>
<form id="form" action="">
<input id="input" autocomplete="off" /><button>Send</button>
</form>
<script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
<script>
const socket = io();
const form = document.getElementById("form");
const input = document.getElementById("input");
form.addEventListener((event) => {
event.preventDefault();
if(input.value){
socket.emit("emit message", input.value);
input.value = "";
}
});
</script>
</body>
</html>
package.json:
{
"name": "chat-app",
"version": "1.0.0",
"main": "index.js",
"type": "module",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": "",
"dependencies": {
"body-parser": "^1.20.2",
"ejs": "^3.1.9",
"express": "^4.19.2",
"socket.io": "^4.7.5"
}
}
您正在创建两个独立的Web服务器实例,将express绑定到其中一个,将socket.io绑定到另一个,并且仅启动express服务器。因此,socket.io 服务器永远不会启动,实际上应该使用与 express 相同的服务器(因为它位于同一端口)。
您可以通过更改以下内容来修复它:
app.listen(port, () => {
console.log(`Listening on port ${port}`)
});
对此:
server.listen(port, () => {
console.log(`Listening on port ${port}`)
});