js 后端调用前端

在常规的前后端分离架构中，后端调用前端是不常见的，因为前后端有各自明确的职责和分工。前端主要负责用户界面和用户交互，而后端则负责数据处理和业务逻辑。然而，在某些特定场景下，后端可能需要主动向前端推送信息或执行某些操作，这时就需要一种机制来实现后端对前端的调用。

一种常见的实现方式是使用WebSocket或Server-Sent Events（SSE）等实时通信技术。这些技术允许服务器主动向客户端发送消息，而不需要客户端发起请求。以下是关于这两种技术的一些基础概念和应用场景：

WebSocket

基础概念： WebSocket是一种在单个TCP连接上进行全双工通信的协议。它允许服务器主动向客户端推送数据，实现了客户端与服务器之间的实时通信。

优势：

实时性：服务器可以随时向客户端发送消息，无需客户端轮询。
双向通信：支持客户端和服务器之间的双向通信。

应用场景：

在线聊天系统
实时股票行情展示
在线游戏

示例代码：

后端（Node.js + ws库）：

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', function connection(ws) {
  ws.on('message', function incoming(message) {
    console.log('received: %s', message);
  });

  // 后端主动向前端发送消息
  ws.send('Hello from server!');
});

前端：

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

socket.addEventListener('open', function (event) {
  socket.send('Hello from client!');
});

socket.addEventListener('message', function (event) {
  console.log('Message from server ', event.data);
});

Server-Sent Events（SSE）

基础概念： Server-Sent Events是一种允许服务器向浏览器推送实时更新的技术。与WebSocket不同，SSE是单向的，只允许服务器向客户端发送消息。

优势：

实现简单：SSE的API相对简单，易于实现。
自动重连：如果连接断开，浏览器会自动尝试重新连接。

应用场景：

实时新闻推送
实时通知系统

示例代码：

后端（Node.js + Express）：

const express = require('express');
const app = express();

app.get('/events', function (req, res) {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');

  // 后端主动向前端发送消息
  setInterval(() => {
    res.write(`data: ${new Date().toISOString()}

`);
  }, 1000);
});

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

前端：

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

eventSource.addEventListener('message', function (event) {
  console.log('Message from server ', event.data);
});