下面的代码检查 我运行 index.js,index.html 中的 html 在 example.com 上显示,但是 index.html 中的 client.js 给了我错误:
GET http://example.com/socket.io/client.js net::ERR_CONNECTION_REFUSED
此外,如果我在聊天框中输入一些文本并点击“发送”,而不是在 example.com 上打印消息,我会得到一个空白的 example.com/?。
这是我的 index.js
import { createRequire } from 'module';
const require = createRequire(import.meta.url);
// can now use `require` in an ESM
const app = require('express')();
const httpServer = require("http").createServer(app);
const options = { /* ... */ };
const io = require("socket.io")(httpServer, {
cors: {
origin: "http://example.com:80",
methods: ["GET", "POST"],
allowedHeaders: ["my-custom-header"],
credentials: true
}
});
import path from 'path';
const __dirname = path.resolve();
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
io.on('connection', (socket) => {
console.log('a user connected');
});
io.on("connection", socket => {
socket.on('chat message', (msg) => {
io.emit('chat message', msg);
});
});
httpServer.listen(80);
console.log("index.mjs running...");
这是我的 index.html
<!DOCTYPE html>
<html>
<head>
<title>RAMBO</title>
<style>
body { margin: 0; padding-bottom: 3rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
#form { background: rgba(99, 99, 99, 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>
<script src="/socket.io/socket.io.js"></script>
</head>
<body>
<ul id="messages"></ul>
<form id="form" action="">
<input id="input" autocomplete="off" /><button>Send</button>
</form>
<script src="/socket.io/client.js"></script>
</body>
</html>
这是我的 client.js
import { createRequire } from 'module';
const require = createRequire(import.meta.url);
// can now use `require` in an ESM
require = require("esm")(module/*, options*/)
module.exports = require("./main.js")
const io = require("socket.io-client");
const socket = io("http://api.example.com:80", {
withCredentials: true,
extraHeaders: {
"my-custom-header": "abcd"
}
})
var messages = document.getElementById('messages');
var form = document.getElementById('form');
var input = document.getElementById('input');
form.addEventListener('submit', function(e) {
e.preventDefault();
if (input.value) {
socket.emit('chat message', input.value);
input.value = '';
}
});
socket.on('chat message', function(msg) {
var item = document.createElement('li');
item.textContent = msg;
messages.appendChild(item);
window.scrollTo(0, document.body.scrollHeight);
});