sockets.io - 如何检测用户在输入表单中的输入并向所有用户广播

Question

我在客户端有这个功能（修改）：

 var textarea = $('#textarea'); var typingStatus = document.querySelector('#typing_on'); var lastTypedTime = new Date(0); var typingDelayMillis = 500; function refreshTypingStatus() { if (!textarea.is(':focus') || textarea.val() == '' || new Date().getTime() - lastTypedTime.getTime() > typingDelayMillis) { socket.emit('type' , typingStatus.innerHTML = 'No') } else { socket.emit('type' , typingStatus.innerHTML = 'Typing...') } } function updateLastTypedTime() { lastTypedTime = new Date(); } setInterval(refreshTypingStatus, 100); textarea.keypress(updateLastTypedTime); textarea.blur(refreshTypingStatus);

 <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" type="text/css" href="styles.css"> <link rel="stylesheet" type="text/css" href="styles2.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <input name="textarea" id="textarea" cols="45" rows="5"> <div id="typing_on"></div> </body>

我也在服务器端做了必要的代码，但我认为它不起作用，因为它在 io.on(connection,function(socket)) 下，但无法检测服务器端的输入或输入条件。

它不适用于其他客户端，仅对同一用户显示

有什么替代方法可以让它发挥作用吗？

Answer 1

参考：

客户端 API： https : //socket.io/docs/client-api/
服务器 API： https : //socket.io/docs/server-api/
备忘单： https : //socket.io/docs/emit-cheatsheet/

<input name="textarea" id="textarea" cols="45" rows="5" onchange="sendTypingStatus()">

FrontEnd - Javascript：发出typing事件并监听getTypingStatus以在 dom 上显示“打字...”

而发出事typing的用户使用各类socket.emit
使用socket.on收听getTypingStatus消息以显示“正在输入..”

function sendTypingStatus() {
socket.emit('typing')
}

socket.on('getTypingStatus',message => {
  handleShowingTypingStatusOnDOM()
})

服务器端：侦听typing事件和广播给除使用socket.broadcast广播消息的套接字之外的所有用户

io.on('connection', (socket) => {
  socket.on('typing',(message)=>{
  socket.broadcast.emit('getTypingStatus', 'typing!');
 }
})

socket.broadcast将向所有在io()连接中连接的用户广播消息

Answer 2

socket.emit('type', typingStatus.innerHTML = 'No')不会在其他客户端上执行typingStatus.innerHTML = 'No' 。 为此，您需要能够处理其他客户端上的传入type事件数据包。

此外，在焦点和模糊事件上使用事件处理程序而不是轮询。

sockets.io - 如何检测用户在输入表单中的输入并向所有用户广播

问题描述

2 个解决方案

解决方案1
1 2020-08-25 18:00:13

解决方案2
0 2020-08-25 17:33:15

sockets.io - 如何检测用户在输入表单中的输入并向所有用户广播

问题描述

2 个解决方案

解决方案1 1 2020-08-25 18:00:13

解决方案2 0 2020-08-25 17:33:15

解决方案1
1 2020-08-25 18:00:13

解决方案2
0 2020-08-25 17:33:15