I am trying to implement socket.io in my react project, on development everything works perfectly fine, but on the production I am getting getting errors when trying to connect from the client side WebSocket error
server-side: server.js:
const server = createServer(app);const io = new Server(server, { cors: { origin: "*", }, transports: ['websocket']});app.locals.io = io;const { addingOnlineUser, removeUserOnDisconnect } = require('./socket.io/listeners');io.on('connection', (socket) => { console.log("New connection", socket.id); // Listeners // Handling Online Users socket.on("addingOnlineUser", (data) => { const onlineUsersData = addingOnlineUser(data); io.emit('onlineUsersListener', JSON.stringify({ updatedOnlineUsers: onlineUsersData.onlineUsers, updatedUser: onlineUsersData.updatedUser, isUserOnline: true })); }); socket.on('disconnect', () => { const onlineUsersData = removeUserOnDisconnect(socket.id) io.emit('onlineUsersListener', JSON.stringify({ updatedOnlineUsers: onlineUsersData.onlineUsers, updatedUser: onlineUsersData.updatedUser, isUserOnline: false })); });});server.listen(3000, () => console.log('Server started on port 3000'));
client-side: socketio.js
export const socket = io("https://oldziej.pl", { autoConnect: false, transports: ['websocket']});
SocketIoContext.js:
useEffect(() => { const connectToServer = () => { setIsServerConnected(true); } const disconnectFromServer = () => { setIsServerConnected(false); } socket.on('connect', connectToServer); socket.on('disconnect', disconnectFromServer); socket.on('connect_error', (err) => { console.error('Socket connection error:', err); }); return () => { socket.off('connect', connectToServer); socket.off('disconnect', disconnectFromServer); }; }, []);
I am trying to change the apache2 configuration to accept the WebSocket traffic but with no success
<VirtualHost _default_:443> ServerName oldziej.pl ServerAlias www.oldziej.pl DocumentRoot /var/www/oldziej.pl/frontend/dist SSLEngine on SSLCertificateFile /home/bbkubek/oldziej.pl-ssl/oldziej.pl.certificate.pem SSLCertificateKeyFile /home/bbkubek/oldziej.pl-ssl/oldziej.pl.key<Directory /var/www/oldziej.pl/frontend/dist> Options FollowSymLinks AllowOverride All Require all granted Options -MultiViews RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^ index.html [QSA,L] </Directory> RewriteCond %{HTTP:Upgrade} =websocket [NC] RewriteRule /(.*) ws://localhost:3000/$1 [P,L] RewriteCond %{HTTPS} off RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301] ProxyPreserveHost On ProxyPass / http://localhost:3000/ ProxyPassReverse / http://localhost:3000/<Directory /var/www/oldziej.pl/backend> AllowOverride All</Directory> ErrorLog ${APACHE_LOG_DIR}/error.log CustomLog ${APACHE_LOG_DIR}/access.log combined</VirtualHost>