如何从 NodeJS 服务器向客户端发送信息?

2023-11-26

例如,我想向客户端发出信号,表明通过 POST 方法以 HTML 表单发送的用户名已存在于我的数据库中。

我知道如何使用 body-parser 恢复 POST 数据,并且知道如何在 MySQL 数据库中查找它。

我知道我可以使用 Ajax 直接在表单上写入错误消息。我的 NodeJS 服务器需要发送什么以及如何发送这些信息?

我搜索了许多教程,刚刚找到了发送新 HTML 页面的解决方案。我想保持我的网页相同并使用诸如appendChild()之类的函数来发布错误消息。


有几种方法可以将数据从服务器端(例如 NodeJS)发送到客户端 - 我假设在你的情况下将是一些 JavaScript 文件,例如main.js处理 DOM 操作。

So, the 1st您发送数据的方式是通过模板引擎例如,像车把。您可以在这里找到一个易于使用的 Express 模块:hbs.

现在,为了快速总结这样的引擎是如何工作的,我们基本上发送一个 HTML 文件,就像您可能在教程中看到的那样,however,像 Handlebars 这样的模板引擎允许我们动态地使用该文件发送实际数据,所以我们要做的是render特定的车把template(在核心中只是 HTML),并将 JavaScript 对象传递给渲染调用,该调用将包含您想要传递到该文件中的所有数据,然后在.hbs file.

所以在服务器端,我们会写这样的东西,假设我们有一个名为home.hbs并将 Handlebars 设置为模板引擎:

router.get('/home', function(req,res) {
   var dataToSendObj = {'title': 'Your Website Title', 'message': 'Hello'};
   res.render('home',dataToSendObj);
});

并访问在home.hbs像这样:

<html>
   <header>
      {{title}}
   </header>
   <body>
      message from server: {{message}}
   </body>
</html>

现在,这种方法的问题是,如果您想动态更新页面上的数据,without必须重新加载页面,使用模板引擎并不理想。相反,正如您所说,您将使用 AJAX。

So, the 2nd将数据从 NodeJS 服务器发送到网站前端的方法是使用异步 AJAX 调用。

首先,将路由添加到您用于 AJAX 进行调用的任何路由处理程序。在这里,您可能有一些逻辑来访问数据库,进行一些检查并将一些有用的信息返回给客户端。

router.get('/path/for/ajax/call', function(req,res) {
   // make some calls to database, fetch some data, information, check state, etc...
   var dataToSendToClient = {'message': 'error message from server'};
   // convert whatever we want to send (preferably should be an object) to JSON
   var JSONdata = JSON.stringify(dataToSendToClient);
   res.send(JSONdata);
});

假设您有一些文件,例如main.js,创建一个带有回调的 AJAX 请求来监听某些事件响应,如下所示:

var req = new XMLHttpRequest();
var url = '/path/for/ajax/call';

req.open('GET',url,true); // set this to POST if you would like
req.addEventListener('load',onLoad);
req.addEventListener('error',onError);

req.send();

function onLoad() {
   var response = this.responseText;
   var parsedResponse = JSON.parse(response);

   // access your data newly received data here and update your DOM with appendChild(), findElementById(), etc...
   var messageToDisplay = parsedResponse['message'];

   // append child (with text value of messageToDisplay for instance) here or do some more stuff
}

function onError() {
  // handle error here, print message perhaps
  console.log('error receiving async AJAX call');
}

总结上述使用 AJAX 的方法,交互流程如下:

  • 操作在客户端触发(如按下按钮)
  • 事件处理程序创建一个新的 AJAX 请求,设置回调,以便知道从服务器返回响应时要做什么,然后发送请求
  • 发送的 GET 或 POST 请求被服务器上的路由处理程序捕获
  • 执行服务器端逻辑以从数据库、状态等获取数据......
  • 新数据被获取,放入 JSON 对象中,并由服务器发回
  • 客户端 AJAX 的事件侦听器load or error捕获响应并执行回调
  • 在响应加载成功的情况下,我们解析响应并更新客户端 UI

希望这有帮助!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何从 NodeJS 服务器向客户端发送信息? 的相关文章

随机推荐

  • 如何确定我的 python shell 是在 32 位还是 64 位中执行?

    如何从 shell 内部判断 shell 处于什么模式 我试过看platform模块 但它似乎只是告诉您 用于可执行文件的位体系结构和链接格式 我的二进制文件被编译为 64 位 我在 OS X 10 6 上运行 因此即使我使用这些方法 它似
  • 无法加入字符串类型的 pandas 数据框

    我有两个 DataFrames 对象 其列如下 数据框1 df dtypes Output ImageID object Source object LabelName object Confidence int64 dtype objec
  • 从 C# 代码从 SQLite 导入/导出 CSV

    我正在尝试找出一种使用 System Data SQLite 将 CSV 文件加载到 SQLite DB 的简单方法 我看到了命令行方式来做到这一点 即 Import mydata csv mytable 但我需要通过 C 代码来完成此操作
  • F# 中使用守卫与 if/else 结构进行模式匹配

    在 ML 系列语言中 人们倾向于更喜欢模式匹配if else构造 在 F 中 在模式匹配中使用防护可以轻松替换if else在很多情况下 例如 一个简单的delete1可以在不使用的情况下重写函数if else see delete2 le
  • ASP.NET MVC + Fluent nNibernate,什么IoC工具?

    我正在开发一个 ASP NET MVC 项目 我们决定使用 Fluent nHibernate 进行数据访问 为了实现松耦合 我们采用 IoC DI 模式 我的问题是该选择什么 IoC 工具 我试图找出 Windsor ninject sp
  • C# 中数组索引的类型?

    C 中数组索引的类型是什么 例如 在下面的代码中 在访问数组元素 第三行 之前 索引是否会被转换为 int T myArray new T 255 byte index 2 T element myArray index 如果不是 使用 b
  • 是否可以使用其他 cpp 文件中的#define?

    我认为预处理器会一一处理文件 而我不知道如何使用包含来处理文件 所以我认为这是不可能的 但很高兴听到其他人的想法 我有在a cpp define A 1 我想用它2 cpp 编辑 我无法修改第一个文件 所以现在我只是复制了定义 但问题仍然存
  • HTML 转 PDF 与通过 PHP 以编程方式创建 PDF

    我有一个 PHP 应用程序 需要生成一些带有漂亮页眉 页脚的 PDF 发票和 PDF 时间表 一些 Stackoverflow 用户建议使用 TCPDF 创建 PDF 文档 在我的研究中 我发现了两种生成 PDF 的方法 1 以编程方式格式
  • 如何在 IE 中的文档上触发“onload”事件

    我目前正在为 Javascript 方法开发单元测试 用于检测文档的准备情况 该代码已经处于框架级别 因此请避免提及已在 jQuery 或其他库中实现的代码 我已使用以下代码成功模拟了 readystatechange 更改事件 var e
  • 从 scala 使用 Function java 接口的流畅方式?

    在工作中 大多数人都使用 Java 而我则使用 Scala 我们决定将一些常见的类收集到一个用 Java 编写的库中 现在我想向库中添加一些伪函数式编程 看看以下内容 java public interface Func
  • 在 JSF 中显示上传的图像

    我有一个视图范围的 bean 我在其中创建了一个人 一个人可以有一张照片 这张照片上传到创建此人的同一页面 图片未存储在数据库或磁盘上 因为尚未创建该人 该 bean 必须具有视图作用域 因为可以在其他地方创建人员并且使用相同的 bean
  • Python 类丢失属性

    我有一个特殊的 python 问题 在我的 gtk python 应用程序执行过程中 我的一些类对象神秘地丢失了属性 导致我的程序的一些功能被破坏 很难解释为什么会发生这种情况 我从来没有故意删除属性 并且有问题的类继承自我自己编写的类 而
  • Android - 在webview中登录后提取cookie

    我有一个在 web 视图中打开 url 的应用程序 然后用户必须通过 web 视图登录到站点并在登录后收到 cookie 我在登录后获取 cookie 时遇到问题 问题是 我可以使用 android webkit CookieManager
  • 在 Angular 5 项目中创建 Web 配置文件?

    我创建了一个 Angular 5 网站 我想使用 Webform 或 MVC 部署给客户 我只想更改 webconfig 文件中的一些变量 dbconnection 名称等 但使用 Angular 我不知道如何去做吧 那么每次部署的时候都得
  • 如何防止 Jetpack Compose 中不必要的重组

    我有一个TextField对于搜索查询和Button这将执行搜索 结果显示在列中 由于搜索需要几秒钟才能运行 我希望它在按下按钮时执行 而不是在文本更改时执行 这是一个简化的演示 Column val list remember mutab
  • 活动页面和背景页面

    由于 Chrome 扩展文档中没有明确的解释 所以我来这里寻求帮助 我了解到 背景页面基本上是为了延长扩展的生命周期而发明的 旨在保存值或保持 引擎 在后台运行 这样就没有人注意到它 因为一旦您单击扩展程序的图标 您就会看到他们所说的 弹出
  • 意外异常:SQLSTATE[HY000] [1045] 用户 ****@'localhost' 的访问被拒绝(使用密码:YES)

    一位老同事交给我一个申请来管理 但是 每当我尝试运行它时 我都会收到此错误 请任何帮助都可以 有时访问被拒绝异常错误 因为您的 mysql 凭据无效 其次 根据我的经验 我观察到这种情况也会发生 因为您没有为数据库连接设置密码 例如 pri
  • 如何从shared_ptr调用私有析构函数?

    我有一个resource manager类维护一个std vector
  • WCF 服务 netTCP 绑定

    我想使用 netTCPbinding 所以我改变了我的网络配置 如下所示 我遇到这个错误 找不到与绑定 NetTcpBinding 的终结点的方案 net tcp 相匹配的基地址 注册的基地址方案是 http 如何解决这个问题
  • 如何从 NodeJS 服务器向客户端发送信息?

    例如 我想向客户端发出信号 表明通过 POST 方法以 HTML 表单发送的用户名已存在于我的数据库中 我知道如何使用 body parser 恢复 POST 数据 并且知道如何在 MySQL 数据库中查找它 我知道我可以使用 Ajax 直