Socket.io继续与单个浏览器建立新连接，并以内存不足的JavaScript堆结束

Question

我正在制作一个带有股票观察列表的股票应用程序，但socket.io客户端不断与单个浏览器建立新的连接。大约250次连接后，javascript堆内存不足，并停止工作。我从套接字发送的数据是一个objetc数组，类似于客户端代码中处于初始状态的数据。此外，如果你有一个更好的方式来渲染它和任何其他建议，那将是很好的。

服务器端

const express = require('express');
const socketio = require('socket.io');
const http = require('http');
const User = require('./model/stock.js')
require('./db/mongoose.js')
const PORT = process.env.PORT || 5000;
//const router = require('./router') 
const app = express();
const server = http.createServer(app);
const io = socketio(server);

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

const Watchlist=['3MINDIA','SBIN','GLENMARK']
setInterval(( )=> {

//Gives localtime with seconds always 00 
var d = new Date();
var timeStamp = d.toLocaleTimeString('en-US', { hour12: false });
const lac =timeStamp.slice(0,6)
const localtime = lac+"00"
//Finding all stocks with time equal to localtime (minutedata)
User.find({ time : localtime},(err, res) =>{  
if (err) {
console.log(err)
}
//Pushing all the stock matching the stocks in watchlist into an array Allstock and emitting 
it 
//Repeating it every Second              
const AllStocks=[]     
Watchlist.map(watch =>{
res.map(stock =>{
if(stock.symbol == watch){
let obj ={
symbol:stock.symbol,
price:stock.close
}
list.push(obj)
}
})
})
socket.emit('stock',AllStocks)
})
},1000)

})

server.listen(PORT, ()=> console.log(`Server is running on port ${PORT}`))

客户端

enter code here
import React, { useEffect,useState } from 'react';
import './sidebar.css'
import io from 'socket.io-client';
function SideDrawer (props) {
let drawerClass = "side-drawer"
if(props.show === 'watchlist'){
drawerClass = "side-drawer open"
}
//Intial state are random values
const [Stock, setStock] = useState([{symbol:'SBIN', price:'125'},{symbol:'3MINDIA', price:'1254'}]);
let socket;
const ENDPOINT = 'localhost:5000';
socket= io(ENDPOINT);

useEffect(()=>{
socket.on('stock', (res)=>{
setStock(res)
})    
})
return(
<nav className={drawerClass} >
<ul className="side-bar">
<div>
{Stock.map((item) => (
<li key={item.symbol} >{item.symbol} = {item.price}</li> 
))}
</div>
</ul>
</nav>
)}
export default SideDrawer;

Answer 1

您已经忘记了useEffect中的依赖关系。如果只想在第一次渲染时设置此侦听器(componentDidMount(，那么useEffect应该如下所示：

useEffect(()=>{
socket.on('stock', (res)=>{
setStock(res)
})    
}, [])

如果没有这一点，useEffect将在每次渲染中激发，并且因为您在每次渲染时都设置了Stock，所以这将激发下一次渲染，并且应用程序处于循环中。