luneski/mqtt-explorer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement mobile-first navigation with tabs, server-side auto-connect, improve mobile UX (#1008)

Browse Source 
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: thomasnordquist <7721625+thomasnordquist@users.noreply.github.com>
Co-authored-by: Thomas Nordquist <thomasnordquist@users.noreply.github.com>
This commit is contained in:
Copilot
2025-12-27 17:02:49 +01:00
committed by GitHub
parent 8f86d272c7
commit 4de52aba7c
45 changed files with 1381 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/server.ts
View File

@@ -12,7 +12,7 @@ import ConfigStorage from '../backend/src/ConfigStorage'
import { SocketIOServerEventBus } from '../events/EventSystem/SocketIOServerEventBus'
import { Rpc } from '../events/EventSystem/Rpc'
import { makeOpenDialogRpc, makeSaveDialogRpc } from '../events/OpenDialogRequest'
import { getAppVersion, writeToFile, readFromFile } from '../events'
import { getAppVersion, writeToFile, readFromFile, addMqttConnectionEvent } from '../events'
import { RpcEvents } from '../events/EventsV2'
const PORT = process.env.PORT || 3000
@@ -215,17 +215,6 @@ async function startServer() {
next()
})
// Send auth status to clients on connection
io.on('connection', (socket) => {
// Inform client about auth status
const authDisabled = (socket as any).authDisabled === true
socket.emit('auth-status', { authDisabled })
if (!isProduction) {
console.log(`Client connected, auth disabled: ${authDisabled}`)
}
})
// Initialize backend event bus with Socket.io
const backendEvents = new SocketIOServerEventBus(io)
const backendRpc = new Rpc(backendEvents)
@@ -238,6 +227,59 @@ async function startServer() {
const configStorage = new ConfigStorage(path.join(process.cwd(), 'data', 'settings.json'), backendRpc)
configStorage.init()
// Send auth status to clients on connection
io.on('connection', (socket) => {
// Inform client about auth status
const authDisabled = (socket as any).authDisabled === true
socket.emit('auth-status', { authDisabled })
if (!isProduction) {
console.log(`Client connected, auth disabled: ${authDisabled}`)
}
// Auto-connect to MQTT broker if configured via environment variables
const autoConnectHost = process.env.MQTT_AUTO_CONNECT_HOST
if (autoConnectHost) {
const connectionId = 'auto-connect-' + Date.now()
// Notify client immediately that auto-connect will happen
socket.emit('auto-connect-initiated', { connectionId })
// Delay auto-connect to give client time to subscribe to events
setTimeout(() => {
const protocol = process.env.MQTT_AUTO_CONNECT_PROTOCOL || 'mqtt'
const port = parseInt(process.env.MQTT_AUTO_CONNECT_PORT || '1883')
const tls = protocol.endsWith('s') // mqtts or wss
const url = `${protocol}://${autoConnectHost}:${port}`
const autoConnectConfig = {
id: connectionId,
options: {
url,
username: process.env.MQTT_AUTO_CONNECT_USERNAME,
password: process.env.MQTT_AUTO_CONNECT_PASSWORD,
tls,
certValidation: false,
clientId: process.env.MQTT_AUTO_CONNECT_CLIENT_ID || 'mqtt-explorer-' + Math.random().toString(16).substr(2, 8),
subscriptions: [{ topic: '#', qos: 0 as 0 | 1 | 2 }], // Subscribe to all topics
}
}
if (!isProduction) {
console.log('Auto-connecting to MQTT broker:', {
connectionId,
url: autoConnectConfig.options.url,
clientId: autoConnectConfig.options.clientId,
username: autoConnectConfig.options.username || '(none)',
})
}
// Trigger connection via backend events
backendEvents.emit(addMqttConnectionEvent, autoConnectConfig)
}, 1000) // 1 second delay to allow client to set up event subscriptions
}
})
// Setup RPC handlers for file operations
backendRpc.on(makeOpenDialogRpc(), async request => {
// In browser mode, file selection is handled client-side via upload