-6

Facebook がチャットで使用するような機能を作成する方法を知っている人はいますか? 入力を開始すると、ユーザーの画面に表示されます。

ユーザーIDに基づいて完全に機能するチャットがありますが、これを行うことができません。チャットは、JSON、php、ajax を使用して動作しています。

4

2 に答える 2

1

これは、実際にはチャットに追加するのが非常に簡単な機能です。まず、入力情報を保存する場所が必要になります。私は通常、データベースに保存します。1for は入力しており、0for not は入力しています。キーを押すたびにではなく、入力していることを示すために 1 つの要求のみが送信されるように、スマートなセットアップを使用する必要があります。私はタイマーを設定しているので、ユーザーが 2000 ミリ秒入力を停止すると、その会話の入力設定が0

私のスクリプトは次のようになります。

var typing = false,
    shift = false,
    timer;
$(".chatText").unbind('keyup keypress blur').keypress(function (e) {
    if (e.keyCode == 13) {
        if (e.shiftKey !== true) {
            shift = true;
            return false;
        }
    }
}).bind('keyup', function () {
    if (shift) {
        Connect.messages.send(id, to);
        Connect.type(id, 0);
        shift = false;
    } else {
        clearTimeout(timer);
        if ($(this).val().length > 0) {
            if (!typing) {
                Connect.type(id, 1);
            }
            timer = setTimeout(function () {
                Connect.type(id, 0);
            }, 2000);
        }
        if ($(this).val().length == 0) {
            Connect.type(id, 0);
        }
     }
}).blur(function () {
    Connect.type(id, 0);
});

Connect.type関数：

type: function (id, t) {
    if ((t == 0 && typing) || (t == 1 && !typing)) {
        $$.connect.staticRec(btoa($$.TRANS.d("L2FqYXgvdHlwZS5waHA/aWQ9") + id + $$.TRANS.d("JlNFVD0=") + t)); //ajax/type.php?id={id}&SET={t}
    }
    if (t) {
        typing = true
    }
    else typing = false;
}

ajax/type.php:

<?php
    require "connect.php";
    require "user.php";

    $number = $data['number'];
    $id = escape($_GET['id']);

    if (strlen($id) < 4 OR strlen($id) > 6 OR (int)$_GET['SET'] > 1) exit();

    $FOTQ = $mysqli->query("SELECT `from` FROM `typing` WHERE `id`='$id'")->fetch_assoc(); //from or to query
    $FOT = ($FOTQ['from'] == $number ? 'from' : 'to') . 'typing';

    $type = escape($_GET['SET']);

    $mysqli->query("UPDATE `typing` SET `$FOT`='$type' WHERE `id`='$id'");
?>

Server Sent Events を使用してユーザーに通知する (注: 私自身の SSE 関数):

var $id = $(this).data("id");
var item = $(".messageBox[data-id='" + $id + "']");
item.data("orgName", item.children("name").text());
$$.connect.live.create({
    url: $$.TRANS.e("/ajax/typing/" + $id),
    message: function (e) {
        item = $(".messageBox[data-id='" + item.data("id") + "']");
        if (e.data == "1") {
            var name = item.children("name").text();
            var firstName = name.split(" ")[0];
            var hasName = name.match(/[0-9]/) ? "User" : firstName;
            item.children("name").html(hasName + "..is typing");
         }
         if (e.data == "0") {
             item.children("name").text(item.data("orgName"));
         }
     },
     duration: 2500
}, "typing", false);

typing.phpサーバー送信イベントの場合:

<?php
    require "connect.php";
    require "user.php";

    header("Content-Type: text/event-stream\n\n");
    header('Cache-Control: no-cache');

    set_time_limit(1200);

    $id = escape($_GET['id']);
    $number = $data['number'];
    $ms = 100;
    $tS = 0; //type stat

    while (1) {
        $FOTQ = $mysqli->query("SELECT * FROM `typing` WHERE `id`='$id'")->fetch_assoc(); //from or to query
        $cts = $FOTQ[($FOTQ['from'] == $number ? 'to' : 'from') . 'typing']; //current type stat

        if ($tS != $cts) {
            echo "data:" . $cts;
            echo "\n\n";
            $tS = 1;
        }

        echo "\n\n";

        ob_flush();
        flush();
        usleep($ms * 1000);
    }
?>

サーバー送信イベントを使用しています。これにより、サーバーとのオープンな接続を維持できます。

注:私の PHP スキルはまあまあです。

しかし、これがあなたにアイデアを与えることを願っています。

于 2013-07-18T19:15:07.967 に答える
0

疑似コード

onkeydown または keyup、「入力中」を設定、タイムアウトを設定 (関数は「入力していません」、ある程度の時間)

于 2013-07-18T19:13:41.560 に答える