sometimes its post 3-4 times. probably its about rendering. i moved init function from container.jsx to app.jsx not worked. tried to delete cache. not worked as you can see from console log. is chatlist rendered twice? or something like that using socket.broadcast.emit on backend. not working
client code
import { useEffect } from "react";
import io from "socket.io-client";
let socket;
export const init = () => {
console.log("Connecting...");
socket = io.connect("http://localhost:3000", {
transports: ["websocket"],
});
socket.on("connect", () => console.log("Connected!"));
};
export const sendMessage = (message) => {
if (socket) {
socket.emit("new-message", message);
}
};
export const onNewMessage = (callback) => {
if (!socket) return;
socket.on("receive-message", (message) => {
callback(message);
console.log("Received message: ", message);
});
};
server code
const app = require("express")();
const http = require("http").Server(app);
const io = require("socket.io")(http);
const cors = require("cors");
const Messages = require("./lib/Messages");
app.use(cors());
app.get("/", (req, res) => {
res.end("Merhaba Socket.IO");
});
io.on("connection", (socket) => {
console.log("a user connected");
Messages.list((data) => {
console.log(data);
socket.emit("message-list", data);
});
socket.on("new-message", (message) => {
console.log(message);
Messages.upsert({ message });
socket.broadcast.emit("receive-message", message);
});
socket.on("disconnect", () => console.log("a user disconnected"));
});
http.listen(process.env.PORT || "3000", () => {
console.log("listening on *:3000");
});
chatlist.jsx
import { useChat } from "../context/ChatContext";
import styles from "./style.module.css";
import ChatItem from "./ChatItem";
export default function ChatList() {
const { messages } = useChat();
console.log(messages);
return (
<div className={styles.chatlist}>
<div>
{messages.map((item, key) => (
console.log("Message: ",item),
<ChatItem key={key} value={item} />
))}
</div>
</div>
);
}
