javascript - Coldfusion Websockets の「ユーザーが入力しています...」機能

Question

私は Coldfusion 10 の WebSocket をいじっており、テストのために簡単なチャットを行いました。他のユーザーが入力しているときに「ユーザーが入力しています...」というテキストが表示されるチャットをいくつか見ました。これを効率的に実装する方法を知っている人はいますか？

Answer 1

もう1つのチャネル「通知」を作成し、ユーザーが「keyDown」を実行すると「ユーザーが入力中」、「keyUp」を実行すると「空文字列」を公開します。

チャットと一緒にこのチャンネルを購読してください。受信側のこのチャネルのターゲットは、内部の 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>

もう 1 つの拡張機能は、「ユーザーが入力中です」というテキストを含む div を既に作成し、チャネルがテキストを「show」および「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 == '@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() を呼び出すこともできます。