Solve Signal R function
In the first three days, I worked on connecting SignalR to receive the progress count from the item API. Since connecting to SignalR was new to me, I initially faced several challenges. First, I struggled with determining the correct URL to send to SignalR for establishing the connection. Despite trying various URLs, I couldn’t connect successfully. Finally, I sought help from Mr. Peter, who provided me with the correct URL. However, even after using the correct URL, SignalR still showed an unsuccessful connection.
After debugging, researching, and consulting ChatGPT, I discovered the second issue: the HTTP transport type needed to be explicitly initialized. By default, SignalR uses WebSocket as the transport type, which didn’t work for this connection. Switching to long polling as the transport type resolved this issue, and the connection was established. However, a third problem soon arose.
While fetching the sync progress, I noticed it always got stuck at 120/240 and stopped. After reviewing the log reports, Mr. Peter explained that the syncing process needed to be completed before fetching all item data. Some items were stored and appeared in the database, while others located in stores did not appear in the MongoDB database. This mismatch caused errors. By creating a sync function, I was able to synchronize the items successfully and fetch progress without issues.
Next, I developed a function to cancel the sync progress. This function stops the sync process for an item that hasn’t finished syncing by calling the stop API and passing the GUID, which halts the sync automatically. However, I encountered another issue: the cancel button didn’t work as expected. Initially, I suspected the API, but debugging revealed that the function was rendered twice, causing the cancel function to be invoked twice. As a result, pressing cancel stopped one progress instance, but the other continued syncing. This behavior was due to the Next.js configuration, which caused the useEffect hook to render twice. After adjusting the Next.js configuration, all SignalR-related functions and sync item processes were finalized successfully.