Как сохранить данные, используя expressjs, Reactionjs?

Question

Я создал простое приложение для чата. Я хочу сохранить данные, поэтому всякий раз, когда я обновляю их, должен отображаться и предыдущий чат В настоящее время я использую socket.io, reactjs и nodejs / express. Когда я обновляю страницу, все чаты исчезли, почему так? Я думаю, что мой бэкэнд не работает в приведенном ниже коде. В настоящее время работает только клиентская часть, а не бэкэнд, почему так? Что не так в server.js?

Код:

server.js:

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

const app = express();

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

io = socket(server);

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

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

});

chat.js:

import React, { Component } from 'react'
import './chat.css'
import Icon, {
    Ionicons,
} from 'react-web-vector-icons'
import io from "socket.io-client";

export default class Chat extends Component {

    constructor(props){
        super(props);

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

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

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

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

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

    }

    render() {
        return (
        <div>
                <div id="status"></div>
                <div id="chat">
                    <div className="card">
                        <div id="messages" className="card-block">
                            {this.state.messages.map(message => {
                                    return (
                                        <div className="msgCard">{message.message}</div>
                                    )
                            })}
                        </div>
                    </div>
                    <div className="row">
                        <div className="column">
                            <input id="inputmsg" type="text" placeholder="Enter Message...."
                            value={this.state.message} onChange={ev => this.setState({message: ev.target.value})}/>
                        </div>
                        <div className="column2">
                            <button id="send" className="button" onClick={this.sendMessage}>Send</button>
                        </div>
                    </div>
                </div>
        </div>
        )
    }
}

Примечание: сервер работает на порте 5000 и клиенте на 3000 одновременно. Когда я захожу в порт 5000 я получаю ошибку 404, почему так?

Скриншот:

Приложение чата:

Answer 1

Вы должны сохранить где-то ваши данные.Да, это возможно без базы данных.Здесь я реализовал это, используя LocalStorage, который находится в браузере.

this.state = {
        // Get previously saved messages.
        message: '',
        messages: JSON.parse(LocalStorage.getItem('messages')) || [],
    };


const addMessage = data => {
        console.log(data);
        this.setState({messages: [...this.state.messages, data]});
        console.log(this.state.messages);
        // Saving to HTML5 LocalStorage
        LocalStorage.setItem('messages' , JSON.stringify(this.state.messages);
    };

Надеюсь, это поможет.Оставьте комментарий, если у вас возникнут какие-либо проблемы.

Answer 2

Чтобы ответить на ваш второй вопрос, сначала:

Примечание: сервер работает на порту 5000, а клиент на 3000 одновременно.Когда я перехожу к порту 5000, я получаю сообщение об ошибке 404, почему так?

Ваш серверный узел / экспресс / сокет-io работает на порту 5000. Ваш dev-сервер для вашего приложения реагирования (который обслуживает HTML)/ JS / CSS файлы) работает на порту 3000 (я предполагаю).Попытка подключиться к вашему узлу node / express / socket-io с помощью вашего браузера (который пытается извлечь файлы по протоколу HTTP) приводит к 404.

Чтобы сохранить старые сообщения, как уже говорили другие, вам нужноиспользовать дб.либо localStorage, который хранит данные на ПК, на стороне сервера, которые вы можете использовать в памяти (просто push старое сообщение в массиве, и воспроизводить при подключении пользователя), либо фактическую базу данных, такую ​​как mongo, sql и т. д.

Answer 3

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

вы прослушиваете порт 5000, но не обрабатываете входящие запросы, поэтому выдает ошибку.