react+nodejs 怎么实现websocket通信

React和Node.js结合使用可以创建一个全栈应用，包括前端和后端。要实现WebSocket通信，可以遵循以下步骤：

1. **安装所需库**:
- Node.js 需要`ws`库，用于处理WebSocket服务器。在项目目录下运行 `npm install ws` 或 `yarn add ws`。

2. **创建Node.js WebSocket服务器** (server-side):
- 在Node.js文件中，例如`server.js`：

     const { Server } = require('ws');

     const wss = new Server({ port: 8080 });

     wss.on('connection', (ws) => {
       console.log('New client connected');
       
       ws.on('message', (message) => {
         console.log(`Received message: ${message}`);
         // 在这里处理客户端发送的消息
       });
       
       ws.send('Hello from server!');
     });

3. **在React中设置WebSocket连接** (client-side):
- 使用第三方库如`react-websocket`，首先安装它：`npm install react-websocket`

   import React, { useEffect, useState } from 'react';
   import { Websocket } from 'react-websocket';

   function App() {
     const [message, setMessage] = useState('');

     useEffect(() => {
       const ws = new WebSocket('ws://localhost:8080'); // 根据实际情况修改地址

       ws.addEventListener('open', () => {
         ws.send('Connected to server');
       });

       ws.addEventListener('message', (event) => {
         setMessage(event.data);
       });

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

     // 发送消息到服务器
     const sendMessage = async (text) => {
       await ws.sendMessage(text);
     };

     return (
       <div>
         <input type="text" value={message} onChange={(e) => setMessage(e.target.value)} />
         <button onClick={() => sendMessage(message)}>Send</button>
       </div>
     );
   }

   export default App;

4. **部署**:
- 将Node.js服务器部署到服务器上，通常是通过PM2等进程管理工具保证持久运行。