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

时间:2017-06-07 14:12:54

标签: node.js express

例如,我想向客户端发信号通知我的数据库中已经存在以HTML格式通过POST方法发送的用户名。

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

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

我搜索了大量的教程,我发现了他们发送新HTML页面的解决方案。我想保持我的网页相同,并使用appendChild()等函数发布错误消息。

1 个答案:

答案 0 :(得分:6)

有几种方法可以将数据从服务器端发送到客户端,所以NodeJS也可以发送到客户端 - 我假设在这种情况下会使用像main.js这样的JavaScript文件处理DOM模拟。

因此,您可以发送数据的第一方式是通过模板引擎,例如Handlebars。有一个易于使用的快递模块,你可以到这里:hbs

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

所以在服务器端,我们会写这样的东西,假设我们有一个名为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>

现在,这种方法的问题在于,如果您想动态更新页面上的数据,没有必须重新加载页面,那么使用模板引擎并不理想。相反,就像你说的那样,你会使用AJAX。

因此,您可以将NodeJS服务器上的数据发送到网站前端的 2nd 方式是使用异步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的加载错误的事件监听器捕获响应并执行回调
  • 如果响应加载成功,我们会解析响应并更新客户端UI

希望这有用!