diff --git a/src/App.js b/src/App.js
index 0c0fd29..15ab3b4 100644
--- a/src/App.js
+++ b/src/App.js
@@ -5,8 +5,8 @@ class App extends React.Component {
super(props);
this.state = {
counter: 0,
- ws: null,
};
+ this.websocket = null;
this.pingInterval = null;
}
@@ -19,18 +19,17 @@ class App extends React.Component {
// Connect to WebSocket - use dynamic URL based on current location
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
- const websocket = new WebSocket(`${protocol}//${window.location.host}/counter-ws`);
- this.setState({ ws: websocket });
+ this.websocket = new WebSocket(`${protocol}//${window.location.host}/counter-ws`);
- websocket.onopen = () => {
+ this.websocket.onopen = () => {
console.log('WebSocket connected');
};
- websocket.onerror = (error) => {
+ this.websocket.onerror = (error) => {
console.log('WebSocket error:', error);
};
- websocket.onmessage = (event) => {
+ this.websocket.onmessage = (event) => {
const data = JSON.parse(event.data);
if (data.type === 'counter-update') {
this.setState({ counter: data.value });
@@ -40,14 +39,14 @@ class App extends React.Component {
}
};
- websocket.onclose = (event) => {
+ this.websocket.onclose = (event) => {
console.log('WebSocket disconnected', 'Code:', event.code, 'Reason:', event.reason);
};
// Send ping every 30 seconds to keep connection alive
this.pingInterval = setInterval(() => {
- if (websocket.readyState === WebSocket.OPEN) {
- websocket.send(JSON.stringify({ type: 'ping' }));
+ if (this.websocket.readyState === WebSocket.OPEN) {
+ this.websocket.send(JSON.stringify({ type: 'ping' }));
}
}, 30000);
}
@@ -56,8 +55,8 @@ class App extends React.Component {
if (this.pingInterval) {
clearInterval(this.pingInterval);
}
- if (this.state.ws) {
- this.state.ws.close();
+ if (this.websocket) {
+ this.websocket.close();
}
}
@@ -69,8 +68,8 @@ class App extends React.Component {
.then(data => {
this.setState({ counter: data.value });
// Broadcast update via WebSocket
- if (this.state.ws && this.state.ws.readyState === WebSocket.OPEN) {
- this.state.ws.send(JSON.stringify({ type: 'counter-update', value: data.value }));
+ if (this.websocket && this.websocket.readyState === WebSocket.OPEN) {
+ this.websocket.send(JSON.stringify({ type: 'counter-update', value: data.value }));
}
})
.catch(error => console.error('Error incrementing counter:', error));
diff --git a/src/index.js b/src/index.js
index c760e59..383b038 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,4 +3,13 @@ import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render();
\ No newline at end of file
+
+const renderApp = () => {
+ root.render();
+};
+
+renderApp();
+
+if (module.hot) {
+ module.hot.accept('./App', renderApp);
+}
\ No newline at end of file