Skip to content

Commit 6fbe3c7

Browse files
fryorcrakenfryorcraken
committed
fix connectivity indicator
1 parent c00d11c commit 6fbe3c7

File tree

1 file changed

+36
-146
lines changed

1 file changed

+36
-146
lines changed

‎index.html‎

Lines changed: 36 additions & 146 deletions
Original file line numberDiff line numberDiff line change
@@ -797,10 +797,7 @@
797797
this.messageInput.disabled = false;
798798
this.sendButton.disabled = false;
799799

800-
// Start monitoring peer counts for tooltip
801-
this.startPeerCountMonitoring();
802-
803-
// Initial connection status check
800+
// Initial connection status check using current health
804801
this.updateConnectionStatus();
805802

806803
} catch (error) {
@@ -811,16 +808,11 @@
811808
}
812809

813810
setupWakuEventListeners() {
814-
if (!this.node || !this.node.libp2p) return;
815-
816-
// Listen for peer connections
817-
this.node.libp2p.addEventListener('peer:connect', (event) => {
818-
this.handlePeerConnect(event.detail);
819-
});
811+
if (!this.node || !this.node.events) return;
820812

821-
// Listen for peer disconnections
822-
this.node.libp2p.addEventListener('peer:disconnect', (event) => {
823-
this.handlePeerDisconnect(event.detail);
813+
// Listen for health status changes
814+
this.node.events.addEventListener('waku:health', (event) => {
815+
this.handleHealthChange(event.detail);
824816
});
825817
}
826818

@@ -829,153 +821,51 @@
829821
this.addSystemMessage(`Custom peer waku.fryorcraken.xyz added to bootstrap peers`);
830822
}
831823

832-
handlePeerConnect(peerId) {
833-
this.updateConnectionStatus();
834-
this.addConnectionMessage(`Peer connected: ...${peerId.toString().substring(10, 20)}...`);
824+
handleHealthChange(healthStatus) {
825+
this.updateConnectionStatus(healthStatus);
835826

836-
// Show the initial connection message only once when first peer connects
837-
if (!this.hasShownConnectedMessage) {
827+
// Show connection message when first achieving healthy status
828+
if (!this.hasShownConnectedMessage && healthStatus !== 'Unhealthy') {
838829
this.hasShownConnectedMessage = true;
839830
this.addSystemMessage('Connected to Waku network! You can now chat.');
840831
}
841832

842-
// Update tooltip content when peers change
843-
this.updatePeerCountTooltip();
833+
// Log health status changes
834+
this.addConnectionMessage(`Health status: ${healthStatus}`);
844835
}
845836

846-
handlePeerDisconnect(peerId) {
847-
this.updateConnectionStatus();
848-
this.addConnectionMessage(`Peer disconnected: ...${peerId.toString().substring(10, 20)}...`);
837+
updateConnectionStatus(healthStatus) {
838+
// Use provided health status or get current health status
839+
const status = healthStatus || this.node?.health || 'Unhealthy';
849840

850-
// Update tooltip content when peers change
851-
this.updatePeerCountTooltip();
852-
}
853-
854-
async updateConnectionStatus() {
855-
// Update status based on current peer connections
856-
setTimeout(async () => {
857-
const protocolCounts = await this.getPeerProtocolCounts();
858-
const hasLightPush = protocolCounts[Protocols.LightPush] > 0;
859-
const hasFilter = protocolCounts[Protocols.Filter] > 0;
860-
861-
if (hasLightPush && hasFilter) {
862-
this.updateStatus('Connected', 'connected');
863-
this.messageInput.disabled = false;
864-
this.sendButton.disabled = false;
865-
} else {
866-
this.updateStatus('Disconnected', 'error');
867-
this.messageInput.disabled = true;
868-
this.sendButton.disabled = true;
869-
}
870-
}, 100); // Small delay to ensure connection state is updated
871-
}
872-
873-
874-
async getPeerProtocolCounts() {
875-
if (!this.node || !this.node.libp2p || !this.node.libp2p.getConnections) {
876-
return {
877-
[Protocols.Filter]: 0,
878-
[Protocols.LightPush]: 0,
879-
[Protocols.Store]: 0,
880-
[Protocols.Relay]: 0
881-
};
882-
}
883-
884-
try {
885-
const connections = this.node.libp2p.getConnections();
886-
const activeConnections = connections.filter(conn => conn.status === 'open');
887-
return await this.countPeersByProtocol(activeConnections);
888-
} catch (error) {
889-
console.warn('Could not get peer protocol counts:', error);
890-
return {
891-
[Protocols.Filter]: 0,
892-
[Protocols.LightPush]: 0,
893-
[Protocols.Store]: 0,
894-
[Protocols.Relay]: 0
895-
};
841+
if (status === 'SufficientlyHealthy') {
842+
this.updateStatus('Connected', 'connected');
843+
this.messageInput.disabled = false;
844+
this.sendButton.disabled = false;
845+
} else if (status === 'MinimallyHealthy') {
846+
this.updateStatus('Connected-ish', 'connecting');
847+
this.messageInput.disabled = false;
848+
this.sendButton.disabled = false;
849+
} else {
850+
this.updateStatus('Disconnected', 'error');
851+
this.messageInput.disabled = true;
852+
this.sendButton.disabled = true;
896853
}
854+
855+
// Update tooltip with health status
856+
this.updateHealthTooltip(status);
897857
}
898858

899-
startPeerCountMonitoring() {
900-
// Update peer counts immediately and then every 5 seconds
901-
this.updatePeerCountTooltip();
902-
setInterval(() => {
903-
this.updatePeerCountTooltip();
904-
}, 5000);
905-
}
906-
907-
async updatePeerCountTooltip() {
908-
if (!this.node || !this.node.libp2p || !this.node.libp2p.getConnections) {
909-
this.statusTooltip.textContent = 'No connection info available';
910-
return;
911-
}
912-
913-
try {
914-
const connections = this.node.libp2p.getConnections();
915-
const activeConnections = connections.filter(conn => conn.status === 'open');
916-
917-
if (activeConnections.length === 0) {
918-
this.statusTooltip.textContent = 'No peer connections';
919-
return;
920-
}
921859

922-
const protocolCounts = await this.countPeersByProtocol(activeConnections);
923-
this.updateTooltipContent(protocolCounts);
924-
} catch (error) {
925-
console.warn('Could not get peer count info:', error);
926-
this.statusTooltip.textContent = 'Connection info unavailable';
927-
}
928-
}
929-
930-
async countPeersByProtocol(connections) {
931-
const protocolCounts = {
932-
[Protocols.Filter]: 0,
933-
[Protocols.LightPush]: 0,
934-
[Protocols.Store]: 0,
935-
[Protocols.Relay]: 0
860+
updateHealthTooltip(healthStatus) {
861+
const statusDescriptions = {
862+
'Unhealthy': 'No peer connections',
863+
'MinimallyHealthy': 'Basic connectivity established',
864+
'SufficientlyHealthy': 'Good connectivity to network'
936865
};
937-
938-
for (const connection of connections) {
939-
try {
940-
const peer = await this.node.libp2p.peerStore.get(connection.remotePeer);
941-
942-
// Check which protocols this peer supports
943-
if (peer.protocols) {
944-
for (const protocol of peer.protocols) {
945-
if (protocol.includes('filter')) {
946-
protocolCounts[Protocols.Filter]++;
947-
} else if (protocol.includes('lightpush')) {
948-
protocolCounts[Protocols.LightPush]++;
949-
} else if (protocol.includes('store')) {
950-
protocolCounts[Protocols.Store]++;
951-
} else if (protocol.includes('relay')) {
952-
protocolCounts[Protocols.Relay]++;
953-
}
954-
}
955-
}
956-
} catch (error) {
957-
// Peer not found in store, skip
958-
continue;
959-
}
960-
}
961-
962-
return protocolCounts;
963-
}
964-
965-
updateTooltipContent(protocolCounts) {
966-
const totalPeers = Object.values(protocolCounts).reduce((sum, count) => sum + count, 0);
967866

968-
if (totalPeers === 0) {
969-
this.statusTooltip.textContent = 'Connected but no protocol info';
970-
return;
971-
}
972-
973-
const protocolInfo = Object.entries(protocolCounts)
974-
.filter(([_, count]) => count > 0)
975-
.map(([protocol, count]) => `<span class="tooltip-protocol">${protocol}: ${count}</span>`)
976-
.join('');
977-
978-
this.statusTooltip.innerHTML = protocolInfo || 'No supported protocols detected';
867+
const description = statusDescriptions[healthStatus] || 'Unknown status';
868+
this.statusTooltip.innerHTML = `<span class="tooltip-protocol">Status: ${healthStatus}</span><span class="tooltip-protocol">${description}</span>`;
979869
}
980870

981871
updateStatus(text, className) {

0 commit comments

Comments
 (0)