“‘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时，我会得到这样的消息，但不知道如何修复它：

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

我还在我的socket.io和npm更新中包括了表达式和socket.io依赖项。

{
  "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，您将看到消息快速服务器。这就是后端所做的一切。

反应应用程序。

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

npx create-react-app client

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

当create完成后，是时候安装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

Hello World

而快车终点站应显示：

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

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

我们导入了Socket.IO--页面开始时的客户端--在使用导入statements.

• At (我们为state.news设置了一个空字符串)开始时导入所有依赖项，这将阻止我们在组件第一次挂载时获得错误，在我们接收到并且来自server.

• React类组件的数据有许多内置方法之前-在称为生命周期方法的方法中，componentDidMount就是其中之一，它是一个在组件被挂载在浏览器中时就运行一次的方法。这是我们连接到快速服务器的地方，因此message.

• setState()监听来自服务器的数据，当它收到消息时将其传递给handleMessage函数，该函数调用setState()，而setState()是一个内置的function方法，它用于根据function的工作方式更改/添加组件state.

• Finally的值，因为状态已经改变，组件被重新呈现并显示'Hello‘消息。