Nodejs 求助各位。。只有一个页面的应用怎么实时获取后端数据

Nodejs 求助各位。。只有一个页面的应用怎么实时获取后端数据

正在学angular和node，打算做一个小单页应用来练手。 现在是一个页面，然后各种请求通过angular来发送，后端用express写api传递json 问题是我前端应该怎么实时去获取后端的数据，比如说后端用flash反馈操作消息到前端。。

app.js node app.js

route里面 api.js route里面 api.js

angular里面的controller.js angular里面的controller.js

是不是要用到socket ?


6 回复

当然可以。你提到的场景确实适合使用 WebSocket 来实现实时数据传输。WebSocket 可以让客户端与服务器之间保持一个持久连接，并且可以双向通信，这样就可以实现后端数据的实时更新。

示例代码

1. 安装依赖

首先，你需要安装 socket.io 库，它可以帮助你在 Node.js 中实现 WebSocket 功能。

npm install express socket.io

2. 修改 app.js

确保你的 Express 应用正确地初始化并配置了 WebSocket。

// app.js
const express = require('express');
const http = require('http');
const socketIo = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = socketIo(server);

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', (socket) => {
  console.log('A user connected');
  
  // 发送实时消息给客户端
  setInterval(() => {
    socket.emit('message', { data: '实时消息' });
  }, 5000);

  socket.on('disconnect', () => {
    console.log('A user disconnected');
  });
});

server.listen(3000, () => {
  console.log('Server is running on port 3000');
});

3. 修改 angular 控制器

在 Angular 控制器中，你可以建立 WebSocket 连接，并监听来自服务器的消息。

// controller.js
var app = angular.module('myApp', []);

app.controller('MainCtrl', function($scope) {
  var socket = io.connect('http://localhost:3000');

  socket.on('message', function(data) {
    $scope.message = data.data;
    console.log($scope.message);
  });

  $scope.sendMessage = function() {
    // 如果需要向服务器发送消息
    socket.emit('message', { data: '客户端消息' });
  };
});

4. HTML 页面

确保你的 HTML 页面中包含了 Angular 和 Socket.IO 的脚本文件。

<!-- index.html -->
<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
  <script src="/socket.io/socket.io.js"></script>
  <script src="controller.js"></script>
</head>
<body ng-controller="MainCtrl">
  <div>{{ message }}</div>
  <button ng-click="sendMessage()">Send Message</button>
</body>
</html>

解释

  • WebSocket: 使用 socket.io 库来创建 WebSocket 连接。服务器端 (app.js) 创建了一个 HTTP 服务器，并通过 socket.io 监听连接事件。每当有新用户连接时，服务器会每隔 5 秒钟发送一条消息。
  • Angular 控制器: 在 Angular 控制器 (controller.js) 中，我们建立了 WebSocket 连接，并监听从服务器发送的消息。当收到消息时，将数据显示在页面上。

这样，你就可以实现实时获取后端数据的功能。希望这对你有所帮助！


建议用 socket.io

既然你是使用angular在前面，并且你是后端用express写api传递json，就没必要用flash了，所有的信息都用json传递比较好，后端就只处理数据和数据库的交流，所有的业务你都应该放到前端，当然有些是要后端前端结合的业务，但是信息反馈就都用json比较好

thx，我看看。

我也是这么想的，我之前没接触过后端，所以还是有很多疑惑。如果依旧是用json传递的话，那怎么实时请求呢？没有url跳转，也不想刷新。

要在只有一个页面的应用中实现前后端的实时通信，可以使用WebSocket。WebSocket允许浏览器和服务器之间进行双向通信，这样可以实现实时更新。

示例代码

1. 后端（Node.js + Express + Socket.IO）

首先安装Socket.IO：

npm install express socket.io

然后修改app.js以集成Socket.IO：

const express = require('express');
const http = require('http');
const socketIo = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = socketIo(server);

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', (socket) => {
  console.log('A user connected:', socket.id);
  
  // 发送消息给客户端
  socket.emit('serverMessage', { message: 'Hello from server!' });

  socket.on('disconnect', () => {
    console.log('User disconnected:', socket.id);
  });
});

server.listen(3000, () => {
  console.log('Server is running on port 3000');
});

2. 前端（Angular + Socket.IO Client）

安装Socket.IO客户端库：

npm install socket.io-client

在controller.js中集成Socket.IO客户端：

import io from 'socket.io-client';

export class MyController {
  constructor() {
    this.socket = io('http://localhost:3000');
    
    // 监听来自服务器的消息
    this.socket.on('serverMessage', (data) => {
      console.log(data.message);
      // 在这里更新你的视图模型
    });

    // 定期发送心跳消息
    setInterval(() => {
      this.socket.emit('clientHeartbeat', { data: 'Some data' });
    }, 5000);
  }
}

解释

  • 后端：通过Socket.IO设置WebSocket连接，并在用户连接时发送一条消息。
  • 前端：使用Socket.IO客户端与服务器建立连接，并监听来自服务器的消息。也可以定期向服务器发送消息（如心跳）。

这种方法可以让你的前端应用实时接收后端数据更新，非常适合实时应用如聊天、通知等场景。

回到顶部