我正在研究socket.io是如何工作的，做了一个简单的实时聊天，我遇到了一个问题：当我按Enter键时，页面会重新加载（否则一切都很好）。我已经尝试添加 e.preventDefault() 和 DOMContentLoaded 事件，但没有任何帮助。
索引.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<input type="text" id="inp"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/socket.io.min.js"></script>
<script src="script.js" type="module"></script>
</body>
</html>
脚本.js：
const root = document.getElementById('app');
const inp = document.getElementById('inp');
const socket = io("http://localhost:3000");
socket.on('historyLoad', (data) => {
root.innerHTML = '';
data.forEach(message => {
const div = document.createElement('div');
div.innerText = message.text;
root.append(div);
})}
);
let userName = localStorage.getItem('userName');
if (!userName) {
userName = prompt('Enter your name');
localStorage.setItem('userName', userName);
}
socket.on('message', (data) => {
console.log(data);
root.innerHTML += `<div>${data.user}: ${data.text}</div>`;
const div = document.createElement('div');
div.innerText = data.text;
root.append(div);
inp.value = '';
})
document.addEventListener('DOMContentLoaded', () => {
inp.addEventListener('keyup', (event) => {
if (event.key === 'Enter') {
event.preventDefault(); // Предотвращаем стандартное поведение браузера
const message = inp.value.trim();
if (message) {
socket.emit('message', { user: userName, text: message });
inp.value = ''; // Очищаем поле ввода
}
}
});
});
服务器.js：
const express = require('express');
const {Server} = require('socket.io');
const fs = require('fs');
const cors = require('cors');
const filepath = './data.json';
const app = express();
const server = app.listen(3000, () => {
console.log('listening on port 3000');
})
app.use(cors());
const io = new Server(server, {
cors: {
origin: '*',
methods: ['GET', 'POST']
}
})
let messages = [];
try {
if (!fs.existsSync(filepath)) {
fs.writeFileSync(filepath, '[]');
}
messages = JSON.parse(fs.readFileSync(filepath));
} catch (err) {
console.log(err)
}
io.on('connection', (socket) => {
console.log('a user connected', socket.id)
socket.emit('historyLoad', messages)
socket.on('message', (data) => {
messages.push({
user: data.user,
text: data.text
});
fs.writeFileSync(filepath, JSON.stringify(messages));
io.emit('message', data);
})
})
