主页 / user-611876

ffffrrr's questions

Martin Hope
ffffrrr
Asked: 2024-12-15 18:35:01 +0000 UTC
  • 5

我正在研究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);
    })
})
node.js