mirror of
https://github.com/siteboon/claudecodeui.git
synced 2026-02-01 06:17:32 +00:00
fix: remove unnecessary websocket.js file and replace its usage directly in WebSocketContext
This commit is contained in:
@@ -1,7 +1,7 @@
|
|||||||
import React, { createContext, useContext, useEffect, useState, useCallback } from 'react';
|
import React, { createContext, useContext, useEffect, useState, useCallback } from 'react';
|
||||||
import { api } from '../utils/api';
|
import { api } from '../utils/api';
|
||||||
import { useAuth } from './AuthContext';
|
import { useAuth } from './AuthContext';
|
||||||
import { useWebSocketContext } from './WebSocketContext';
|
import { useWebSocket } from './WebSocketContext';
|
||||||
|
|
||||||
const TaskMasterContext = createContext({
|
const TaskMasterContext = createContext({
|
||||||
// TaskMaster project state
|
// TaskMaster project state
|
||||||
@@ -42,7 +42,7 @@ export const useTaskMaster = () => {
|
|||||||
|
|
||||||
export const TaskMasterProvider = ({ children }) => {
|
export const TaskMasterProvider = ({ children }) => {
|
||||||
// Get WebSocket messages from shared context to avoid duplicate connections
|
// Get WebSocket messages from shared context to avoid duplicate connections
|
||||||
const { messages } = useWebSocketContext();
|
const { messages } = useWebSocket();
|
||||||
|
|
||||||
// Authentication context
|
// Authentication context
|
||||||
const { user, token, isLoading: authLoading } = useAuth();
|
const { user, token, isLoading: authLoading } = useAuth();
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
import React, { createContext, useContext } from 'react';
|
import { createContext, useContext, useEffect, useRef, useState } from 'react';
|
||||||
import { useWebSocket } from '../utils/websocket';
|
|
||||||
|
|
||||||
const WebSocketContext = createContext({
|
const WebSocketContext = createContext({
|
||||||
ws: null,
|
ws: null,
|
||||||
@@ -8,16 +7,109 @@ const WebSocketContext = createContext({
|
|||||||
isConnected: false
|
isConnected: false
|
||||||
});
|
});
|
||||||
|
|
||||||
export const useWebSocketContext = () => {
|
export const useWebSocket = () => {
|
||||||
const context = useContext(WebSocketContext);
|
const context = useContext(WebSocketContext);
|
||||||
if (!context) {
|
if (!context) {
|
||||||
throw new Error('useWebSocketContext must be used within a WebSocketProvider');
|
throw new Error('useWebSocket must be used within a WebSocketProvider');
|
||||||
}
|
}
|
||||||
return context;
|
return context;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const useWebSocketProviderState = () => {
|
||||||
|
const [ws, setWs] = useState(null);
|
||||||
|
const [messages, setMessages] = useState([]);
|
||||||
|
const [isConnected, setIsConnected] = useState(false);
|
||||||
|
const reconnectTimeoutRef = useRef(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
connect();
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
if (reconnectTimeoutRef.current) {
|
||||||
|
clearTimeout(reconnectTimeoutRef.current);
|
||||||
|
}
|
||||||
|
if (ws) {
|
||||||
|
ws.close();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}, []); // Keep dependency array but add proper cleanup
|
||||||
|
|
||||||
|
const connect = async () => {
|
||||||
|
try {
|
||||||
|
const isPlatform = import.meta.env.VITE_IS_PLATFORM === 'true';
|
||||||
|
|
||||||
|
// Construct WebSocket URL
|
||||||
|
let wsUrl;
|
||||||
|
|
||||||
|
if (isPlatform) {
|
||||||
|
// Platform mode: Use same domain as the page (goes through proxy)
|
||||||
|
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
||||||
|
wsUrl = `${protocol}//${window.location.host}/ws`;
|
||||||
|
} else {
|
||||||
|
// OSS mode: Connect to same host:port that served the page
|
||||||
|
const token = localStorage.getItem('auth-token');
|
||||||
|
if (!token) {
|
||||||
|
console.warn('No authentication token found for WebSocket connection');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
||||||
|
wsUrl = `${protocol}//${window.location.host}/ws?token=${encodeURIComponent(token)}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
const websocket = new WebSocket(wsUrl);
|
||||||
|
|
||||||
|
websocket.onopen = () => {
|
||||||
|
setIsConnected(true);
|
||||||
|
setWs(websocket);
|
||||||
|
};
|
||||||
|
|
||||||
|
websocket.onmessage = (event) => {
|
||||||
|
try {
|
||||||
|
const data = JSON.parse(event.data);
|
||||||
|
setMessages(prev => [...prev, data]);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error parsing WebSocket message:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
websocket.onclose = () => {
|
||||||
|
setIsConnected(false);
|
||||||
|
setWs(null);
|
||||||
|
|
||||||
|
// Attempt to reconnect after 3 seconds
|
||||||
|
reconnectTimeoutRef.current = setTimeout(() => {
|
||||||
|
connect();
|
||||||
|
}, 3000);
|
||||||
|
};
|
||||||
|
|
||||||
|
websocket.onerror = (error) => {
|
||||||
|
console.error('WebSocket error:', error);
|
||||||
|
};
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error creating WebSocket connection:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const sendMessage = (message) => {
|
||||||
|
if (ws && isConnected) {
|
||||||
|
ws.send(JSON.stringify(message));
|
||||||
|
} else {
|
||||||
|
console.warn('WebSocket not connected');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
ws,
|
||||||
|
sendMessage,
|
||||||
|
messages,
|
||||||
|
isConnected
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
export const WebSocketProvider = ({ children }) => {
|
export const WebSocketProvider = ({ children }) => {
|
||||||
const webSocketData = useWebSocket();
|
const webSocketData = useWebSocketProviderState();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<WebSocketContext.Provider value={webSocketData}>
|
<WebSocketContext.Provider value={webSocketData}>
|
||||||
|
|||||||
@@ -1,94 +0,0 @@
|
|||||||
import { useState, useEffect, useRef } from 'react';
|
|
||||||
|
|
||||||
export function useWebSocket() {
|
|
||||||
const [ws, setWs] = useState(null);
|
|
||||||
const [messages, setMessages] = useState([]);
|
|
||||||
const [isConnected, setIsConnected] = useState(false);
|
|
||||||
const reconnectTimeoutRef = useRef(null);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
connect();
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
if (reconnectTimeoutRef.current) {
|
|
||||||
clearTimeout(reconnectTimeoutRef.current);
|
|
||||||
}
|
|
||||||
if (ws) {
|
|
||||||
ws.close();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}, []); // Keep dependency array but add proper cleanup
|
|
||||||
|
|
||||||
const connect = async () => {
|
|
||||||
try {
|
|
||||||
const isPlatform = import.meta.env.VITE_IS_PLATFORM === 'true';
|
|
||||||
|
|
||||||
// Construct WebSocket URL
|
|
||||||
let wsUrl;
|
|
||||||
|
|
||||||
if (isPlatform) {
|
|
||||||
// Platform mode: Use same domain as the page (goes through proxy)
|
|
||||||
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
|
||||||
wsUrl = `${protocol}//${window.location.host}/ws`;
|
|
||||||
} else {
|
|
||||||
// OSS mode: Connect to same host:port that served the page
|
|
||||||
const token = localStorage.getItem('auth-token');
|
|
||||||
if (!token) {
|
|
||||||
console.warn('No authentication token found for WebSocket connection');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
|
||||||
wsUrl = `${protocol}//${window.location.host}/ws?token=${encodeURIComponent(token)}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
const websocket = new WebSocket(wsUrl);
|
|
||||||
|
|
||||||
websocket.onopen = () => {
|
|
||||||
setIsConnected(true);
|
|
||||||
setWs(websocket);
|
|
||||||
};
|
|
||||||
|
|
||||||
websocket.onmessage = (event) => {
|
|
||||||
try {
|
|
||||||
const data = JSON.parse(event.data);
|
|
||||||
setMessages(prev => [...prev, data]);
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error parsing WebSocket message:', error);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
websocket.onclose = () => {
|
|
||||||
setIsConnected(false);
|
|
||||||
setWs(null);
|
|
||||||
|
|
||||||
// Attempt to reconnect after 3 seconds
|
|
||||||
reconnectTimeoutRef.current = setTimeout(() => {
|
|
||||||
connect();
|
|
||||||
}, 3000);
|
|
||||||
};
|
|
||||||
|
|
||||||
websocket.onerror = (error) => {
|
|
||||||
console.error('WebSocket error:', error);
|
|
||||||
};
|
|
||||||
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error creating WebSocket connection:', error);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const sendMessage = (message) => {
|
|
||||||
if (ws && isConnected) {
|
|
||||||
ws.send(JSON.stringify(message));
|
|
||||||
} else {
|
|
||||||
console.warn('WebSocket not connected');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return {
|
|
||||||
ws,
|
|
||||||
sendMessage,
|
|
||||||
messages,
|
|
||||||
isConnected
|
|
||||||
};
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user