node.js - Socket.io 一对一聊天
问题描述
根据文档,当我们将消息发送到特定的 socket.id 时,就会发生一对一的聊天。例如
io.to(socket.id).emit("event","message")
这仅在两个用户同时连接时才有效。如果我们要在我们的应用程序中添加聊天功能,注册用户可以互相聊天(1-1)。什么是最佳解决方案。我已经使用 io.to(socket.id) 实现了聊天,但是当一个的用户离线 socket.id 不可用。
- - - - - - - - - - - - - - - - - -客户 - - - - - - - -----------------
function Chat() {
const [conversations, setConversations] = useState([]);
const [currentChat, setCurrentChat] = useState(null);
const [messages, setMessages] = useState([]);
const [newMessage, setNewMessage] = useState("");
const [arrivalMessage, setArrivalMessage] = useState(null);
const scrollRef = useRef();
const socket = useRef();
const client = isAuthenticated()
const clientId = isAuthenticated().client._id;
const token = isAuthenticated().client.token
console.log(clientId)
useEffect(() => {
socket.current = io("ws://localhost:8900");
socket.current.on("getMessage", (data) => {
setArrivalMessage({
sender: data.senderId,
text: data.text,
createdAt: Date.now(),
});
});
}, []);
useEffect(() => {
arrivalMessage &&
currentChat?.members.includes(arrivalMessage.sender) &&
setMessages((prev) => [...prev, arrivalMessage]);
}, [arrivalMessage, currentChat]);
useEffect(() => {
socket.current.emit("addUser",clientId );
}, [client]);
useEffect(() => {
getconversation(clientId,token).then((data)=>{
if(data.error){
console.log(data.error)
}else{
console.log(data)
setConversations(data)
}
})
}, [])
useEffect(() => {
const getMessages = async () => {
try {
const res = await axios.get("http://localhost:8080/api/messages/" + currentChat?._id);
setMessages(res.data);
} catch (err) {
console.log(err);
}
};
getMessages();
}, [currentChat]);
useEffect(() => {
scrollRef.current?.scrollIntoView({ behavior: "smooth" });
}, [messages]);
const handleSubmit = async (e) => {
e.preventDefault();
const message = {
sender:clientId,
text: newMessage,
conversationId: currentChat._id,
};
const receiverId = currentChat.members.find(
(member) => member !== clientId
);
socket.current.emit("sendMessage", {
senderId: clientId,
receiverId,
text: newMessage,
});
try {
const res = await axios.post("http://localhost:8080/api/messages", message);
setMessages([...messages, res.data]);
setNewMessage("");
} catch (err) {
console.log(err);
}
};
- - - - - - - - - - - - -服务器 - - - - - - - - - - - - -----------------
const io = require("socket.io")(8900, {
cors: {
origin: "http://localhost:3000",
},
});
let users = [];
const addUser = (userId, socketId) => {
!users.some((user) => user.userId === userId) &&
users.push({ userId, socketId });
};
const removeUser = (socketId) => {
users = users.filter((user) => user.socketId !== socketId);
};
const getUser = (userId) => {
return users.find((user) => user.userId === userId);
};
io.on("connection", (socket) => {
//when connect
console.log("a user connected."+socket.id);
//take userId and socketId from user
socket.on("addUser", (userId) => {
addUser(userId, socket.id);
io.emit("getUsers", users);
});
//send and get message
socket.on("sendMessage", ({ senderId, receiverId, text }) => {
console.log("receiverid=====>>>",receiverId)
console.log("users ",users)
const user = getUser(receiverId);
console.log("userSocket Id",user)
io.to(user.socketId).emit("getMessage", {
senderId,
text,
});
});
//when disconnect
socket.on("disconnect", () => {
console.log("a user disconnected!");
removeUser(socket.id);
io.emit("getUsers", users);
});
});
解决方案
首先,需要在您的应用程序中存储消息,以及发送者、接收者和时间戳的详细信息。然后使用 web sockets/socket.io 来补充功能并实时通知每个用户,如果他们在线。这种方法是其他聊天应用所遵循的方法,例如 Slack。
所以你的应用程序的主要属性应该是,
- 当用户发送消息时,客户端应将其发布到后端/服务器进行存储。
- 服务器应该通过套接字发出消息。一旦您变得更大并拥有集群,这将通过发布订阅服务等变得更加复杂。
- 在线用户将收到消息并在聊天屏幕上呈现。
- 如果用户刷新或用户离线并返回,则将从服务器获取该用户的所有消息。
关于发射部分,使用唯一标识符,例如一个或多个用户之间生成的会话的唯一标识符(uuid),以一个房间(用户应该听这个标识符)或用户id为目标,并发射到每个用户id(用户在线后可以收听自己的用户标识符)。消息的详细信息应该足以帮助应用在正确的屏幕上呈现它。
推荐阅读
- c# - ClientBase 的替代方案
.NET Standard 2.0 的 System.ComponentModel.Primitives 中的 .CacheSetting? - sql-server - 如何选择符合特定条件的最新行
- r - 将持续时间转换为 ISO 8601 格式
- arduino - Adafruit 羽毛 BLE 32U4
- reactjs - 在时间间隔内反应反应图表更新
- node.js - 如何对 typeorm 关系进行递归
- django - Dockerfile、docker-compose.yml 和 Postgresql 配置“密码验证失败”
- javascript - 让鼠标事件在 d3.js 中始终如一地工作
- c# - Blazor 在页面之间丢失身份验证
- c++ - 将 ac 库路径从柯南包传递到源文件