Вопрос по javascript, php, node.js, ajax, jquery – Как сделать оповещение «Пользователь печатает» в режиме реального времени всем в чате [закрыто]

-3

Я хочу написать приложение для чата, используя jQuery и PHP. Часть, в которой мне нужна помощь, - это когда пользователь реального времени "Evx" набирает сообщение, а затем показывает это сообщение всем другим пользователям в режиме реального времени. Это будет похоже на то, как у Skype есть ручка .../ и как у Facebook есть уведомление, когда пользователь печатает.

Что мне нужно, так это некоторая помощь с логическими шагами и информация о том, как легко выполнить в режиме реального времени "пользователь печатает" но все равно работай так же как и любой другой способ.

Here is what I've tried so far:

<code>//time delay before ajax call
var delay = (function() {
    var timer = 0;
    return function(callback, ms) {
        clearTimeout(timer);
        timer = setTimeout(callback, ms);
    };
})();

$('#usermsg').keydown(function() {
    if ($('#usermsg').val().length === 5) {
        delay(function() {
            $.ajax({
                url: "addusertyping.php",
                cache: false,
                success: function() {

                }
            });
        }, 5000);
    }
});

$('#usermsg').keyup(function() {
    if ($('#usermsg').val().length >= 6) {
        // here I should basically check for 
          // an update from server or what not.
    }
});​
</code>

Может ли кто-нибудь объяснить, какие шаги и информацию о том, как добиться пользовательского набора текста в реальном времени, используя то, что я пробовал выше в качестве отправной точки?

Вы должны задать конкретный вопрос программирования. Ваш вопрос слишком широкий, я боюсь. gdoron
Я бы сказал, что приведенный выше вопрос совершенно в порядке, у парня, похоже, есть взгляд на то, что он пытался сделать, а вы, ребята, здесь закрыли его / ее мечты! Посмотрите на ответ ниже, разве все остальные не могли дать правильное направление, как @ jmort253 в одиночном ответе ниже? Помните, что даже новые программисты попадают в Stackoverflow, и исключительные навыки людей изгоняют их! Morgs

Ваш Ответ

1   ответ
11

Подход, который сайты, такие как Facebook и Google Talk, используют при реализации чата, заключается в использовании решений, использующих модель запросов / ответов в Интернете с использованием Comet или Reverse AJAX.

Web 1.0:

В традиционных реализациях Web 1.0, таких как ваша, браузер инициирует запрос к серверу. Сервер отвечает данными, которые код клиентской стороны отображает в представлении.

Это прекрасно работает, когда мы просто перемещаем пользователей с одной страницы на другую или когда мы реагируем на события, инициированные пользователем. Однако эта методология изначально имеет недостатки, когда речь идет об управлении событиями, инициируемыми сервером.

В вашем примере, чтобы имитировать обновления в реальном времени, вы должны забивать сервер непрерывными запросами на опрос для проверки обновлений. Это эквивалент маленького ребенка на заднем сиденье машины, который постоянно и непрерывно спрашивает своего родителя "Мы уже там?" Мы уже там? & Quot; снова и снова в обязательном порядке. Это не только расходует большую пропускную способность, но и создает большую нагрузку на сервер при увеличении количества подключенных клиентов.

Comet/Reverse AJAX:

Поскольку сервер не может инициировать ответы на браузер без запроса, методика, называемая «перевернуть AJAX» или "Комета" используется для имитации процесса отправки сервером уведомлений о событиях клиенту.

Общая предпосылка, лежащая в основе Comet, заключается в том, что браузер открывает соединение с сервером, а затем сервер удерживает это соединение открытым неограниченное время. Когда сервер затем получает обновление, которое ему необходимо передать всем подключенным клиентам, он затем отправляет ответ обратно клиенту, завершая цикл запрос / ответ. Получив ответ, клиенты немедленно отправляют другой запрос на сервер, который сервер снова остается открытым до следующего обновления.

Для PHP доступны решения Comet, так что это то, чего вы могли бы достичь, используя существующую платформу; однако я не могу рекомендовать ни одного. Вам также понадобится библиотека на стороне клиента, чтобы облегчить открытие соединений Comet. ПроверьтеJavaScript-библиотека Dojo Cometd.

Comet - одно из двух превосходных решений для реализации решения для чата, другим является WebSockets. Однако в некоторых браузерах по-прежнему отсутствует поддержка WebSockets.

При поиске библиотеки, которая облегчает Comet, также было бы неплохо выбрать библиотеку, которая облегчает продолжения, которые помогают гарантировать, что потоки, ожидающие отправки ответа, могут быть освобождены для выполнения других задач, вместо того, чтобы бездействовать. Благодаря такому решению некоторые серверы Comet легко масштабируются до 20 000 подключений!

Вот статья, которая описываетКак реализовать комету на PHP, Кроме того, этот вопрос StackOverflow может оказаться полезным, так какописывает проблемы использования Comet на PHP.

Design Considerations:

Одна из первых ошибок, которые мы допустили при разработке нашего решения для чата, заключалась в том, что мы не думали о сообщениях как о подклассе чего-то более абстрактного. Вместо этого информация, которую мы отправляли с сервера на веб-интерфейс, представляла собой просто «сообщение чата». Однако по мере развития продукта мы вскоре обнаружили, что одно и то же соединение Comet можно использовать для отправки команд браузеру, а не только сообщений.

Следовательно, для реализации вашего "Пользователь печатает", вам может понадобиться обработчик в вашем JavaScript, который сначала определяет, является ли обновление с сервера новым сообщением, или это "Показать, что пользователь XYX печатает" & quot; команда. Хороший дизайн также может гарантировать, что вы можете использовать соединение Comet для других типов обновлений, которые будут инициироваться с сервера.

Наконец, ваше сообщение о наборе пользователя должно иметь некоторую задержку, так что когда пользователь печатает, его или ее браузер будет уведомлять сервер только один раз каждые X секунд. Если вы привязываете своего пользователя к событию нажатия клавиши, которое просто забивает сервер запросами AJAX, то вы просто превращаете свое соединение Comet обратно в опрос.

На стороне получателя вы, скорее всего, захотите внедрить функцию тайм-аута, чтобы сообщение о наборе пользователя автоматически исчезало, если пользователь, который печатает, прекращает отправлять & quot; запросы к серверу. В качестве альтернативы, браузер этого пользователя может отправить "пользователя, который больше не печатает", quot; сообщение, если браузер отправляет запрос, когда его или ее текстовое поле пусто, например, когда пользователь отодвигается от введенного текста.

Easy Solutions?:

Наконец, я хочу добавить, что это потребует обучения, так как вы должны думать о сети с точки зрения сервера, который вместо этого передает данные клиенту. Это потребует от вас большого количества исследований и преданности делу, а также опробования примеров и получения действительно глубокого понимания того, как вы должны подходить к дизайну вашего приложения. На сегодняшний день это один из лучших способов освоить эту технику, но он также может быть пугающим. Просто не торопитесь с примерами, попробуйте их сами, и если вы застряли, вы всегда можете обратиться за помощью.

Очень полезный комментарий, не знаю, почему другие не смогли ответить на этот вопрос в том же стиле, но решили резко его закрыть! Еще раз спасибо, вы указали мне правильное направление.

Похожие вопросы