Node.js 服务器与 React 前端之间的简单实时通信

实时通信对于许多现代网络应用程序来说至关重要，它使聊天、通知和实时更新等功能成为可能。在本文中，我们将探讨如何使用 WebSocket 在 Node.js 后端和 React 前端之间建立实时通信，WebSocket 是一种通过单个 TCP 连接提供全双工通信通道的通信协议。

设置 Node.js 后端：

1. 初始化 Node.js 项目： 首先使用 npm 创建一个新的 Node.js 项目。打开终端并运行以下命令：

mkdir node-react-realtime
cd node-react-realtime
npm init -y

2. 安装所需软件包： 安装必要的软件包，包括用于 HTTP 服务器的 express 和用于支持 WebSocket 的 ws。

npm install express ws

3. 创建服务器 创建一个名为 server.js 的文件，并设置一个支持 WebSocket 的基本 Express 服务器。

const express = require('express');
const http = require('http');
const WebSocket = require('ws');

const app = express();
const server = http.createServer(app);
const wss = new WebSocket.Server({ server });

wss.on('connection', (ws) => {
  console.log('Client connected');

  ws.on('message', (message) => {
    console.log(`Received: ${message}`);
    // Broadcast the message to all clients
    wss.clients.forEach((client) => {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });

  ws.on('close', () => {
    console.log('Client disconnected');
  });
});

server.listen(3001, () => {
  console.log('Server listening on port 3001');
});

这将创建一个 WebSocket 服务器，该服务器监听 3001 端口。

设置 React 前端：

1. 创建 React 应用程序： 使用 Create React App 创建一个新的 React 应用程序。

npx create-react-app react-realtime-app
cd react-realtime-app

2. 安装 WebSocket 客户端： 安装 websocket 软件包，以便在 React 应用程序中处理 WebSocket 连接。

npm install websocket

3. 修改App组件：打开src/App.js并修改它以建立WebSocket连接。

import React, { useState, useEffect } from 'react';

const App = () => {
  const [message, setMessage] = useState('');
  const [ws, setWs] = useState(null);

  useEffect(() => {
    const socket = new WebSocket('ws://localhost:3001');

    socket.onopen = () => {
      console.log('Connected to the server');
    };

    socket.onmessage = (event) => {
      const receivedMessage = event.data;
      setMessage(receivedMessage);
    };

    setWs(socket);

    return () => {
      socket.close();
    };
  }, []);

  const sendMessage = () => {
    if (ws) {
      const newMessage = 'Hello from React!';
      ws.send(newMessage);
      setMessage(newMessage);
    }
  };

  return (
    <div>
      <h1>Real-Time Communication</h1>
      <p>Received Message: {message}</p>
      <button onClick={sendMessage}>Send Message</button>
    </div>
  );
};

export default App;

这个 React 组件会与服务器建立 WebSocket 连接，并根据收到的消息更新用户界面。sendMessage 函数向服务器发送消息。

结论

通过上述步骤，您已经使用 WebSocket 成功地在 Node.js 后端和 React 前端之间建立了实时通信。

这为您在应用程序中使用聊天功能、实时更新和通知等各种实时功能打开了大门。

您可以在此基础上自由扩展，为您的网络应用程序构建更高级的实时功能。