如何使用 expressjs、reactjs 持久化数据？

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);
  })

});

聊天.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 端口，但你没有处理任何传入的请求，所以它抛出错误。

Answer 3

先回答你的第二个问题：

注意：后端在端口 5000 上工作，客户端在 3000 上同时使用。当我转到端口 5000 时，我收到错误 404，为什么会这样？

您的 node/express/socket-io 后端在端口 5000 上运行。您的反应应用程序（提供 HTML/JS/CSS 文件）的开发服务器在端口 3000 上运行（我假设）。尝试使用浏览器（尝试通过 HTTP 协议获取文件）连接到 node/express/socket-io 后端会导致 404。

如其他人所说，要保留较旧的消息，您需要使用 db.要么localStorage，将数据存储到PC、服务器端，你可以在内存存储中使用（只是push数组中的旧消息，并在用户连接时重播），或者像mongo、sql等实际的db。