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