javascript - 如何使用 expressjs、reactjs 持久化数据?
问题描述
我创建了一个简单的聊天应用程序。我想保留数据,所以每当我刷新它时,它也应该显示以前的聊天。目前,我正在使用 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 为什么会这样?
截屏:
聊天应用:
解决方案
您必须将数据保存在某个地方。是的,没有数据库是可能的。在这里,我使用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);
};
我希望它有所帮助。如果您遇到任何问题,请发表评论。
推荐阅读
- sql - 输出过去一年每个月的第一天的 where 子句
- database - “[FATAL] [DBT-10503]” 指定的模板文件无效
- java - 如何使用java在QBP ^ Q11中为QPD段设置样本ID
- java - 返回多个值的最佳实践?
- javascript - 延迟液体页面渲染,直到 Ajax 返回数据之后
- bash - 在查找命令行上插入排除项
- swift - 更新孩子的价值
- asp.net - 如何将 ASP.NET 应用程序部署到 Azure 容器?- 不支持映像的操作系统版本
- node.js - 节点 child_process.exec 将特殊字符显示为问号
- php - 在写入文件 PHP 之前从 unicode 转换为 UTF-8