Сервер Socket.io дает мне ERR_CONNECTION_REFUSED

Привет, ребята, я получаю сообщение об отказе в соединении при запуске сервера. Я пытаюсь создать простое приложение для чата, используя реакцию.

На задней панели у меня есть

var express = require('express');
var socket = require('socket.io');

var app = express();


server = app.listen(5000, function(){
    console.info('server is running on port 5000')
});

io = socket(server);

io.on('connection', (socket) => {
    console.info(socket.id);

    socket.on('SEND_MESSAGE', function(data){
        io.emit('RECEIVE_MESSAGE', data);
    })
});

В интерфейсе app.js у меня есть:

import React from "react";
import io from "socket.io-client";

class Chat extends React.Component{
    constructor(props){
        super(props);

        this.state = {
            username: '',
            message: '',
            messages: []
        };

        this.socket = io('localhost:5000');

        this.socket.on('RECEIVE_MESSAGE', function(data){
            addMessage(data);
        });

        const addMessage = data => {
            console.info(data);
            this.setState({messages: [...this.state.messages, data]});
            console.info(this.state.messages);
        };

        this.sendMessage = ev => {
            ev.preventDefault();
            this.socket.emit('SEND_MESSAGE', {
                author: this.state.username,
                message: this.state.message
            })
            this.setState({message: ''});

        }
    }

Я убедился, что моя файловая структура настроена правильно. У меня он прослушивает порт 5000, но я также пробовал прослушивать порт 3000, так как это то, к чему приводит мой запуск npm, чтобы запустить мое приложение чата. Та же ошибка. Если я изменю его на порт 3000, я иногда получаю ошибку 404 not found, если это полезно. У меня нет большого опыта работы с react OR socket.io, но это сильно болит мне голову. Любая помощь будет оценена по достоинству!

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
0
272
1

Ответы 1

Если опубликованный вами код - это весь ваш код, и если вы запустите свой сервер с npm start, когда вы его упомянули, произойдет следующее:

  • по умолчанию (проверьте ваш файл package.json), npm start запускает сервер по умолчанию, который просто обслуживает ваши файлы в src. Разработка внешнего интерфейса очень полезна, но это не запускает ваш серверный код. Таким образом, работающий сервер не слушает веб-сокет. Итак, вы получаете ERR_CONNECTION_REFUSED.
  • если вы настроили npm start для запуска кода сервера, он будет слушать websocket, но будет не обслуживать ваши HTML-файлы. Потому что вы просто забыли эту часть своего кода. Итак, вы получите 404.

Я предлагаю вам собрать свой пакет и обслуживать его. Для этого добавьте эту строку в ваш server.js перед app.listen():

app.use(express.static('./build'));

И вы запускаете свой сервер следующим образом:

npm run build
node server.js

Вы также можете предпочесть запускать приложение в режиме разработки, но мне нужно будет найти команды и передать их вам.

Большое спасибо за объяснение, которое помогло мне немного лучше понять. Однако я попытался запустить сервер с помощью ваших команд и добавил строку кода, которую вы мне дали, но все равно получаю ту же ошибку. У меня больше кода, но большая его часть предназначена для других страниц в сборке приложения. Должен ли я вернуться в основную корневую папку, чтобы запустить сервер узла? или я должен остаться в своей клиентской папке и запустить приложение. В целях тестирования я попробовал оба, но по-прежнему получаю ту же ошибку. Я могу связать репозиторий github, если хотите.

Adrian Trevino 17.03.2018 15:56

Да, конечно, вы должны проверить путь к вашему каталогу build. Это может быть что-то вроде app.use(express.static(path.join(__dirname, '../client/build')));. Посетите эту страницу для получения дополнительной информации о настройке: medium.com/front-end-hacking/…

RaphaMex 18.03.2018 15:28

Другие вопросы по теме