Websocket fail connection
Please do not duplicate your questions.
https://www.traccar.org/forums/topic/traccar-websockets-connection/
I need help for this situation
I hope this info helps you!
El problema que estás experimentando con WebSocket puede ser debido a varias razones, como el uso de diferentes hosts (localhost para tu aplicación React y demo4.traccar.org para el WebSocket) y la posible falta de configuración de CORS en el servidor WebSocket.
Para abordar este problema, hay algunas soluciones posibles:
1. Usar un Proxy en el Servidor de Desarrollo
Configura un proxy en tu servidor de desarrollo para evitar problemas de CORS. Si estás usando create-react-app, puedes configurar un proxy en el archivo package.json:
{
"proxy": "http://demo4.traccar.org"
}Esto redirigirá todas las solicitudes desde tu localhost al servidor de Traccar, eliminando los problemas de CORS.
2. Usar HTTPS
Asegúrate de usar wss:// en lugar de ws:// si tu aplicación se sirve a través de HTTPS:
const wsEndpoint = 'wss://demo4.traccar.org/api/socket';3. Configuración de CORS en el Servidor
Si tienes acceso al servidor, asegúrate de que los encabezados de CORS estén configurados correctamente para permitir conexiones desde tu dominio.
4. Revisar las Cookies de Sesión
Asegúrate de que las cookies de sesión se están enviando correctamente con la solicitud de WebSocket. Podrías necesitar enviar las cookies manualmente:
const ws = new WebSocket(wsEndpoint, [], {
headers: {
Cookie: document.cookie
}
});Ejemplo Completo
Aquí está un ejemplo completo que incluye el manejo de WebSocket y las consideraciones anteriores:
import React, { useEffect, useState } from 'react';
import { useGetAllPositionsQuery } from './api'; // Suponiendo que estás usando Redux para obtener posiciones
const wsEndpoint = 'wss://demo4.traccar.org/api/socket';
export default function Positions() {
const [positions, setPositions] = useState([]);
const { data, isLoading } = useGetAllPositionsQuery();
useEffect(() => {
if (data) {
setPositions(data);
}
const ws = new WebSocket(wsEndpoint);
ws.onopen = () => {
console.log('WebSocket connected');
};
ws.onmessage = (event) => {
const newPosition = JSON.parse(event.data);
setPositions((prevPositions) => [...prevPositions, newPosition]);
};
ws.onerror = (error) => {
console.error('WebSocket error:', error);
};
ws.onclose = () => {
console.log('WebSocket closed');
};
return () => ws.close();
}, [data]);
if (isLoading) {
return <div>Loading...</div>;
}
return (
<div>
<h1>Positions</h1>
<ul>
{positions.map((position, index) => (
<li key={index}>{position.id}</li>
))}
</ul>
</div>
);
}Conclusión
Si sigues teniendo problemas, verifica la consola del navegador para obtener mensajes de error específicos que puedan proporcionar más pistas sobre lo que está fallando. También puedes revisar la documentación de Traccar y los foros para ver si hay configuraciones específicas para habilitar CORS en el servidor de Traccar.
Thank you Urdanegui
I tried the solution of proxy but it didnot work also wss I started writing the code from start by get request for api/session?token but now it said
Access to XMLHttpRequest at 'https://demo4.server.org/api/session?token' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.but when I check cookies in browser I found JSESSIONID is stored
Hi I want to understand how to establish connection of websocket am doing a react project so am using localhost:3000 and the websocket api demo4.traccar.org/api/socket I know about cors if it is not allowed from server side I can't edit it so how can I overcome this problem. steps I take I create session so it can add cookie to browser then the code of web socket run and I think it detects the session cookie automatically. Please I need help