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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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