反应Socket.io

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

我还在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是客户端库。因此，对于聊天应用程序设置，您将同时创建一个快速服务器和一个React应用程序。

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

要快速运行一些东西

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

npm init -y

其次：

npm i express socket.io

这负责服务器的依赖性。现在在index.js中：

server / 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设置了一个空字符串，这使我们避免在组件首次挂载时收到错误，然后再从服务器接收数据。
反应类组件具有许多内置方法，这些方法称为生命周期方法，componentDidMount是其中的一种，它是一种在组件安装到浏览器中后立即运行的方法。这是我们连接到Express服务器的地方，因此socket.io会从服务器监听数据，当它接收到一条消息时，会将其传递给handleMessage函数，该函数将使用消息调用setState（）。
setState（）是react内置的一种方法，用于将值更改/添加到组件状态。
最后，由于反应的工作方式，由于状态已更改，因此组件将重新呈现并显示“ Hello World”消息。

没有定义'express'no-undef

1 个答案:

反应Socket.io

你好世界