Coldfusion Websockets「用戶正在輸入...」功能

我正在玩Coldfusion 10的websockets並做了一個簡單的聊天測試。我看過幾個聊天，他們有「用戶正在輸入...」文本，當其他用戶正在輸入時顯示。有誰知道如何有效地實現這一點？Coldfusion Websockets「用戶正在輸入...」功能

來源

2013-05-27 Guest

創建另一個通道「通知」並在用戶在'keyUp'執行'keyDown'和'emptystring'時發佈'User is typing'。

訂閱此頻道隨你聊天。在接收端的這個頻道的目標應該是一個內部的html可以填充'User is Typing'消息。

僞代碼：

<cfwebsocket name="notificationSocket" 
      onmessage="notifyHandler" 
      subscribeto="notificationChannel" > 

<cfwebsocket name="ChatSocket" 
      onmessage="chatHandler" 
      subscribeto="chatChannel" > 

<!-- Conversation displayer --> 
<div id="messageBoard"></div> 

<!-- your text message input area --> 
<textarea onKeyDown="sayTyping()" onKeyUp="sayStopped()" id="chatInput"></textarea> 
<div id="notifyArea"></div> 
<input name="submit" onClick="publishMessage()"></textarea> 

<script> 

    /*chat Functions*/ 
    var publishMessage = function(){ 
     var msg = document.getElementById('chatInput').value; 
     mycfwebsocketobject.publish("chatChannel", msg); 
    }; 

    var chatHandler = function(msgObj){ 
     document.getElementById('messageBoard').innerHTML += ColdFusion.JSON.encode(msgObj); 
    }; 


    /*notifying Functions*/ 
    var notifyHandler = function(noteObj){ 
     document.getElementById('notifyArea').innerHTML = ColdFusion.JSON.encode(noteObj); 
    };  

    var sayTyping = function(){ 
     mycfwebsocketobject.publish("notificationchannel","User is Typing..."); 
    }; 
    var sayStopped = function(){ 
     mycfwebsocketobject.publish("notificationchannel",""); 
    }; 

</script>

另一個增強將有一個div已經與文本「用戶鍵入」和頻道廣播文本「秀」和「NOSHOW」。這基本上是給予顯示和隱藏它的類名稱。較少的流量。

方法2：使用相同的信道

<cfwebsocket name="ChatSocket" 
      onmessage="chatHandler" 
      subscribeto="chatChannel" > 

<!-- Conversation displayer --> 
<div id="messageBoard"></div> 

<!-- your text message input area --> 
<textarea onKeyDown="sayTyping()" onKeyUp="sayStopped()" id="chatInput"></textarea> 
<div id="notifyArea" class="no">User is typing...</div> 
<input name="submit" onClick="publishMessage()"></textarea> 

<script> 

    /*chat Functions*/ 
    var publishMessage = function(){ 
     var msg = document.getElementById('chatInput').value; 
     mycfwebsocketobject.publish("chatChannel", msg); 
    }; 

    var chatHandler = function(msgObj){ 
     var msg = ColdFusion.JSON.encode(msgObj); 
     if (msg == '@[email protected]'){ 
      notifyHandler('yes'); 
     } 
     else if (msg == '@[email protected]'){ 
      notifyHandler('no'); 
     } 
     else { 
      document.getElementById('messageBoard').innerHTML += msg; 
     } 
    }; 


    /*notifying Functions*/ 
    var notifyHandler = function(action){ 

     document.getElementById('notifyArea').className = action; 

     /*call the notify handler with off to stop showing the user is typing message 
     after a certain interval of time. This is to avoid someone believing that 
     partner is still typing even when the connection is lost*/ 

     if(action == 'on'){ 
      setTimeout(function(){notifyHandler('no')},250); 
     } 
    };  

    var sayTyping = function(){ 
     mycfwebsocketobject.publish("chatChannel","@[email protected]"); 
    }; 
    var sayStopped = function(){ 
     mycfwebsocketobject.publish("chatChannel","@[email protected]"); 
    }; 

</script> 
<style> 
.yes { display:block;} 
.no { display:none;} 
</style>

人們總是可以通過鍵入消息爲 '@ userTyping @ -yes' 或 '@ userTyping @ -no' 特技此代碼。但正如我所說，這只是一個POC。另外，對於你提到的超時，keyUp會照顧它。但是你也可以通過setTimeout（）來調用notifyHandler（），如上所示。

來源

2013-05-29 03:01:51 Sanjeev

感謝您的例子。唯一的問題是，我正在使用websocket進行Live Help Chat聊天，因此對話將是一對一的，而不是向頻道中的每個人播放。我是否需要爲發起的每個聊天的notificationSocket創建唯一的子通道？另外，如果有超時，所以它不會持續更新每個按下的按鍵？ – Guest

在這種情況下，您可以使用相同的渠道並根據邏輯來區分傳入消息是「通知」還是聊天消息。 – Sanjeev

因此，實現一對一聊天的最佳方式就像實時幫助聊天一樣，只需一個通道並通過ID進行過濾？ – Guest

評論內容是關於如何過濾一對一消息的問題。以下是實現此目的的一些示例代碼。

而不是使用subscribeTo屬性，使用js函數訂閱用戶並傳入一些標頭值。然後，這些報頭可被用作過濾器上使用selector

實施例的發佈調用：

<cfwebsocket name="ChatSocket" onOpen="openHandler" onMessage="msgHandler" onError="errHandler"> 

<script> 
    function openHandler(){ 
     //Subscribe to the channel, pass in headers for filtering later 
     ChatSocket.subscribe('chatChannel',{name: '#Session.Auth.FirstName#', UserID: '#Session.Auth.UserID#', AccountID: '#Session.Auth.AccountID#' }); 
    } 

    function publish(txt, userID){ 
     var msg = { 
      AccountID: "#Session.Auth.AccountID#", 
      publisher: '#Session.Auth.UserID#', 
      id: userID, 
      message: converthtml(txt) 
     }; 
     //When including headers, the "selector" is where you will filter who it goes to. 
     var headers = { 
      AccountID: "#Session.Auth.AccountID#", 
      publisher: '#Session.Auth.UserID#', 
      id: userID, 
      selector: "UserID eq '"+userID+"' and AccountID eq '#Session.Auth.AccountID#'" 
     }; 
     ChatSocket.publish('chatChannel',msg, headers); 

    } 

    function msgHandler(message){ 
     console.log(message); 
    } 

    function errHandler(err){ 
     console.log(err); 
    } 
</script>

來源

2013-12-04 17:42:57

Coldfusion Websockets「用戶正在輸入...」功能

回答

相關問題