[英]Connecting React Native Socket.io-client with Python Server
[英]React socket.io-client not re-rendering component after response from server to a particular room (Python backend)
我有一个使用 Flask-SocketIO 用 Python 编写的服务器后端。 我正在利用它的房间功能进行私人对话。 在加入房间事件时,服务器会触发以下 function 以让前端知道将消息发送到特定用户的位置:
socketio.emit('room name response', {'roomName': room_name, 'recipient': recipient}, to=sid)
其中sid
是连接到套接字时仅为用户创建的私人房间。 然后我想将此信息保留在 map 中的 React state 中,如下所示:
function ChatWindow({ username, token }) {
const [responses, setResponses] = useState([]);
const [roomsMap, setRoomsMap] = useState(new Map());
const [currentRoom, setCurrentRoom] = useState("");
const [messageValue, setMessageValue] = useState("");
var socket = null;
useEffect(() => {
socket = socketIOClient(ENDPOINT);
});
useEffect(() => {
socket.on("global response", (data) => {
setResponses((responses) => [...responses, data]);
});
socket.on("room name response", (data) => {
console.log(`joined ${data.roomName} with ${data.recipient}`);
setCurrentRoom((currentRoom) => data.roomName);
setRoomsMap((roomsMap) => roomsMap.set(data.recipient, data.roomName));
});
return () => socket.close();
}, []);
const sendMessage = () => {
if (messageValue.length < 1) {
return;
}
socket.emit("global message", {
user_name: username,
message: messageValue,
timestamp: Date.now(),
});
setMessageValue("");
};
const joinRoom = (recipient) => {
socket.emit("join", {
token: token,
username: username,
recipient: recipient,
});
// setCurrentRoom(() => roomsMap.get(recipient));
};
const leaveRoom = (recipient) => {
socket.emit("leave", {
token: token,
username: username,
recipient: recipient,
});
const newRooms = roomsMap;
newRooms.delete(recipient);
console.log(`left room with ${recipient}`);
newRooms.forEach((val, key) => console.log(`${val}:${key}`));
setRoomsMap(newRooms);
};
const checkUser = (userToCheck) => {
if (userToCheck === username) {
return styles.chatFromUser;
} else {
return styles.chatToUser;
}
};
return (...);
}
export default ChatWindow;
遗憾的是,React 不会对套接字发出的消息做出反应,即使它可以在开发人员工具的网络选项卡中看到。 global response
工作正常。 当我将后端 function 更改为:
socketio.emit('room name response', {'roomName': room_name, 'recipient': recipient})
React 突然按预期工作。 我试图理解它为什么会发生,特别是当浏览器似乎看到如上所述的传入消息时,所以这很可能是我的错误编码或一些 React/Javascript 的东西。
感谢您提前提供任何帮助。
问题是有时会多次创建套接字,因此 useEffect 当前正在侦听的套接字不一定是房间里的那个。 所以我做了一个全局套接字来解决这个问题,现在整个事情都可以工作了。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.