websockets事件_websockets长轮询和服务器发送事件

websockets事件

After building several web applications during my first 12 weeks at the Flatiron School, I’m used to the pattern of request and response to get data from the server to the client. From the client-side, we ask the server for more information, and if the server determines we are authorized to make the request and it knows how to fulfil it, it sends a response.

在Flatiron学校学习的头12周中，构建了多个Web应用程序之后，我习惯了请求和响应的模式，以便从服务器向客户端获取数据。 从客户端，我们向服务器请求更多信息，如果服务器确定我们有权发出请求并且知道如何执行该请求，它将发送响应。

And because of AJAX, we can do cool things like updating the webpage without reloading it, requesting and receiving data from the server after the page has loaded, and sending data to the server in the background.

由于使用了AJAX，我们可以做一些很酷的事情，例如更新网页而不重新加载网页，在页面加载后从服务器请求和接收数据，以及在后台将数据发送到服务器。

These tools have allowed me and my Flatiron School cohort-mates to make applications that feel similar to many websites that are deployed on the internet by real businesses.

这些工具使我和我的Flatiron学校的同伴能够制作出与真实企业在互联网上部署的许多网站类似的应用程序。

And the initial idea of the web was that it functions in this way: the client was to make requests of the server, and a server's job is to fulfil those requests.

Web的最初想法是它以这种方式运行：客户端是向服务器发出请求，而服务器的工作是满足这些请求。

But we know from our own use of the internet that data is often consumed by the client in a much more dynamic way than in the apps we’ve built so far.

但是，通过我们自己对互联网的使用，我们知道客户端通常以比目前为止构建的应用程序更动态的方式来消费数据。

After AJAX was introduced in 2005, developers start to explore ways to make the relationship between client and server bidirectional, so that servers could push data to the client without being prompted by an HTTP request for each batch of data. If client needs to fetch new data at a high frequency, making a bunch of HTTP requests would be inefficient because each time an HTTP request is sent, headers and cookie data are sent as well, which across a large number of requests can add up to quite a bit of data that needs to be transferred. This causes latency, which we know users do not appreciate. Furthermore, the client side would only know if there was new data available if it made a request.

在2005年推出AJAX之后，开发人员开始探索使客户端与服务器之间的关系双向化的方法，以便服务器可以将数据推送到客户端，而不会受到针对每批数据的HTTP请求的提示。 如果客户端需要以较高的频率获取新数据，则发出一堆HTTP请求的效率会很低，因为每次发送HTTP请求时，标头和Cookie数据也会被发送，而在大量请求中，这些数据可能总计为需要传输大量数据。 这会导致延迟，我们知道用户不满意。 此外，客户端仅在发出请求后才知道是否有新数据可用。

So the industry needed solutions to enable a persistent, low latency connection that can support transactions initiated by the client or the server.

因此，该行业需要解决方案来实现持久的低延迟连接，以支持客户端或服务器发起的事务。

If we think about popular websites like Facebook or Twitter, we know that new data is rendered on the page without our having initiated a request for it on our side. On Facebook messenger, new messages appear on our screen without a refresh or any action taken on the client side. How does it work?

如果我们考虑诸如Facebook或Twitter之类的流行网站，我们知道页面上将呈现新数据，而无需我们发起请求。 在Facebook Messenger上，新消息显示在屏幕上，而没有刷新或客户端未执行任何操作。 它是如何工作的？

长时间轮询 (Long polling)

One of the solutions for this problem is called long polling, which involves keeping an HTTP connection open until the server has data to push to the client. If when the request is made to the server there is no data available yet, the server prolongs the responds while the client waits.

解决此问题的方法之一称为长轮询，它涉及保持HTTP连接打开，直到服务器具有要推送到客户端的数据。 如果在向服务器发出请求时尚无可用数据，则服务器会在客户端等待时延长响应时间。

If during this time new data becomes available, it is sent to the client. When data is sent or when the request times out — whichever happens first — a new request is made to reestablish the connection.

如果在这段时间内有新数据可用，则将其发送到客户端。 发送数据或请求超时时(以先发生的为准)，将发出新请求以重新建立连接。

This creates the illusion of a server initiated connection, showing the user new information as it becomes available. This mechanism is used by gmail and Facebook, for example.

这会产生服务器启动的连接的幻觉，向用户显示可用的新信息。 例如，gmail和Facebook使用此机制。

服务器端事件 (Server-side events)

If data needs to flow consistently from the server to the client and not the other way around (think: news feeds), a developer might use the EventSource interface to allow for server-sent events. The following code would open a connection to the server to begin receiving events from it, with the URL of a script that generates the events.

如果数据需要始终如一地从服务器流到客户端，而不是相反(想想新闻)，则开发人员可以使用EventSource接口来允许服务器发送事件。 以下代码将打开与服务器的连接，以开始从服务器接收事件，并带有生成事件的脚本的URL。

const newEventSource = new EventSource("example.php")

This method has the benefit of having only one HTTP requests, and allows the client to receive events in text/event-stream format without closing the connection.

此方法的好处是仅具有一个HTTP请求，并且允许客户端在不关闭连接的情况下以文本/事件流格式接收事件。

网络套接字 (Websockets)

When an application involves a functionality that depends on consistent real-time data from the server, a developer might consider using a Websocket which, after an initial HTTP request for an initial “handshake” to establish the connections, allows the server and the client to send messages to each other at any time without either party making a request.

当应用程序涉及依赖于来自服务器的一致实时数据的功能时，开发人员可能会考虑使用Websocket，该Websocket在初始HTTP请求初始“握手”以建立连接后，允许服务器和客户端执行以下操作：随时可以彼此发送消息，而无需任何一方发出请求。

Websockets essentially convert the HTTP connection to a Websocket connection. Websockets are a part of HTML5 and are supported by all modern browsers — in other words, there is a javascript API to use them natively in the browser. Unlike other mechanisms mentioned in this blog post, Websockets can detect a dropped or disconnected client and can also handle up to 1024 connections per browser.

Websocket实质上将HTTP连接转换为Websocket连接。 Websocket是HTML5的一部分，并且受所有现代浏览器支持-换句话说，有一个JavaScript API可在浏览器中本地使用它们。 与本博客文章中提到的其他机制不同，Websockets可以检测到客户端断开或断开连接，并且每个浏览器最多可以处理1024个连接。

The most common implementations for Websockets are voice/video chat, multiplayer games, instant chat app or push notifications.

Websocket的最常见实现是语音/视频聊天，多人游戏，即时聊天应用程序或推送通知。

Creating a WebSocket connection from the client side could be accomplished with the following code (with a real URL that used the WebSocket API):

从客户端创建WebSocket连接可以通过以下代码(使用使用WebSocket API的真实URL)来完成：

// Create WebSocket connection.const socket = new WebSocket('example.com');// Connection openedsocket.addEventListener('open', function (event) {socket.send('Hello Server!');});// Listen for messagessocket.addEventListener('message', function (event) {console.log('Message from server ', event.data);});

Source: MDN web docs

资料来源： MDN网站文件

There’s much more to these three mechanisms than what I’ve mentioned here, so I recommend to myself, my Flatiron cohort-mates, and fellow junior developers that we do what we do best and Google it to learn more. :)

这三种机制比我在这里提到的要多得多，所以我向自己，我的Flatiron团队成员和初级开发人员建议我们尽力而为，并通过Google来学习更多。 :)

翻译自: https://medium.com/@sonya.vgould/websockets-long-polling-and-server-sent-events-8ef2d1302706

websockets事件