使用 Server-Sent Events 实现远程代码执行

简介

Server-Sent Events (SSE) 是一种 HTML5 技术,它使 Web 应用程序可以从服务器端接收自动更新,而无需进行轮询或其他技术。与 WebSockets 不同,SSE 是 HTTP 1.1 的一部分,因此它没有套接字。SSE 相对于 WebSockets 的优点是它可以由现代 Web 服务器(如 Nginx 和 Apache)直接支持,因此无需使用专用服务器。

在本文中,我们将介绍如何使用 SSE 实现远程代码执行,这对于实时应用程序和故障排除很有用。

初步实现

首先,让我们介绍一个简单的 SSE 实现,该实现接收服务器发送的随机数,然后将该数字显示在网页上。在使用 SSE 之前,必须将服务器响应标记为“text/event-stream”。

--------- -----
------
  ------
    ---------- ------------
  -------
  ------
    ------- ---------
    --------- -----------
    ---- ------------------
    --------
      --- --------- - --- ---------------------------
      ------------------- - --------------- -
        ------------------------------------------- - -----------
      --
    ---------
  -------
-------

randnum.php 的代码如下:

-----
--------------------- --------------------
---------------------- -----------
----------- -
  --------- - ------- -----
  ---- ------ ---------------
  -----------
  --------
  ---------
-
--

这段代码中的 while 循环将不断生成随机数,并将其作为文本流发送到客户端。客户端的 SSE 事件监听器将在每次接收到数据时更新页面上的数字。

远程代码执行

现在让我们稍微扩展这个实现,以实现远程代码执行的功能。在这里,我们将通过 SSE 接收用户在网页上输入的代码,然后将其发送到服务器,服务器将运行该代码并将结果返回给客户端。

HTML 代码:

--------- -----
------
  ------
    ---------- ------ ---- --------- ------------
  -------
  ------
    ------- ------ ---- --------- ---------
    -------- ---- ---------
    --------- ---------------------
    ------- --------------------------------
    --------------
    ---- ------------------
    --------
      --- --------- - --- ------------------------
      ------------------- - --------------- -
        ------------------------------------------- - -----------
      --
      -------- --------- -
        --- ---- - --------------------------------------
        --------------------------- ------------------ -------- --------
      -
    ---------
  -------
-------

exec.php 的代码如下:

-----
--------------------- --------------------
---------------------- -----------
----------- -
  ------ - ---
  ------------------------------------------ -
    ------ - ---- ----------------------------------------
  -
  ---- -------
  -----------
  --------
  ---------
  ------------------------- -
    ---- ------- ------------------------
    -----------
    --------
  -
  ---------------- -
    ------- - ------------
    ---- ------ -------------
    -----------
    --------
    -------------
  -
-

-------- ---------- -
  ------------------------------------------ -
    ---- ---- -----------------
  -
  ---- ------ ----------
  -----------
  --------
-
--

在 PHP 代码中,我们使用 while 循环实现 SSE 服务器并等待接收来自客户端的 cmd 事件。一旦我们收到了该事件,我们将其包含的代码合并为一个变量 $code,并运行它。最后,我们将计算结果发送回客户端。

当执行代码时,我们需要使用 eval() 函数。因此要非常小心,保证与用户的输入一起使用 eval() 时代码中不包含任何不受信任的内容。

在客户端代码中,我们添加了 runCode() 函数,该函数获取 textarea 元素中的代码,创建一个自定义事件 cmd 并将代码信息传递给服务器。

总结

Server-Sent Events 是一种非常有用的技术,可以在 Web 应用程序中实现实时更新和远程代码执行等功能。使用 SSE,我们可以避免使用传统轮询技术来监控服务器端数据,并减少了 WebSockets 中处理套接字的复杂性。在编写使用 SSE 的应用程序时,我们应该记住,SSE 事件发送到客户端,不保证原子性。因此,我们必须分析事件数据并正确处理每个事件。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6545275d7d4982a6ebeef141


猜你喜欢

  • node.js 和 html5 的 SSE 了解一下?

    什么是SSE? SSE,全称为Server-Sent Events,即服务器推送事件,是一种服务器向浏览器推送数据的技术。和WebSocket类似,但不同于WebSocket的全双工通信,SSE是一种...

    1 年前
  • SPA 项目如何管理路由

    SPA 项目如何管理路由 随着前端技术的发展,越来越多的网站和应用采用了 SPA(单页应用)架构来提升用户体验。而 SPA 在前端路由的管理上,相较于传统的多页面应用,有着不同的实现方式。

    1 年前
  • Web Components 的跨浏览器兼容性问题解决方案

    Web Components 是一种模块化的 web 应用开发方式,它将页面的某个元素封装成一个自定义的组件,实现了组件的独立性和可重用性。这种方式可以加速前端开发,并且使得组件化的应用更方便地跨平台...

    1 年前
  • 使用 Hapi.js 和 Socket.IO 建立即时聊天应用

    在互联网时代,即时通讯已经成为了一个不可或缺的功能。无论是在线客服、社交、游戏还是其他场景,都离不开即时通讯。本文将介绍如何使用 Hapi.js 和 Socket.IO 建立一个简单的即时聊天应用。

    1 年前
  • 初学 GraphQL-如何处理线程错误

    GraphQL 是一个用于 API 的查询语言和运行时环境。它是由 Facebook 开发的一种类似于 RESTful API 的新型 API 开发方式,它可以很好地处理具有多种关系的数据结构。

    1 年前
  • Cypress 自动化测试教程:处理弹框交互

    Cypress 是当前最火热的前端端对端测试框架之一,它的使用相对简单,易于上手,且功能强大。然而,当遇到需要手动交互的弹框时,Cypress 就面临一定的挑战,因为弹框不属于页面的 DOM 结构,无...

    1 年前
  • LESS 中的 important 规则怎么使用?

    在 LESS 中,我们可以使用 important 规则指定一个 CSS 属性要具有高优先级,从而确保它会覆盖其他属性。这在某些情况下非常有用,但过度使用它会导致样式表难以维护。

    1 年前
  • 解决 Material Design 中 TextInputLayout 和 EditText 结合使用时的兼容性问题

    在 Android 开发中,使用 Material Design 风格是现在很流行的一种趋势。其中 TextInputLayout 和 EditText 结合使用可以实现一个漂亮的表单样式,然而在一些...

    1 年前
  • Kubernetes 多集群管理实践

    什么是 Kubernetes 多集群管理 Kubernetes 多集群管理是指使用 Kubernetes 对多个 Kubernetes 集群进行统一的管理和协调,协助用户实现多个 Kubernetes...

    1 年前
  • 利用 Custom Elements 和 CSS Variables 实现可重用性更高的 Web 组件

    在现代 Web 应用中,组件化开发是一种非常流行的开发模式。在前端中,组件主要由 HTML、CSS 和 JavaScript 组成,并且应当是可重用的、独立的,并可以通过应用程序进行组合。

    1 年前
  • Chai Assert vs Chai Expect:什么时候使用什么

    在前端开发中,常常需要编写测试用例来保证代码的可靠性和正确性。而 Chai 是一个强大的 JavaScript 测试库,提供了两种不同的断言方式 -- Chai Assert 和 Chai Expec...

    1 年前
  • Angular2 的 RxJS 入门示例

    什么是 RxJS RxJS 是一个函数式编程库,它提供了一种处理异步数据流的方法。在 Angular2 中,RxJS 经常被用来处理 HTTP 请求及表单等异步数据流。

    1 年前
  • PWA 技术实现移动端二维码扫描功能

    简介 PWA (Progressive Web App)是一种新兴的 Web 应用程序,它能够在各种不同的设备和平台上运行,包括桌面端和移动端,同时也能够实现离线访问和推送通知等功能。

    1 年前
  • normalize.css 和 CSS Reset 的适用场景

    前言 在前端开发中,我们会发现不同浏览器在渲染相同的页面元素时,可能会出现不一致的情况。这是因为浏览器本身就拥有了一些默认的样式,导致页面在不同浏览器中呈现的效果不一样。

    1 年前
  • ES7 中新特性:Array.prototype.flat() 和 Array.prototype.flatMap()

    在 ES7 中,新增了两个 Array.prototype 上的方法——Array.prototype.flat() 和 Array.prototype.flatMap()。

    1 年前
  • 利用 SASS 模仿 CSS 中的 “:after” 伪元素

    在前端开发中,伪元素是一个非常有用的工具,能够让我们在不增加 HTML 元素的情况下实现很多效果。而其中的 :after 伪元素是其中比较常用的一个,能够在元素的后面插入一些内容。

    1 年前
  • 在 Jest 中如何对 Promise 和 Async/Await 代码进行测试?

    前言 在前端开发中,经常会遇到异步的操作,比如发送网络请求、定时器等。如何对这些异步操作进行测试呢?在 Jest 中,我们可以使用一些特殊的函数和语法来处理异步操作的测试,本文将详细介绍如何使用 Je...

    1 年前
  • AngularJS 中使用 $http.get(),如何处理错误?

    在 AngularJS 中,$http 服务是用于与后端服务器进行数据交互的核心服务之一。其中,$http.get() 方法是用于从服务器获取数据的常用方法之一。在使用 $http.get() 时,我...

    1 年前
  • 初学者必看:快速入门 Serverless 框架

    概述 随着云计算和互联网的发展,Serverless 框架成为近年来的热门技术,它使得前端开发者能够轻松创建和运行无服务器的应用程序。无服务器的开发方式让前端开发者不再需要为服务器运维和配置烦恼,只需...

    1 年前
  • PM2 如何执行 Node.js 脚本

    在前端开发中,我们经常使用 Node.js 来运行 JavaScript 脚本。而在 Node.js 的众多进程管理器中,PM2 可能是最为实用和流行的一种。PM2 可以帮助我们轻松管理 Node.j...

    1 年前

相关推荐

    暂无文章