remove socket.io

Author: Toowise

client/src/components/AppHeader.js

@@ -15,14 +15,8 @@ import {
 import CIcon from '@coreui/icons-react'
 import PropTypes from 'prop-types'
 import { cilBell, cilMenu, cilSun, cilMoon, cilContrast } from '@coreui/icons'
-import io from 'socket.io-client'
 import { AppHeaderDropdown } from './header/index'
 
-const socket = io(VITE_SOCKET_URL, {
-  transports: ['websocket', 'polling'],
-  withCredentials: true,
-})
-
 const AppHeader = ({ admin = false }) => {
   const headerRef = useRef()
   const dispatch = useDispatch()
@@ -33,28 +27,45 @@ const AppHeader = ({ admin = false }) => {
   const [dropdownVisible, setDropdownVisible] = useState(false)
 
   useEffect(() => {
+    const socket = new WebSocket(VITE_SOCKET_URL.replace(/^http/, 'ws'))
+
     document.addEventListener('scroll', () => {
       headerRef.current &&
         headerRef.current.classList.toggle('shadow-sm', document.documentElement.scrollTop > 0)
     })
 
-    // Listen for real-time shipment updates
-    socket.on('shipmentUpdate', (update) => {
-      if (update.critical) {
-        setNotifications((prev) => [
-          {
-            ...update,
-            message: update.message,
-          },
-          ...prev,
-        ])
-        setUnreadCount((prev) => prev + 1)
+    socket.addEventListener('open', () => {
+      console.log('WebSocket connection opened')
+    })
+
+    socket.addEventListener('message', (event) => {
+      try {
+        const message = JSON.parse(event.data)
+
+        if (message.type === 'shipmentUpdate') {
+          const update = message.data
+          setNotifications((prev) => [
+            {
+              ...update,
+              message: `Shipment ${update.trackingNumber} updated to ${update.status}`,
+            },
+            ...prev,
+          ])
+          setUnreadCount((prev) => prev + 1)
+        }
+      } catch (error) {
+        console.error('WebSocket message error:', error)
       }
     })
 
-    return () => socket.off('shipmentUpdate')
-  }, [])
+    socket.addEventListener('close', () => {
+      console.log('WebSocket connection closed')
+    })
 
+    return () => {
+      socket.close()
+    }
+  }, [])
   const toggleDropdown = () => {
     setDropdownVisible(!dropdownVisible)
     setUnreadCount(0) //

client/src/views/dashboard/ShipmentInfo/ShipmentInfo.js

@@ -1,7 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
 import { motion, AnimatePresence } from 'framer-motion'
-import { io } from 'socket.io-client'
 import './ShipmentInfo.scss'
 import packageimg from './../../../assets/brand/package.jpg'
 
@@ -10,32 +9,58 @@ const ShipmentInfo = ({ data }) => {
   const [showDetails, setShowDetails] = useState(false)
 
   useEffect(() => {
-    const socket = io('https://backend-core2.axleshift.com', {
-      transports: ['websocket', 'polling'],
-    })
-    socket.emit('joinRoom', data.trackingNumber)
+    const socket = new WebSocket('wss://backend-core2.axleshift.com')
 
-    socket.on('shipmentLocationUpdate', (update) => {
-      setShipmentData((prev) => ({ ...prev, ...update }))
+    socket.addEventListener('open', () => {
+      // Join tracking when socket opens
+      socket.send(JSON.stringify({
+        type: 'joinTracking',
+        trackingNumber: data.trackingNumber,
+      }))
     })
 
-    socket.on('statusChanged', ({ newStatus }) => {
-      setShipmentData((prev) => ({
-        ...prev,
-        status: newStatus,
-        events: [
-          ...prev.events,
-          {
+    socket.addEventListener('message', (event) => {
+      try {
+        const message = JSON.parse(event.data)
+
+        if (message.type === 'shipmentLocationUpdate') {
+          const update = message.data
+          setShipmentData((prev) => ({
+            ...prev,
+            ...update,
+          }))
+        }
+
+        if (message.type === 'statusChanged') {
+          const { newStatus } = message.data
+          setShipmentData((prev) => ({
+            ...prev,
             status: newStatus,
-            date: new Date().toISOString(),
-            time: new Date().toLocaleTimeString(),
-            location: `${prev.latitude}, ${prev.longitude}`,
-          },
-        ],
-      }))
+            events: [
+              ...prev.events,
+              {
+                status: newStatus,
+                date: new Date().toISOString(),
+                time: new Date().toLocaleTimeString(),
+                location: `${prev.latitude}, ${prev.longitude}`,
+              },
+            ],
+          }))
+        }
+      } catch (error) {
+        console.error('WebSocket message handling error:', error)
+      }
     })
 
-    return () => socket.disconnect()
+    return () => {
+      if (socket.readyState === WebSocket.OPEN) {
+        socket.send(JSON.stringify({
+          type: 'leaveTracking',
+          trackingNumber: data.trackingNumber,
+        }))
+      }
+      socket.close()
+    }
   }, [data.trackingNumber])
   return (
     <div className="shipment-container">

client/src/views/dashboard/Track/TrackingForm.js

@@ -1,13 +1,13 @@
 import React, { useState, useEffect, useRef } from 'react'
 import PropTypes from 'prop-types'
 import axios from '../../../api/axios.js'
-import io from 'socket.io-client'
 import 'leaflet/dist/leaflet.css'
 import ShipmentInfo from '../ShipmentInfo/ShipmentInfo.js'
 import { GoogleMap, useJsApiLoader, Marker, DirectionsRenderer } from '@react-google-maps/api'
 import { VITE_APP_GOOGLE_MAP, VITE_SOCKET_URL } from '../../../config.js'
 
 const GOOGLE_MAPS_LIBRARIES = ['places']
+
 const MapCenterUpdater = ({ lat, lng, map }) => {
   useEffect(() => {
     if (map && lat && lng) {
@@ -32,40 +32,57 @@ const TrackingForm = () => {
   const [socket, setSocket] = useState(null)
   const markerRef = useRef(null)
   const [directions, setDirections] = useState(null)
-  const isSocketInitialized = useRef(false)
   const { isLoaded } = useJsApiLoader({
     googleMapsApiKey: VITE_APP_GOOGLE_MAP,
     libraries: GOOGLE_MAPS_LIBRARIES,
   })
 
   useEffect(() => {
-    const newSocket = io(VITE_SOCKET_URL, { autoConnect: false })
-    setSocket(newSocket)
+    const ws = new WebSocket(VITE_SOCKET_URL)
+    setSocket(ws)
+
     return () => {
-      newSocket.disconnect()
+      ws.close()
     }
   }, [])
 
   useEffect(() => {
-    if (!trackingNumber || !socket || isSocketInitialized.current) return
-
-    socket.connect()
-    socket.emit('joinTracking', trackingNumber)
-    isSocketInitialized.current = true
-
-    socket.on('shipmentLocationUpdate', (updatedShipment) => {
-      setShipmentData((prevData) => ({
-        ...prevData,
-        latitude: updatedShipment.latitude,
-        longitude: updatedShipment.longitude,
-        updated_at: new Date(updatedShipment.updated_at),
-      }))
+    if (!socket || socket.readyState !== WebSocket.OPEN) return
+
+    const joinTracking = () => {
+      const joinMessage = JSON.stringify({
+        action: 'joinTracking',
+        trackingNumber,
+      })
+      socket.send(joinMessage)
+    }
+
+    socket.addEventListener('open', joinTracking)
+
+    socket.addEventListener('message', (event) => {
+      const message = JSON.parse(event.data)
+
+      if (message.type === 'shipmentLocationUpdate') {
+        const updatedShipment = message.data
+        setShipmentData((prevData) => ({
+          ...prevData,
+          latitude: updatedShipment.latitude,
+          longitude: updatedShipment.longitude,
+          updated_at: new Date(updatedShipment.updated_at),
+        }))
+      }
     })
 
     return () => {
-      socket.emit('leaveTracking', trackingNumber)
-      socket.off('shipmentLocationUpdate')
-      isSocketInitialized.current = false
+      if (socket.readyState === WebSocket.OPEN) {
+        const leaveMessage = JSON.stringify({
+          action: 'leaveTracking',
+          trackingNumber,
+        })
+        socket.send(leaveMessage)
+      }
+      socket.removeEventListener('open', joinTracking)
+      socket.removeEventListener('message', () => {})
     }
   }, [trackingNumber, socket])
 

client/src/views/driver/drivermanagement.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState, useRef } from 'react'
 import {
   CCard,
   CCardBody,
@@ -12,16 +12,16 @@ import {
   CTableDataCell,
   CSpinner,
 } from '@coreui/react'
-import io from 'socket.io-client'
 
 const DriverManagement = () => {
   const [shipments, setShipments] = useState([])
   const [loading, setLoading] = useState(true)
+  const socketRef = useRef(null)
 
   useEffect(() => {
     const fetchShipments = async () => {
       try {
-        const res = await fetch('http://localhost:5052/driver/shipments')
+        const res = await fetch('https://backend-core2.axleshift.com/driver/shipments')
         const data = await res.json()
         setShipments(data)
       } catch (error) {
@@ -33,31 +33,46 @@ const DriverManagement = () => {
 
     fetchShipments()
 
-    const socket = io('http://localhost:5052', {
-      transports: ['websocket', 'polling'],
-    })
+    // Connect to WebSocket
+    socketRef.current = new WebSocket('wss://backend-core2.axleshift.com')
 
-    // Listen for shipment location updates
-    socket.on('shipmentLocationUpdate', (data) => {
-      // Update the state with the new location data
-      setShipments((prevShipments) =>
-        prevShipments.map((shipment) =>
-          shipment.trackingNumber === data.trackingNumber
-            ? {
-                ...shipment,
-                latitude: data.latitude,
-                longitude: data.longitude,
-                updated_at: data.updated_at,
-                driverUsername: data.driverUsername,
-              }
-            : shipment,
-        ),
-      )
-    })
+    socketRef.current.onopen = () => {
+      console.log('WebSocket connected (DriverManagement)')
+    }
+
+    socketRef.current.onmessage = (event) => {
+      const message = JSON.parse(event.data)
+
+      if (message.type === 'shipmentLocationUpdate') {
+        const { trackingNumber, latitude, longitude, updated_at, driverUsername } = message.data
+
+        setShipments((prevShipments) =>
+          prevShipments.map((shipment) =>
+            shipment.trackingNumber === trackingNumber
+              ? {
+                  ...shipment,
+                  latitude,
+                  longitude,
+                  updated_at,
+                  driverUsername,
+                }
+              : shipment
+          )
+        )
+      }
+    }
+
+    socketRef.current.onerror = (error) => {
+      console.error('WebSocket error:', error)
+    }
+
+    socketRef.current.onclose = () => {
+      console.log('WebSocket disconnected')
+    }
 
-    // Cleanup the socket connection when the component unmounts
+    // Cleanup
     return () => {
-      socket.disconnect()
+      socketRef.current?.close()
     }
   }, [])
 
@@ -66,7 +81,7 @@ const DriverManagement = () => {
       <CCol>
         <CCard className="mb-4 shadow-sm">
           <CCardBody>
-            <h4 className="mb-3">Active Shipments </h4>
+            <h4 className="mb-3">Active Shipments</h4>
             {loading ? (
               <CSpinner color="primary" />
             ) : (