I am currently working on developing a chat application using Next, Express, and Socket.io. I have encountered an issue where the state managing the messages in the chat resets every time a new message is sent from one browser to another. You can see an example of this here.
Backend:
import express from 'express'
import http from 'http'
import { Server } from 'socket.io'
import cors from 'cors'
const PORT = 3001
const app = express()
const server = http.createServer(app)
const io = new Server(server, {
cors: {
origin: "http://localhost:3000",
methods: ["GET", "POST"],
}
})
app.use(express.json())
app.use(cors())
io.on("connection", (socket) => {
console.log(`User connected: ${socket.id}`)
socket.on("join_chat", (data) => {
socket.join(data)
})
socket.on("send_message", (data) => {
console.log(`Mensaje recibido: ${JSON.stringify(data)}`)
socket.to(data.chat).emit("receive_message", data)
})
})
server.listen(PORT, () => {
console.log(`Server running on port ${PORT}`)
})
Frontend
import io from 'socket.io-client'
import { useEffect, useState } from 'react'
const socket = io.connect("http://localhost:3001")
export default function Home() {
const [chat, setChat] = useState("")
const [message, setMessage] = useState("")
const [messages, setMessages] = useState([])
const joinChat = () => {
if(chat)
socket.emit("join_chat", chat)
}
const addMessage = (newMessage) => {
setMessages(() => [...messages, newMessage])
}
const sendMessage = () => {
socket.emit("send_message", {
message,
chat,
})
addMessage(message)
}
useEffect(() => {
socket.on("receive_message", (data) => {
addMessage(data.message)
})
}, [])
return (
<div>
<input type="text"
value={chat}
placeholder="Chat room number"
onChange={(e) => setChat(e.target.value)}
/>
<button
onClick={() => joinChat()}
>Click</button>
<input type="text"
value={message}
placeholder="Message"
onChange={(e) => setMessage(e.target.value)}
/>
<button
onClick={() => sendMessage()}
>Click</button>
<h1>Received messages</h1>
{messages.length > 0 && messages.map((message, index) =>
<li key={index}>{message}</li>
)}
</div>
)
}