Блог

В моем приложении функция io.on на стороне сервера выполняет обратный вызов «эмиттер» 2 раза, я читал, что при использовании npx автоматически включается режим stick для создания-реагирования-приложений, и в режиме разработки io.on выполняется дважды, коротким ответом было удаление React.StrickMode как компонента в приложении. index.js файл на стороне клиента. Начнем с того, что Стрика никогда не было в моем коде.

Текущие журналы выполнения «подключены» 2 раза на стороне сервера,

Цель состоит в том, чтобы он регистрировался «подключенным» только один раз на стороне сервера.

На стороне Сервера:

app.js

 //Listeners
import { emitter } from './sockets/emitter.js';

// App Config
const app = express();
const port = process.env.PORT || 3000;
const server = createServer(app);
const io = new Server(server, { cors: { origin: 'http://localhost:3006' } });

// Middlewares
app.use(Cors());
app.use(express.json({ extended: false }));

// Socket Emitter
io.on('connection', emitter);




// Listener
server.listen(port, () => console.log(`listening on localhost: ${port}`));
 

emitter.js

 

export const emitter = (socket) => {
    try {
        
         console.log('connected');
         socket.emit('products:auction', { message: "Testing Server Side Error" });
                               
    } catch (error) {
            console.log(error);
    };
};
 

Сторона клиента:

index.js

 import { reducers } from './reducers';

import App2 from './components/App2';


const store = createStore(reducers, {}, compose(applyMiddleware(thunk)));

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

App2.js

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

import Landing from './Landing/Landing';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            user: 'new user'
        };
        
    };
    
    componentDidMount() {
        this.setState({user: 'after mounted user'})
        
    }

    

    render() {
        return (
            <BrowserRouter>                                                                                                                        
                <Switch>
                    <Route path="/" exact component={Landing} />                       
                </Switch>                                    
            </BrowserRouter>
        );
    };
};

export default App;
 

Landing.js

 import React from 'react';
import { io } from 'socket.io-client';

import { CONNECTION_PORT } from '../../config';


// Socket Initialization
const socket = io(CONNECTION_PORT);



class Landing extends React.Component {
    constructor(props) {
        super(props);
        this.state = {            
            products: [],            
        };
    };
    
    componentDidMount() {
        socket.on("connect", () => {
            console.log('connected')    
        });
        socket.on('products:auction', (data) => {
                this.setState({ products: data.message });
        });                        
    };
           
    render() {
       
        return (
            <div> Testing Server Side Error </div>
        )    
    };
};

export default Landing;