Fixed bug with connections being re-done every re-render and added logs
Co-Authored-By: nthouliss <nthouliss@users.noreply.github.com>
This commit is contained in:
parent
29d868d5f5
commit
3c82d1954b
@ -15,23 +15,39 @@ function useSession(onConnectionOpen, onConnectionSync) {
|
|||||||
const streamsRef = useRef(streams);
|
const streamsRef = useRef(streams);
|
||||||
|
|
||||||
function addConnection(connection) {
|
function addConnection(connection) {
|
||||||
setConnections(prevConnnections => ({
|
console.log("Adding connection", connection.peer);
|
||||||
...prevConnnections,
|
setConnections(prevConnnections => {
|
||||||
[connection.peer]: connection
|
console.log("Connections", {
|
||||||
}));
|
...prevConnnections,
|
||||||
|
[connection.peer]: connection
|
||||||
|
});
|
||||||
|
return {
|
||||||
|
...prevConnnections,
|
||||||
|
[connection.peer]: connection
|
||||||
|
};
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function addStream(stream, id) {
|
function addStream(stream, id) {
|
||||||
setStreams(prevStreams => ({
|
console.log("Adding stream", id);
|
||||||
...prevStreams,
|
setStreams(prevStreams => {
|
||||||
[id]: stream
|
console.log("Streams", {
|
||||||
}));
|
...prevStreams,
|
||||||
|
[id]: stream
|
||||||
|
});
|
||||||
|
return {
|
||||||
|
...prevStreams,
|
||||||
|
[id]: stream
|
||||||
|
};
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
console.log("Creating peer");
|
||||||
setPeer(new Peer());
|
setPeer(new Peer());
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
|
console.log("Cleaning up streams");
|
||||||
for (let stream of Object.values(streamsRef.current)) {
|
for (let stream of Object.values(streamsRef.current)) {
|
||||||
for (let track of stream.getTracks()) {
|
for (let track of stream.getTracks()) {
|
||||||
track.stop();
|
track.stop();
|
||||||
@ -42,19 +58,22 @@ function useSession(onConnectionOpen, onConnectionSync) {
|
|||||||
|
|
||||||
// Update stream refs
|
// Update stream refs
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
console.log("Syncing stream ref to stream state");
|
||||||
streamsRef.current = streams;
|
streamsRef.current = streams;
|
||||||
}, [streams, streamsRef]);
|
}, [streams, streamsRef]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
function handleOpen(id) {
|
function handleOpen(id) {
|
||||||
|
console.log("Peer open", id);
|
||||||
setPeerId(id);
|
setPeerId(id);
|
||||||
|
|
||||||
|
console.log("Getting user data");
|
||||||
getUserMedia(
|
getUserMedia(
|
||||||
{
|
{
|
||||||
video: {
|
video: {
|
||||||
frameRate: { ideal: 15, max: 20 }
|
frameRate: { ideal: 15, max: 20 }
|
||||||
},
|
},
|
||||||
audio: true
|
audio: false
|
||||||
},
|
},
|
||||||
stream => {
|
stream => {
|
||||||
addStream(stream, id);
|
addStream(stream, id);
|
||||||
@ -64,6 +83,7 @@ function useSession(onConnectionOpen, onConnectionSync) {
|
|||||||
|
|
||||||
function handleConnection(connection) {
|
function handleConnection(connection) {
|
||||||
connection.on("open", () => {
|
connection.on("open", () => {
|
||||||
|
console.log("incoming connection added", connection.peer);
|
||||||
const metadata = connection.metadata;
|
const metadata = connection.metadata;
|
||||||
if (metadata.sync) {
|
if (metadata.sync) {
|
||||||
connection.send({
|
connection.send({
|
||||||
@ -75,7 +95,7 @@ function useSession(onConnectionOpen, onConnectionSync) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
addConnection(connection, false);
|
addConnection(connection);
|
||||||
|
|
||||||
if (onConnectionOpen) {
|
if (onConnectionOpen) {
|
||||||
onConnectionOpen(connection);
|
onConnectionOpen(connection);
|
||||||
@ -83,6 +103,7 @@ function useSession(onConnectionOpen, onConnectionSync) {
|
|||||||
});
|
});
|
||||||
|
|
||||||
function removeConnection() {
|
function removeConnection() {
|
||||||
|
console.log("removing connection", connection.peer);
|
||||||
setConnections(prevConnections => {
|
setConnections(prevConnections => {
|
||||||
const { [connection.peer]: old, ...rest } = prevConnections;
|
const { [connection.peer]: old, ...rest } = prevConnections;
|
||||||
return rest;
|
return rest;
|
||||||
@ -93,6 +114,7 @@ function useSession(onConnectionOpen, onConnectionSync) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function handleCall(call) {
|
function handleCall(call) {
|
||||||
|
console.log("incoming call", call.peer);
|
||||||
call.answer(streams[peerId]);
|
call.answer(streams[peerId]);
|
||||||
call.on("stream", remoteStream => {
|
call.on("stream", remoteStream => {
|
||||||
addStream(remoteStream, call.peer);
|
addStream(remoteStream, call.peer);
|
||||||
@ -122,44 +144,42 @@ function useSession(onConnectionOpen, onConnectionSync) {
|
|||||||
}, [peer, peerId, connections, onConnectionOpen, onConnectionSync, streams]);
|
}, [peer, peerId, connections, onConnectionOpen, onConnectionSync, streams]);
|
||||||
|
|
||||||
function call(connectionId) {
|
function call(connectionId) {
|
||||||
|
console.log("Calling", connectionId);
|
||||||
const call = peer.call(connectionId, streams[peerId]);
|
const call = peer.call(connectionId, streams[peerId]);
|
||||||
call.on("stream", stream => {
|
call.on("stream", stream => {
|
||||||
addStream(stream, connectionId);
|
addStream(stream, connectionId);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function sync(connectionIds) {
|
|
||||||
for (let connectionId of connectionIds) {
|
|
||||||
if (connectionId in connections) {
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
const connection = peer.connect(connectionId, {
|
|
||||||
metadata: { sync: false }
|
|
||||||
});
|
|
||||||
addConnection(connection, false);
|
|
||||||
call(connectionId);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function connectTo(connectionId) {
|
function connectTo(connectionId) {
|
||||||
|
console.log("Connecting to", connectionId);
|
||||||
if (connectionId in connections) {
|
if (connectionId in connections) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const connection = peer.connect(connectionId, {
|
const connection = peer.connect(connectionId, {
|
||||||
metadata: { sync: true }
|
metadata: { sync: true }
|
||||||
});
|
});
|
||||||
addConnection(connection, false);
|
addConnection(connection);
|
||||||
connection.on("open", () => {
|
connection.on("open", () => {
|
||||||
connection.on("data", data => {
|
connection.on("data", data => {
|
||||||
if (data.id === "sync") {
|
if (data.id === "sync") {
|
||||||
sync(data.data);
|
for (let syncId of data.data) {
|
||||||
|
console.log("Syncing to", syncId);
|
||||||
|
if (connectionId === syncId || syncId in connections) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
const syncConnection = peer.connect(syncId, {
|
||||||
|
metadata: { sync: false }
|
||||||
|
});
|
||||||
|
addConnection(syncConnection);
|
||||||
|
call(syncId);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
if (onConnectionOpen) {
|
if (onConnectionOpen) {
|
||||||
onConnectionOpen(connection);
|
onConnectionOpen(connection);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
call(connectionId);
|
call(connectionId);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -26,10 +26,15 @@ function Game() {
|
|||||||
);
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (gameId !== null && peerId !== null && streams[peerId]) {
|
if (
|
||||||
|
gameId !== null &&
|
||||||
|
peerId !== null &&
|
||||||
|
streams[peerId] &&
|
||||||
|
!(gameId in connections)
|
||||||
|
) {
|
||||||
connectTo(gameId);
|
connectTo(gameId);
|
||||||
}
|
}
|
||||||
}, [gameId, peerId, connectTo, streams]);
|
}, [gameId, peerId, connectTo, streams, connections]);
|
||||||
|
|
||||||
const [mapSource, setMapSource] = useState(null);
|
const [mapSource, setMapSource] = useState(null);
|
||||||
const mapDataRef = useRef(null);
|
const mapDataRef = useRef(null);
|
||||||
|
Loading…
Reference in New Issue
Block a user