时间戳

首页 > 解决方案 > sockets.io - 如何检测用户在输入表单中的输入并向所有用户广播

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

问题描述

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

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)) 下，但无法检测服务器端的输入或键入条件。

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

有什么替代方法可以让它工作吗？

标签： javascripthtmlwebsocketsocket.io

解决方案

参考：

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

前端 - Javascript：发出typing事件并监听getTypingStatus在 dom 上显示“正在输入……”

  • typing使用用户类型发出事件socket.emit
  • 收听getTypingStatus消息以显示“正在输入..”使用socket.on
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.broadcastio()将向连接内连接的所有用户广播消息

推荐阅读