0

我想在聊天客户端中收集单个击键事件（keydown 和 keyup）。我有以下基本代码，它设置了一个聊天应用程序并将每条消息发送到一个 mongoDB 集群。我想为每个击键事件而不是每条消息创建一个新记录。以下是我尝试过的，至少将击键事件打印到控制台，但事件似乎不起作用。下面是基本的 index.html、index.js 和 messages.js 中的 mongoose Schema。

我尝试过的：在index.html中，我添加了：

     var input = document.getElementById('input');

      // DOES NOT PRINT KEYSTROKES
      input.addEventListener('keydown', (event) => {
            console.log(`key=${event.key},code=${event.code}`);
        });

任何意见，将不胜感激。

索引.html

<!DOCTYPE html>
<html>
  <head>
    <title>Socket.IO chat</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="/socket.io/socket.io.js"></script>

    <script>
      var socket = io();

      var messages = document.getElementById('messages');
      var form = document.getElementById('form');
      var input = document.getElementById('input');

      // DOES NOT PRINT KEYSTROKES
      input.addEventListener('keydown', (event) => {
            console.log(`key=${event.key},code=${event.code}`);
        });

      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);
      });
    </script>
  </body>
</html>

index.js

const app = require('express')();
const http = require('http').Server(app);
const io = require('socket.io')(http);
const port = process.env.PORT || 3000;
const mongoose = require('mongoose');
const Msg = require('./models/messages');
const mongoDB = 'mongodb+srv://Adam-gk:<mypassword>@cluster0.oqwbc.mongodb.net/message-database?retryWrites=true&w=majority'
mongoose.connect(mongoDB, { useNewUrlParser: true, useUnifiedTopology: true }).then(()=>{
  console.log('connected to db');
}).catch(err => console.log(err));

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', (socket) => {
  socket.on('chat message', msg => {
    const message = new Msg({msg});
    message.save().then(()=>{
      io.emit('chat message', msg);
    })    
  });
});

http.listen(port, () => {
  console.log(`Socket.IO server running at http://localhost:${port}/`);
});

模型/消息.js

const mongoose = require('mongoose');
const msgSchema = new mongoose.Schema(
    {
        msg: {
            type:String,
            required:true
        }
    },
    {
        timestamps: true
    }
);

const Msg = mongoose.model('msg', msgSchema);
module.exports = Msg;
4

1 回答 1

1

如果代码console.log不起作用，那么它会让我相信您对 DOM 中输入元素的引用存在问题。代码可能在浏览器将 HTML 元素呈现到 DOM 之前快速执行，因此事件没有正确附加。

当浏览器最终渲染所有 DOM 元素时，会触发一个事件。我认为一旦您的代码在此事件后触发，keydown 事件应该可以正常工作。

尝试注释掉这两行（像这样）：

// var input = document.getElementById('input');

// DOES NOT PRINT KEYSTROKES
// input.addEventListener('keydown', (event) => {
//  console.log(`key=${event.key},code=${event.code}`);
// });

并将其添加到您的脚本标签中：

document.addEventListener('DOMContentLoaded', () => {
 var input = document.getElementById('input');

 input.addEventListener('keydown', (event) => {
   console.log(`key=${event.key},code=${event.code}`);
 });
})

这有帮助吗？

始终等待此事件的一般最佳做法。大多数框架都会为您抽象出来，您不再看到它，但您正在手工制作 javascript，这是您必须自己添加的东西。

OP 的附加信息： 要将消息从前端（html 文件）发送到您发出消息的服务器，请在输入的事件处理程序中添加类似这样的内容：

socket.emit('the name of your new event goes here', /* something that has a value here */);

然后在您的服务器上，您需要添加一个新事件来侦听这个新的聊天事件'the name of your new event goes here'，例如：

//.          v------- the event name is here       v---- msg is here  
socket.on('the name of your new event goes here', msg => {
  const message = new Msg({msg});
  // do something with this message... like `console.log(message)` ‍♂️
   
});

确保在（同样，服务器端代码）中添加该代码：

io.on('connection', (socket) => { /* inside here with the other events */ })
于 2021-04-30T00:30:58.147 回答