sockets.io - 如何检测用户在输入表单中的输入并向所有用户广播
[英]sockets.io - How to detect user typing in an input form and broadcast to all users
问题描述
I have this function on client side (modified):
我在客户端有这个功能（修改）：
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>
i did the necessary code in the server side as well but i think it doesn't work cause its under io.on(connection,function(socket)) but there is no way to detect input or typing condition on server side.我也在服务器端做了必要的代码，但我认为它不起作用，因为它在 io.on(connection,function(socket)) 下，但无法检测服务器端的输入或输入条件。
it doesn't work for other clients and only appears for the same user它不适用于其他客户端，仅对同一用户显示
Is there any alternative i can use to make it work?有什么替代方法可以让它发挥作用吗？
2 个解决方案
解决方案1
1 2020-08-25 18:00:13
References:参考：
- Client API : https://socket.io/docs/client-api/客户端 API： https : //socket.io/docs/client-api/
- Server API : https://socket.io/docs/server-api/服务器 API： https : //socket.io/docs/server-api/
- Cheatsheet : https://socket.io/docs/emit-cheatsheet/备忘单： https : //socket.io/docs/emit-cheatsheet/
<input name="textarea" id="textarea" cols="45" rows="5" onchange="sendTypingStatus()">
FrontEnd - Javascript : Emitting typing event and listening getTypingStatus for showing 'typing..' on dom FrontEnd - Javascript：发出typing事件并监听getTypingStatus以在 dom 上显示“打字...”
- Emit event
typingas user types usingsocket.emit而发出事typing的用户使用各类socket.emit - Listen to
getTypingStatusmessage to show 'typing..' usingsocket.on使用socket.on收听getTypingStatus消息以显示“正在输入..”
function sendTypingStatus() {
socket.emit('typing')
}
socket.on('getTypingStatus',message => {
handleShowingTypingStatusOnDOM()
})
Server Side : Listen typing event and Broadcast to All users except socket that is broadcasting the message using socket.broadcast服务器端：侦听typing事件和广播给除使用socket.broadcast广播消息的套接字之外的所有用户
io.on('connection', (socket) => {
socket.on('typing',(message)=>{
socket.broadcast.emit('getTypingStatus', 'typing!');
}
})
socket.broadcast will broadcast message to all users those are connected inside io() connection socket.broadcast将向所有在io()连接中连接的用户广播消息
解决方案2
0 2020-08-25 17:33:15
socket.emit('type', typingStatus.innerHTML = 'No') does not execute typingStatus.innerHTML = 'No' on the other clients. socket.emit('type', typingStatus.innerHTML = 'No')不会在其他客户端上执行typingStatus.innerHTML = 'No' 。 In order to do that you need to be able to handle an incoming type event packet on the other clients.为此，您需要能够处理其他客户端上的传入type事件数据包。
Also, use an event handler on the focus and blur events instead of polling.此外，在焦点和模糊事件上使用事件处理程序而不是轮询。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.