如何使实时＆QUOT;用户键入＆QUOT;通知所有聊天 [英] How to make a real time "User is typing" notice to all in chat

问题描述

我想编写一个应用程序，使用jQuery和PHP，其中一个实时的用户EVX中键入消息，然后显示该消息实时所有其他用户。这将类似于Skype的有笔../和Facebook如何有一个通知用户类型时。

I want to write an application, using jQuery and PHP, where a real time user "Evx" is typing a message and then show that message to all other users in real time. This would be similar to how Skype has a pen ../ and how Facebook has a notice when the user types.

我需要的是对如何做到这一点最简单的方法的逻辑步骤和信息的一些援助，但仍然有它的工作以及任何其他的方式。

What I need is some assistance with the logic steps and information on how to do this the easy way but still have it work as well as any other way.

//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.
    }
});​

有人可以解释如何实现用户输入实时的步骤和信息，用我上面尝试为出发点？

Can someone please explain the steps and information on how to achieve user typing real time, using what I've tried above as a starting point?

推荐答案

这是网站，如Facebook和谷歌通话时使用实现聊天使用使用彗星或反向AJAX Web上的请求/响应模式，利用解决方案的方法

The approach that sites like Facebook and Google Talk use when implementing chat is to use solutions that capitalize on the request/response model of the Web using Comet or Reverse AJAX.

Web 1.0的：

在传统的Web 1.0的实现，如你的，浏览器发出请求到服务器。服务器响应的客户端code渲染视图中的数据。

In traditional Web 1.0 implementations, such as yours, the browser initiates a request to the server. The server responds with data that the client side code renders in the view.

这个伟大的工程，当我们简单地把用户从一个网页到另一个，或当我们回应了由用户发起的事件。然而，当涉及到管理的是由服务器发起的事件此方法是固有的缺陷。

This works great when we're simply moving users from one page to another or when we're responding to events that are initiated by the user. However, this methodology is inherently flawed when it comes to managing events that are initiated by the server.

在你的榜样，为了模拟实时更新，你必须捶了服务器不断轮询请求检查更新。这是小孩在车上的持续和不断问他的父母后座相当于我们到了没？我们到了没？一遍又一遍没有失败。这不仅消耗了大量的带宽，但是当连接的客户端的数量比例增加在服务器上创建沉重的负担。

In your example, in order to simulate real time updates, you must hammer the server with continuous polling requests to check for updates. This is the equivalent of the little kid in the back seat of the car that constantly and incessantly asks his parent "Are we there yet? Are we there yet?" over and over again without fail. This not only eats up a lot of bandwidth but creates heavy load on the server when the number of connected clients scale up.

彗星/反向AJAX：

由于服务器不能发起响应向浏览器没有请求，一个被称为反向AJAX或彗星技术被用来模拟服务器推事件通知给客户端的处理。

Since the server cannot initiate responses to the browser without a request, a technique called "reverse AJAX" or "Comet" is used to simulate the process of the server pushing event notifications to the client.

背后的彗星一般premise是，浏览器打开一个到服务器的连接，然后服务器认为连接打开下去。当服务器然后具有它需要传递给所有连接的客户端的更新，它然后将响应发送回给客户机，在完成请求/响应循环。在接收到响应时，客户端立即发送另一个请求到服务器，该服务器再次保持打开状态，直到下一次更新。

The general premise behind Comet is that the browser opens a connection to the server and then the server holds that connection open indefinitely. When the server then has an update that it needs to pass to all connected clients, it then sends the response back to the client, completing the request/response cycle. Upon receiving the response, the clients immediately send another request to the server, which the server once again keeps open until the next update.

有可用于PHP彗星的解决方案，所以这是你可以完成使用现有的平台;但是，我不能推荐任何。你还需要一个客户端库，以方便打开彗星的连接。退房href="http://dojotoolkit.org/reference-guide/1.7/dojox/cometd.html"> Dojo的Cometd JavaScript库，从而

There are Comet solutions available for PHP, so this is something you could accomplish using your existing platform; however, I cannot recommend any. You'll also need a client-side library to facilitate opening the Comet connections. Check out the Dojo Cometd JavaScript Library.

Comet是用于实现聊天溶液，与另一个为的WebSockets 2优越的解决方案之一。然而，对于WebSockets的支持仍然缺乏在某些浏览器。

Comet is one of two superior solutions for implementing a chat solution, with the other being WebSockets. However, support for WebSockets is still lacking in some browsers.

在寻找有利于彗星库，这也是一个好主意，选择一个有利于延续，这有助于确保正在等待发送响应线程可以被释放到执行，而不是袖手旁观等待其他任务。有了这样的解决方案，有些彗星的服务器很容易地扩展到超过20,000连接！

When looking for a library that facilitates Comet, it's also a good idea to select one that facilitates Continuations, which help to ensure that threads that are waiting to send a response can be released to perform other tasks instead of waiting idly by. With such a solution, some Comet servers have easily scaled to over 20,000 connections!

下面是描述如何实现彗星在PHP 的文章。此外，您可能会发现这个StackOverflow的问题非常有用，因为它介绍了使用彗星在PHP 的挑战。

Here is an article that describes How to Implement Comet on PHP. Additionally, you may find this StackOverflow question useful as it describes the challenges of using Comet on PHP.

设计考虑：

一，我们发展我们的聊天解决方案是在没有考虑到的消息作为是一些更抽象的一个子类时所做的第一个错误。相反，我们从服务器发送到前端的信息只是一个聊天信息。然而，由于该产品先进的，我们很快就发现，相同的彗星的连接可以用来发送命令到浏览器，而不仅仅是邮件。

One of the first mistakes we made when developing our chat solution was in not thinking about messages as being a subclass of something more abstract. Instead, information we sent from the server to the frontend was simply a "Chat message". However, as the product advanced, we soon discovered that the same Comet connection could be used to send commands to the browser, not just messages.

因此​​，为了实现你的用户输入，则可能需要在JavaScript处理程序，首先确定是否从服务器的更新是一个新的消息，或者是显示用户XYX被输入命令。一个好的设计也可以保证你可以用其他类型的更新彗星连接以及将启动从服务器。

Hence, to implement your "User is typing", you might need a handler in your JavaScript that first determines if the update from the server is a new message, or is it the "Show that user XYX is typing" command. A good design can also ensure that you can use the Comet connection for other types of updates as well that would initiate from the server.

最后，您的用户输入的信息应该有某种形式的延迟就可以了，这样的当用户输入时，他或她的浏览器将只通知服务器每隔X秒。如果用户输入绑定到一个关键的preSS事件只是锻服务器AJAX请求，那么你只是降低您的彗星连接回轮询。

Lastly, your User typing message should have some sort of delay on it such that when a user is typing, his or her browser will only notify the server once every X seconds. If you bind your user typing to a keypress event that simply hammers the server with AJAX requests, then you are simply degrading your Comet connection back into polling.

在收件人结束，您最有可能想实现一个超时功能，使用户打字信息自动消失，如果谁在输入停止发送用户输入请求到服务器的用户。另外，该用户的浏览器会发送一个用户不打字了。消息，如果浏览器发送请求时，他或她的文本框为空，比​​如当用户退格在输入文本。

On the recipient end, you'll most likely want to implement a timeout feature so that the User typing message automatically disappears if the user who is typing stops sending "user typing" requests to the server. Alternatively, that user's browser could send a "User not typing anymore" message if the browser sends a request when his or her textbox is empty, such as when the user backspaces over text entered.

简单的解决办法：

最后，我想补充一点，这将涉及一个学习曲线，因为你必须考虑从服务器推数据到客户端，而不是观点的网站。这将涉及大量的研究，奉献你的一部分，并尝试例子和得到的，你应该如何处理应用程序的设计，一个真正强大的了解。这是迄今为止一个掌握该技术的最佳方法，但它也可以被恐吓。只是一定要慢慢来的例子，试戴自己，如果您遇到问题，你可以随时寻求帮助。

Finally, I want to add that this will involve a learning curve, as you must think about the Web from the perspective of the server pushing data to the client instead. This will involve lots of research and dedication on your part, as well as trying out examples and getting a really strong understanding of how you should approach the design of your application. This is by far one of the best ways to master this technique, but it can also be intimidating. Just be sure to take your time with the examples, try them yourself, and if you get stuck you can always ask for help.

这篇关于如何使实时＆QUOT;用户键入＆QUOT;通知所有聊天的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！