2

я создал небольшой чат на Socket.io в связке с Express и react. В моем проекте у меня есть страница выбора пользователей. После запуска и перехода на локальный хост я получаю ошибку:

polling-xhr.js:268 GET http://localhost:3000/socket.io/?EIO=3&transport=polling&t=N8pUE5Z 404 (Not Found)

введите сюда описание изображения

Chat/server/index.js

import dotenv from 'dotenv';
import express from 'express';
import cors from 'cors';
import socket from 'socket.io';
import path from 'path';
import morgan from 'morgan';

import E from './events';
import { readFile, updateFile } from './helpers/fs';

dotenv.config();
const port = process.env.SOCKET_PORT || 5000;
const app = express();

app
.use('/static', express.static(path.resolve(__dirname, 'public')))
.use(cors())
.use(morgan('dev'));

app.get('/users', async function(req, res) {
const users = await getUsersData();
res.send(JSON.stringify(users));
});

const server = app.listen(port, function() {
console.log('server up and running on port ' + port);
});

const io = socket(server);

io.on('connection', function(socket) {
console.log('a user connected', socket.id);

socket.on(E.CHOOSE_USER_FROM_CLIENT, async ({ id }) => {
    socket.broadcast.emit(E.CHOOSE_USER_FROM_SERVER, { id });
    const users = await getUsersData();
    const userAliases = await readFile('socket-user-aliases.json');
    const changedUsers = disableUser(id, users);
    const aliasObject = {
    cocketId: socket.id,
    userId: id
    };
    const changedAliases = [...userAliases, aliasObject];
    await updateUsersData(changedUsers);
    await updateAliases(changedAliases);
});

socket.on(E.ADD_MESSAGE_FROM_CLIENT, ({ message }) => {
    socket.broadcast.emit(E.ADD_MESSAGE_FROM_SERVER, { message });
});

socket.on('disconnect', async function() {
    let UID = null;
    console.log('user disconnected', socket.id);
    const userAliases = await readFile('socket-user-aliases.json');

    userAliases.forEach(({ cocketId, userId }) => {
    if (cocketId === socket.id) {
        UID = userId;
    }
    });

    if (UID) {
    socket.broadcast.emit(E.ENABLE_USER_FROM_SERVER, { id: UID });
    const users = await getUsersData();
    const changedUsers = enableUser(UID, users);
    await updateUsersData(changedUsers);
    const changedAliases = [...userAliases.filter(obj => obj.userId !== UID)];
    await updateAliases(changedAliases);
    }
});
});

async function getUsersData() {
const data = await readFile('users.json');
return data;
}

async function updateUsersData(usersData) {
try {
    await updateFile('users.json', usersData);
    return true;
} catch (err) {
    console.log('Error update users', err);
    return false;
}
}

async function updateAliases(aliasesData) {
try {
    await updateFile('socket-user-aliases.json', aliasesData);
    return true;
} catch (err) {
    console.log('Error update aliases', err);
    return false;
}
}

function enableUser(id, users) {
return users.map(user => {
    return user.id === id
    ? {
        ...user,
        available: true
        }
    : user;
});
}

function disableUser(id, users) {
return users.map(user => {
    return user.id === id
    ? {
        ...user,
        available: false
        }
    : user;
});
}

Chat/server/index.js

import React, { Fragment, useState, useEffect } from 'react';
import { render } from 'react-dom';
import io from 'socket.io-client';
import 'babel-polyfill';

import C from './const';
import E from './events';
import Messages from './components/Messages';
import Form from './components/Form';
import UserBar from './components/UserBar';
import ChatContainer from './components/ChatContainer';
import OnlineUserBar from './components/OnlineUserBar';

const socket = io.connect(C.SOCKET_URL);

const App = () => {
  const [messages, setMessages] = useState([
    {
      text: 'Здарова, пацаны, как дела?',
      name: 'Эрик Картман'
    },
    {
      text: 'Вы что не помните, меня вчера убили, мать вашу?',
      name: 'Кенни Маккормик'
    }
  ]);

  const [user, setUser] = useState({
    // id: 1,
    // name: 'Эрик Картман',
    // nickname: '',
    // available: false,
    // avatar: '1.jpg'
  });

  useEffect(function() {
    socket.on(E.ADD_MESSAGE_FROM_SERVER, ({ message }) =>
      setMessages(messages => [...messages, message])
    );
  }, []);

  const chooseUserHandler = ({ id, name, nickname, avatar }) => {
    socket.emit(E.CHOOSE_USER_FROM_CLIENT, { id });
    setUser({ name, nickname, avatar });
  };

  const addMessageHandler = message => {
    const newMessage = {
      ...user,
      text: message
    };
    socket.emit(E.ADD_MESSAGE_FROM_CLIENT, { message: newMessage });
    setMessages(messages => [...messages, newMessage]);
  };
  return (
    <div>
      {user.name ? (
        <Fragment>
          <OnlineUserBar user={user} />
          <Messages messages={messages} />
          <Form onSubmit={addMessageHandler} />
        </Fragment>
      ) : (
        <Fragment>
          <h3>Выберите персонажа чтобы начать общение</h3>
          <UserBar socket={socket} onChoose={chooseUserHandler} />
        </Fragment>
      )}
    </div>
  );
};

render(
  <ChatContainer>
    <App />
  </ChatContainer>,
  document.getElementById('root')
);

1 ответ 1

2

Ну почему же так не внимательно, у вас же запрос на localhost:3000, а сервер запущен на 5000

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.