如何解决React,Express,socket.io不实时更新,控制台无错误
我正在尝试使用react,express和socket.io制作一个实时购物清单应用程序。 我设置了socket.io以及所有设置,但是当我打开两个浏览器窗口并将一个项添加到其中时,另一个不会更新其购物清单项。尽管console.log(“已建立的套接字连接”)正在工作。
我做错了什么?
index.js
const express = require("express");
const mongoose = require("mongoose");
const cors = require("cors");
const helmet = require("helmet");
const socket = require("socket.io");
const routes = require("./routes/api");
const app = express();
const port = process.env.port || 9000;
mongoose.connect("mongodb://localhost/shoppinglist",{
useNewUrlParser: true,useUnifiedTopology: true,useCreateIndex: true,useFindAndModify: false,});
app.use(cors());
app.use(helmet());
app.use(express.json());
app.use("/",routes);
app.use((err,req,res,next) => {
res.status(422).send({
error: err.message,});
});
const server = app.listen(port,() => {
console.log(`now listening for requests on port ${port}`);
});
const io = socket(server);
io.on("connection",(socket) => {
console.log("made socket connection");
socket.on("item_added",(item) => {
io.sockets.emit("item_added",item);
});
});
ShoppingList.js React组件
import React,{ Component } from "react";
import AddItem from "./AddItem";
import socketIOClient from "socket.io-client";
class ShoppingList extends Component {
state = {
id: null,products: [],socket: socketIOClient(
"http://localhost:9000/" + this.props.match.params.id
),};
componentDidMount() {
this.setState({
id: this.props.match.params.id,});
this.socketListen();
this.getItems();
}
socketListen = () => {
this.state.socket.on("item_added",(data) => {
let products = [...this.state.products,data];
this.setState({
products: products,});
});
};
getItems = () => {
fetch("http://localhost:9000/" + this.props.match.params.id)
.then((data) => {
return data.json();
})
.then((json) => {
this.setState({
products: json,});
});
};
addItem = (item) => {
fetch("http://localhost:9000/" + this.props.match.params.id,{
headers: {
Accept: "application/json","Content-Type": "application/json",},method: "POST",body: JSON.stringify({
product: item.product,quantity: item.quantity,quantityType: item.quantityType,}),})
.then((response) => response.json())
.then(() => {
this.getItems();
this.state.socket.emit("item_added",{
product: item.product,});
});
};
deleteShoppingList = () => {
fetch("http://localhost:9000/" + this.props.match.params.id,{
method: "DELETE",})
.then((response) => response.json())
.then(() => {});
};
render() {
const itemList = this.state.products.map((product) => {
return (
<div key={product._id}>
<h2>Product: {product.product}</h2>
<h2>Quantity: {product.quantity}</h2>
<h2>Quantity type: {product.quantityType}</h2>
<button onClick={() => this.deleteItem(product)}>Delete</button>
</div>
);
});
return (
<div>
<h1 className="text-4xl font-bold text-white mb-10">Shopping list</h1>
{itemList}
<AddItem addItem={this.addItem} />
<button onClick={this.deleteShoppingList}>Delete Shopping List</button>
</div>
);
}
}
export default ShoppingList;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。