react前端和nodejs后端如何使用websocket相连接

React前端和Node.js后端之间使用WebSocket连接的方法如下：

1在Node.js服务器端安装websocket库：

npm install websocket

2.在Node.js服务器端创建WebSocket服务器：

const WebSocket = require('websocket').server;
const http = require('http');

const server = http.createServer(function(request, response) {
    // 处理HTTP请求
});

server.listen(8080, function() {
    console.log((new Date()) + ' Server is listening on port 8080');
});

wsServer = new WebSocket({
    httpServer: server
});

// 处理WebSocket连接
wsServer.on('request', function(request) {
    const connection = request.accept(null, request.origin);
    console.log('WebSocket connection accepted.');
    
    // 处理WebSocket消息
    connection.on('message', function(message) {
        if (message.type === 'utf8') {
            console.log('Received Message: ' + message.utf8Data);
            connection.sendUTF('Hi this is WebSocket server!');
        }
    });

    // 处理WebSocket关闭
    connection.on('close', function(reasonCode, description) {
        console.log('WebSocket connection closed.');
    });
});

在此示例中，我们使用了Node.js的HTTP模块和WebSocket库。我们创建了一个HTTP服务器，并将WebSocket服务器绑定到该服务器上。当收到WebSocket连接请求时，我们将打印一条消息，当接收到WebSocket消息时，我们将回复一个消息。当WebSocket连接关闭时，我们将打印一条消息。

3.在React前端中使用WebSocket连接：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import WebSocket from 'websocket';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      message: '',
      ws: null
    };
  }

  componentDidMount() {
    // 创建WebSocket连接
    const ws = new WebSocket('ws://localhost:8080');

    ws.onopen = () => {
      console.log('WebSocket Client Connected');
    };

    ws.onmessage = (message) => {
      console.log('Received:', message.data);
      this.setState({ message: message.data });
    };

    ws.onclose = () => {
      console.log('WebSocket closed');
    };

    this.setState({ ws });
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          {this.state.message}
        </p>
      </div>
    );
  }
}

export default App;

在React前端中，我们使用了WebSocket库来创建WebSocket连接。我们使用`componentDidMount`方法在组件挂载后创建WebSocket连接。当WebSocket连接打开时，我们将打印一条消息，当接收到WebSocket消息时，我们将更新组件状态以显示该消息。当WebSocket连接关闭时，我们将打印一条消息。

在React前端中，我们只需要提供WebSocket服务器的URL，即可建立WebSocket连接。在此示例中，我们将WebSocket服务器的URL设置为`ws://localhost:8080`，因为我们假设Node.js服务器运行在本地8080端口上。

以上是React前端和Node.js后端之间使用WebSocket连接的基本步骤，你可以根据自己的实际需求进行进一步的开发和优化。