javascript - Coldfusion Websockets“用户正在输入......”功能

Question

我正在使用 Coldfusion 10 的 websockets 并进行了简单的聊天以进行测试。我见过几个聊天，他们有“用户正在输入...”文本，当其他用户正在输入时会出现。有谁知道如何有效地实现这一点？

Answer 1

当用户执行“keyDown”时，再创建一个频道“通知”并发布“用户正在输入”，当“keyUp”时发布“空字符串”。

订阅此频道与您聊天。接收方此通道的目标应是其内部 html 可以填充“用户正在键入”消息。

伪代码：

<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，并且您的频道将文本广播为“显示”和“不显示”。这基本上是赋予 显示和隐藏它的类名。流量少。

方法二：使用同一个频道

<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 == '@userTyping@-yes'){
            notifyHandler('yes');
        }
        else if (msg == '@userTyping@-no'){
            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","@userTyping@-yes" );
    };
    var sayStopped = function(){
        mycfwebsocketobject.publish("chatChannel","@userTyping@-no" );
    };

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

人们总是可以通过将消息键入“@userTyping@-yes”或“@userTyping@-no”来欺骗此代码。但正如我所说，这只是一个 POC。此外，对于您提到的超时，keyUp 无论如何都会处理它。但是您也可以通过 setTimeout() 调用 notifyHandler()，如上所示。

Answer 2

评论里面有一个关于如何过滤一对一消息的问题。这是实现此目的的一些示例代码。

不使用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>