时间戳

首页 > 解决方案 > 如何从我的快速服务器端口监听我的客户端端口？

node.js - 如何从我的快速服务器端口监听我的客户端端口？

问题描述

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

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

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

服务器.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}`))

索引.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>

应用程序.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')
);

标签： node.jsreactjsexpresssocket.ioreact-redux

解决方案

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

推荐阅读