Question

我正在尝试使用Redux，Express和Socket.io构建聊天应用程序。我已经设置了Express和Socket.io；但是，我似乎无法将服务器连接到前端react / redux应用程序。

使用我当前的代码，当我连接到服务器端口（3000）时，可以获取Socket.io来创建console.log；但是，当我连接到前端react / redux端口（3001）时，无法获得相同的console.log。有人知道我如何将前端连接到后端吗？

下面有我认为很重要的代码，但是如果您要我分享其他任何内容，请告诉我！

Server.js

const path = require('path');
const http = require('http');
const express = require('express');
const socketio = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = socketio(server);

// Set static folder
app.use(express.static(path.join(__dirname, 'public')));

// Run when client connects
io.on('connection', socket => {
    console.log('New WS Connection...')
});

const PORT = 3001 || process.env.PORT;

server.listen(PORT, () => console.log(`Server running on port ${PORT}`))

Index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />
  <meta name="description" content="Web site created using create-react-app" />
  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
    integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous" />
  <script src="https://kit.fontawesome.com/4fc560542f.js" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://use.typekit.net/awo8xkf.css">
  <title>chatter[box]</title>
</head>

<body>
  <div id="root"></div>
  <script src="/socket.io/socket.io.js"></script>
  <script>
    var socket = io.connect();
  </script>
</body>

</html>

App.jsx

import React from 'react';

import { Header } from './components/Header'
import { Chat } from './Scenes/Chat/Chat'
import { About } from './Scenes/About/About'
import authorData from './Scenes/About/components/authorData'
import chatData from './Scenes/Chat/components/chatData'
import userData from './Scenes/Chat/components/userData'
import Login from './Scenes/Users/Login'

import { Route, Switch } from 'react-router-dom'

function App() {
  return (
    <main className="App">
      <Header />
      <Switch>
        <Route path="/" exact render={(props) => (
          <Chat chatData={chatData} userData={userData} {...props} />
        )}/>
        <Route path="/about" render={(props) => (
          <About authorData={authorData} {...props} />
        )}/>
        <Route path="/login" component={Login} />
      </Switch>
    </main>
  );
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import store from './app/store';
import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom'

ReactDOM.render(
  <BrowserRouter>
    <Provider store={store}>
      <App />
    </Provider>
  </BrowserRouter>,
  document.getElementById('root')
);

Answer 1

我找到了答案。我需要安装socket.io-client中间件并创建用于服务器的套接字！

如何从快速服务器端口监听客户端端口？

1 个答案: