Handling Offline Message Responses in SUSI Web Chat
Previously, the SUSI Web Chat stopped working when there was no Internet connectivity. The application’s overall state was disturbed as one would see the loading message gif and the users were left to wonder on how to proceed. To handle this situation, we required notifying the User in the offline mode, with a message, that there is no Internet Connectivity.
This following image demonstrates the previous state where the application hung.
This image shows how this state was handled currently. One can test this out on http://chat.susi.ai by disconnecting and sending a message to SUSI and then connecting back to the Internet.
To achieve this, one needed to handle the offline and online events of the browser. The following steps can be followed to achieve this.
- We make use of the following eventListener functions to know whether the user is connected to the Internet.
// handles the Offlines event window.addEventListener('offline', handleOffline.bind(this)); // handles the Online event window.addEventListener('online', handleOnline.bind(this));
- We then set a global offline message which is modified on the connections switching from online to an offline state. They are handled by the following functions.
let offlineMessage = null; function handleOffline() { offlineMessage = 'Sorry, cannot answer that now. I have no net connectivity'; } function handleOnline() { offlineMessage = null; }
- We then handle the action createSUSIMessage() in API.actions.js and send the AJAX request which we are making according to the offline/online state. This enables us to send the correct message response to the User even in the offline state and not letting the Application state crash.
// So if the offlineMessage variable is not null we call the AJAX if(!offlineMessage){ // handle AJAX } else { // we create a message saying there is no Internet connectivity. }
- The messages on refreshing back restore back to the original state as these are not being stored in the server. Hence the User is able to see the correct History, i.e., only those messages which were sent to the server and successfully responded to by SUSI.
Resources
- Navigator Online API Documentation https://developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/onLine
- Online and offline events by Mozilla