'express' 未定义 no-undef

Question

我正在为我的全栈 web 应用程序实现一个 websocket 聊天服务器，并意识到那里的大多数资源只提供 html+js 的教程，我不确定如何从 JS 迁移到 JSX .

我开始尝试将 js 代码集成到我的 jsx 聊天组件文件中，但遇到了 express() is undefined 的问题

这是我建立快递服务器的JS：

var express = require('express');
var app = express();
var server = require('http').createServer(app);
var io = require('socket.io').listen(server);

uses = [];
connections = [];

server.listen(process.env.port || 3000);
console.log('server running...');

这是我在 JSX 中的尝试：

import React, { Component } from "react";

class ChatComponent extends Component {

  state = { 
    express: require('express'),
    app: express(),
    server: require('http').createServer(this.app),
    io: require('socket.io').listen(this.server),
    users: [],
    connections: [],
  }

  render() {
    return (
      <React.Fragment>
      ...

当我尝试 npm start 时，我收到了这条消息，但不知道如何修复它：

./src/components/chat/ChatComponent.jsx
  Line 7:  'express' is not defined  no-undef

我还在我的 package.json 中包含了 express 和 socket.io 依赖项，并且 npm 也对其进行了更新

{
  "name": "javlet-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.19.0",
    "bootstrap": "^4.3.1",
    "express": "*",
    "jquery": "^3.4.1",
    "js-cookie": "^2.2.1",
    "popper.js": "^1.15.0",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-google-login": "^5.0.5",
    "react-new-window": "^0.1.2",
    "react-scripts": "3.0.1",
    "react-webcam": "^3.0.1",
    "socket.io": "*",
    "typescript": "^3.6.3",
    "uws": "^10.148.1",
    "yarn": "^1.17.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "eject": "react-scripts eject",
    "test": "jest --coverage"
  },
 ...

任何建议将不胜感激。 如果需要，可以提供更多代码。谢谢

Answer 1

Express 是一个节点服务器端库，而 react 是一个客户端库。因此，对于聊天应用程序设置，您将创建一个快速服务器和一个反应应用程序。

express 服务器将 react 应用程序提供给浏览器，react 应用程序将从 express 服务器获取聊天数据。

快速运行

在项目文件夹中，创建一个服务器文件夹，并在其中创建一个名为 index.js 的文件。 在服务器文件夹中，从终端运行：

npm init -y

接着是：

npm i express socket.io

这会处理服务器依赖关系。 现在在 index.js 中：

服务器/index.js：

const app = require("express")();
const server = require("http").Server(app);
const io = require("socket.io")(server);

server.listen(4000);

app.get("/", function(req, res) {
  res.send("express-server");
});

io.on("connection", function(socket) {
  socket.emit("news", { message: "Hello World" });
  socket.on("my other event", function(data) {
    console.log("response to my other event: ", data);
  });
});

这会将服务器设置为在 localhost:4000 上可用。 要对此进行测试，请从终端 - 在服务器文件夹内 - 运行：

node index.js

现在从浏览器转到 localhost:4000，您应该会看到消息 express-server。 这就是后端完成的一切。

进入 react 应用程序。

在项目文件夹旁边，从终端运行：

npx create-react-app client

这可能需要几分钟，但会在客户端文件夹中创建一个基本的 React 应用。

当 create-react-app 完成后，是时候安装 react 依赖项了，所以在客户端文件夹中运行：

npm i socket.io-client

差不多了。

导航到client/src/App.js，并将里面的所有内容替换为：

import React, { Component } from 'react';
import './App.css';
import socketIOClient from 'socket.io-client'

class App extends Component {
  state = {
    news: ''
  }

  componentDidMount() {
    const handleMessage = (message) => {
      this.setState({ news: message })
    }

    const socket = socketIOClient('http://127.0.0.1:4000')
    socket.on('news', function (data) {
      handleMessage(data.message)
      socket.emit('my other event', { my: 'data' })
    })
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <h1>React Socket.io</h1>
          <p>{this.state.news}</p>
        </header>
      </div>
    );
  }
}

export default App;

现在，如果您转到客户端文件夹中的终端，然后运行：

npm run start

这将启动 react 应用并自动在浏览器中打开该应用。

此时您应该让 react 应用在浏览器中运行，并且 express 应用也在运行。

react 应用应该显示：

反应 Socket.io

你好世界

快递终端应该显示：

response to my other event: { my: 'data' }

解释在 react 应用中发生了什么 -

• 我们在页面开头导入了 socket.io-client - 在反应中，所有依赖项都在开头使用 import 语句导入。
• 在组件开始时，我们为 state.news 设置了一个空字符串，这可以防止我们在组件首次挂载时出现错误，在我们从服务器接收数据之前。
• React 类组件有许多被称为生命周期方法的内置方法，componentDidMount 就是其中之一，它是一个在组件安装到浏览器后立即运行一次的方法。这是我们连接到 express 服务器的地方，因此 socket.io 会侦听来自服务器的数据，当它接收到消息时，会将其传递给 handleMessage 函数，该函数会使用消息调用 setState()。
• setState() 是一个内置于 react 的方法，用于更改/添加组件状态的值。
• 最后由于 react 的工作方式，由于状态发生了变化，组件被重新渲染，并显示 'Hello World' 消息。