「Web应用架构」轮询,SSE 和WebSocket,如何选择合适的?

简介: 「Web应用架构」轮询,SSE 和WebSocket,如何选择合适的?

构建实时Web应用程序有点挑战,我们需要考虑如何将数据从服务器发送到客户端。能够“主动”实现这一功能的技术已经存在了很长时间,并且仅限于两种通用方法:客户端请求或服务器请求。

实现这些的几种方法:

  1. 长/短轮询(客户端拉动)
  2. WebSockets(服务器推送)
  3. 服务器发送的事件(服务器推送)
  • 客户端拉取-客户端以一定的定期间隔向服务器请求更新
  • 服务器推送-服务器正在主动将更新推送到客户端(客户端拉取的反向操作)

让我们以一个简单的用例来比较以上技术,然后选择合适的技术。

范例:

我们的示例用例非常简单。我们需要开发一个仪表板Web应用程序,该应用程序可以流转来自(GitHub / Twitter / .. etc)等网站的活动列表。这个应用程序的目的是从上面列出的各种方法中选择合适的一种。


1.使用轮询:

轮询是一种技术,客户端通过该技术定期向服务器请求新数据。我们可以通过两种方式进行轮询:短轮询和长轮询。简单来说,短轮询是基于AJAX的计时器,它以固定的延迟进行调用,而长轮询则基于Comet(即,当服务器事件发生时,服务器将无延迟地将数据发送到客户端)。两者都有优点和缺点,并根据用例进行调整。有关深入的详细信息,请阅读StackOverflow社区给出的答案。

让我们看看一个简单的客户端长轮询代码段的外观:

/* Client - subscribing to the github events */

subscribe: (callback) => {

const pollUserEvents = () => {

$.ajax({

method: 'GET',

url: 'http://localhost:8080/githubEvents',

success: (data) => {

callback(data) // process the data

},

complete: () => {

pollUserEvents();

},

timeout: 30000

})

}

pollUserEvents()

}

这基本上是一个长轮询功能,它像往常一样第一次运行,但是它设置了三十(30)秒的超时,并且在每次对服务器进行Async Ajax调用之后,回调都会再次调用Ajax。

AJAX调用可在HTTP协议上运行,这意味着默认情况下,对同一域的请求应进行多路复用。我们发现这种方法存在一些陷阱。

多路复用(轮询响应实际上无法同步)

轮询需要3次往返(TCP SIN,SSL和数据)

超时(如果连接保持空闲时间太长,代理服务器将关闭连接)

您可以在这里阅读更多关于现实世界的挑战。


2.使用WebSockets:

WebSocket只是客户端和服务器之间的持久连接。这是一种通过单个TCP连接提供全双工通信通道的通信协议。

RFC 6455声明WebSocket“旨在在HTTP端口80和443上工作,并支持HTTP代理和中介”,从而使其与HTTP协议兼容。为了实现兼容性,WebSocket握手使用HTTP升级标头将HTTP协议更改为WebSocket协议。HTTP和WebSocket都位于OSI模型的应用程序层,因此依赖于第4层的TCP。

有一个MDN文档详细解释了WebSocket,我也建议您阅读它。

让我们看看一个非常简单的WebSocket客户端实现的样子:

$(function () {

// if user is running mozilla then use it's built-in WebSocket

window.WebSocket = window.WebSocket || window.MozWebSocket;

const connection = new WebSocket('ws://localhost:8080/githubEvents');

connection.onopen = function () {

// connection is opened and ready to use

};

connection.onerror = function (error) {

// an error occurred when sending/receiving data

};

connection.onmessage = function (message) {

// try to decode json (I assume that each message

// from server is json)

try {

const githubEvent = JSON.parse(message.data); // display to the user appropriately

} catch (e) {

console.log('This doesn\'t look like a valid JSON: '+ message.data);

return;

}

// handle incoming message

};

});

如果服务器支持WebSocket协议,它将同意升级,并将通过响应中的Upgrade标头传达此信息。

让我们看看如何在Node.JS(服务器)中实现:

const express = require('express');

const events = require('./events');

const path = require('path');

const app = express();

const port = process.env.PORT || 5001;

const expressWs = require('express-ws')(app);

app.get('/', function(req, res) {

res.sendFile(path.join(__dirname + '/static/index.html'));

});

app.ws('/', function(ws, req) {

const githubEvent = {}; // sample github Event from Github event API https://api.github.com/events

ws.send('message', githubEvent);

});

app.listen(port, function() {

console.log('Listening on', port);

});

一旦我们从GitHub事件API获得数据,就可以在建立连接后将其流式传输到客户端。对于我们的场景,这种方法也有一些陷阱。

  • 使用WebSockets,我们需要自己处理许多由HTTP处理的问题。
  • WebSocket是用于传输数据的另一种协议,它不会通过HTTP / 2连接自动多路复用。在服务器和客户端上实现自定义多路复用有点复杂。
  • WebSocket是基于帧的,而不是基于流的。当我们打开网络标签。您可以看到WebSocket消息在frame中列出。

有关WebSocket的详细信息,请查看这篇很棒的文章,在这里您可以阅读有关碎片以及如何在后台进行处理的更多信息。


3.使用SSE:

SSE是一种机制,一旦建立了客户端-服务器连接,服务器就可以将数据异步推送到客户端。然后,只要有新的“大块”数据可用,服务器就可以决定发送数据。可以将其视为单向发布-订阅模型

它还提供了一个标准的JavaScript客户端API,称为EventSource,已在大多数现代浏览器中实现,作为W3C的HTML5标准的一部分。 Polyfills可用于不支持EventSource API的浏览器

我们可以看到Edge和Opera Mini落后于此实现,对于SSE而言,最重要的案例是针对移动浏览器设备,因为这些浏览器没有可行的市场份额。Yaffle是事件源的众所周知的pollyfill。

由于SSE是基于HTTP的,因此它很自然地与HTTP / 2相适应,并且可以结合使用以实现两者的最佳选择:HTTP / 2处理基于多路复用流的有效传输层,而SSE为应用程序提供API以实现 推。因此,开箱即用地通过HTTP / 2实现多路复用。连接断开时会通知客户端和服务器。通过使用消息维护唯一的ID,服务器可以看到客户端错过了n条消息,并在重新连接时发送了未完成消息的积压。

让我们看看示例客户端实现的外观:

const evtSource = new EventSource('/events');

evtSource.addEventListener('event', function(evt) {

const data = JSON.parse(evt.data);

// Use data here

},false);

此代码段非常简单。它连接到我们的源并等待接收消息。现在,示例NodeJS服务器将如下所示。

// events.js

const EventEmitter = require('eventemitter3');

const emitter = new EventEmitter();

function subscribe(req, res) {

res.writeHead(200, {

'Content-Type': 'text/event-stream',

'Cache-Control': 'no-cache',

Connection: 'keep-alive'

});

// Heartbeat

const nln = function() {

res.write('\n');

};

const hbt = setInterval(nln, 15000);

const onEvent = function(data) {

res.write('retry: 500\n');

res.write(`event: event\n`);

res.write(`data: ${JSON.stringify(data)}\n\n`);

};

emitter.on('event', onEvent);

// Clear heartbeat and listener

req.on('close', function() {

clearInterval(hbt);

emitter.removeListener('event', onEvent);

});

}

function publish(eventData) {

// Emit events here recieved from Github/Twitter APIs

emitter.emit('event', eventData);

}

module.exports = {

subscribe, // Sending event data to the clients

publish // Emiting events from streaming servers

};

// App.js

const express = require('express');

const events = require('./events');

const port = process.env.PORT || 5001;

const app = express();

app.get('/events', cors(), events.subscribe);

app.listen(port, function() {

console.log('Listening on', port);

});

我们从这种方法中获得的主要好处是:

  • 实施更简单,数据效率更高
  • 开箱即用地通过HTTP / 2自动多路复用
  • 将客户端上数据的连接数限制为一个

如何在SSE,WebSocket和Polling中进行选择?

经过漫长而详尽的客户端和服务器实施之后,SSE似乎是我们解决数据交付问题的最终答案。也有一些问题,但是可以解决。

可以利用服务器发送事件的应用程序的一些简单示例:

  • 实时股价流图
  • 重要事件的实时新闻报道(发布链接,推文和图片)
  • 由Twitter的流API提供的实时Github / Twitter仪表板墙
  • 监视服务器统计信息(如正常运行时间,运行状况和正在运行的进程)的监视器。

但是,SSE不仅是其他提供快速更新的方法的可行替代方案。在某些特定情况下,例如在SSE被证明是理想解决方案的情况下,每个人都可以胜过其他人。考虑一个像MMO(大型多人在线)游戏这样的场景,该场景需要来自连接两端的大量消息。在这种情况下,WebSockets将压制SSE。

如果您的用例需要显示实时的市场新闻,市场数据,聊天应用程序等,例如在我们的案例中,依靠HTTP / 2 + SSE将为您提供有效的双向通信渠道,同时又能获得留在其中的好处HTTP世界。

如果您想为我们的用例获取示例客户端-服务器实现,请签出GitHub代码。

资源

  • “caniuse.com”
  • “使用服务器发送的事件进行流更新”,HTML5 Rocks的Eric Bidelman
  • “使用HTML5 SSE的数据推送应用”,O’Reilly Media的Darren Cook

感谢您阅读。如果您认为这篇文章很有用,请在您的圈子中分享。

相关文章
|
2天前
|
移动开发 开发者 HTML5
构建响应式Web界面:Flexbox与Grid的实战应用
【10月更文挑战第22天】随着互联网的普及,用户对Web界面的要求越来越高,不仅需要美观,还要具备良好的响应性和兼容性。为了满足这些需求,Web开发者需要掌握一些高级的布局技术。Flexbox和Grid是现代Web布局的两大法宝,它们分别由CSS3和HTML5引入,能够帮助开发者构建出更加灵活和易于维护的响应式Web界面。本文将深入探讨Flexbox和Grid的实战应用,并通过具体实例来展示它们在构建响应式Web界面中的强大能力。
12 3
|
4天前
|
JavaScript 前端开发 测试技术
前端全栈之路Deno篇(五):如何快速创建 WebSocket 服务端应用 + 客户端应用 - 可能是2025最佳的Websocket全栈实时应用框架
本文介绍了如何使用Deno 2.0快速构建WebSocket全栈应用,包括服务端和客户端的创建。通过一个简单的代码示例,展示了Deno在WebSocket实现中的便捷与强大,无需额外依赖,即可轻松搭建具备基本功能的WebSocket应用。Deno 2.0被认为是最佳的WebSocket全栈应用JS运行时,适合全栈开发者学习和使用。
|
2天前
|
JavaScript 前端开发 持续交付
构建现代Web应用:Vue.js与Node.js的完美结合
【10月更文挑战第22天】随着互联网技术的快速发展,Web应用已经成为了人们日常生活和工作的重要组成部分。前端技术和后端技术的不断创新,为Web应用的构建提供了更多可能。在本篇文章中,我们将探讨Vue.js和Node.js这两大热门技术如何完美结合,构建现代Web应用。
12 4
|
3天前
|
前端开发 JavaScript 安全
探索 JAMstack 架构:现代Web开发的新范式
【10月更文挑战第20天】JAMstack(JavaScript、APIs、Markup)架构是一种现代Web开发方法,通过预构建静态页面、动态功能通过APIs实现和依赖JavaScript,提供高性能、安全和可扩展的Web开发新范式。本文深入探讨其核心理念、优势、工具和最佳实践,帮助开发者理解和应用JAMstack。
|
2天前
|
Kubernetes Cloud Native JavaScript
为使用WebSocket构建的双向通信应用带来基于服务网格的全链路灰度
介绍如何使用为基于WebSocket的云原生应用构建全链路灰度方案。
|
8天前
|
前端开发 安全 关系型数据库
PHP在Web开发中的应用及其优势###
【10月更文挑战第16天】 — 本文探讨了PHP在现代Web开发中的广泛应用及其显著优势。通过分析PHP的核心特性,如灵活性、易用性和广泛的应用支持,阐述了为何PHP成为众多开发者和公司的首选技术。文章还介绍了PHP与其他编程语言的比较,并展望了其未来的发展趋势。 ###
27 2
|
12天前
|
机器学习/深度学习 移动开发 JavaScript
Web实时通信的学习之旅:SSE(Server-Sent Events)的技术详解及简单示例演示
Web实时通信的学习之旅:SSE(Server-Sent Events)的技术详解及简单示例演示
67 0
|
13天前
|
机器学习/深度学习 人工智能 算法
未来已来:探索量子计算在Web开发中的应用
在这篇文章中,我们将穿越技术的迷雾,一窥未来。量子计算,这一曾经只存在于理论中的技术,正逐渐走近现实,它的革命性潜力正在被探索其在Web开发中的潜在应用。本文将带你了解量子计算的基本概念,以及它可能如何重塑我们构建和交互Web应用的方式。准备好,让我们的想象力随着量子比特一起跳跃。
|
12天前
|
网络协议 API 网络安全
Web实时通信的学习之旅:轮询、WebSocket、SSE的区别以及优缺点
Web实时通信的学习之旅:轮询、WebSocket、SSE的区别以及优缺点
53 0
|
19天前
|
缓存 监控 API
探索微服务架构中的API网关模式
【10月更文挑战第5天】随着微服务架构的兴起,企业纷纷采用这一模式构建复杂应用。在这种架构下,应用被拆分成若干小型、独立的服务,每个服务围绕特定业务功能构建并通过HTTP协议协作。随着服务数量增加,统一管理这些服务间的交互变得至关重要。API网关作为微服务架构的关键组件,承担起路由请求、聚合数据、处理认证与授权等功能。本文通过一个在线零售平台的具体案例,探讨API网关的优势及其实现细节,展示其在简化客户端集成、提升安全性和性能方面的关键作用。
60 2