Happychat: Add better messaging when there are connectivity issues

[mattwondra]

This combined with PR #12706 will fix issue #12183.

This PR adds a few Socket.IO lifecycle event dispatches that we can use to get more information on the status of a HC connection. This information is used to disable the text input and show a notice when certain connection issues are occurring, specifically:

• User tries to connect to HC but the server is not available
• User has an open connection and the HC server disconnects
• User has an open connection and their network goes down, causing a disconnect

For the last case, we may want to tweak the pingTimeout and pingInterval settings on the server. By default they are set to 60000ms and 25000ms respectively — which basically means it will take anywhere from 60–85s from a network connection failure until the user is notified of the failure. During this time the user may be firing off messages that will never reach the HE and won't show in their timeline, which is probably pretty frustrating.

To test

HC is down on connecting

Point Calypso at your local HC but don't bring the service up. Go to http://calypso.localhost:3000/me/chat. You should see a notice Connecting you with a Happiness Engineer… followed quickly by We're having trouble connecting to chat. Please bear with us while we try to reconnect…. During this whole time the chat message box should be disabled.

Starting the local HC service should make the notice go away and HC should behave as expected.

HC service goes down after connecting

Point Calypso at your local HC with the service up. Go to http://calypso.localhost:3000/me/chat. You should see a notice Connecting you with a Happiness Engineer… followed by the notice disappearing. Start chatting with an operator.

Kill the local HC service. In Calypso you should immediately see a notice We're having trouble connecting to chat. Please bear with us while we try to reconnect…. The chat message box should be disabled.

Starting the HC service again should bring the chat back to normal status.

User's internet connection goes away

Point Calypso to staging HC. Go to http://calypso.localhost:3000/me/chat. You should see a notice Connecting you with a Happiness Engineer… followed by the notice disappearing. Start chatting with an operator.

Turn off your wifi. Wait for up to 90s and you should see a notice We're having trouble connecting to chat. Please check your internet connection while we try to reconnect…. The chat message box should be disabled.

Turning wifi on again should bring the chat back to normal status.

[matticbot]

Test live: https://calypso.live/?branch=fix/happychat/better-connection-issue-messaging

[oandregal]

We could use a shared constant to communicate connectionStatus values between this and the reducer.

[mattwondra]

Thanks, this is on my to-do list before I move off the middleware cleanup tasks, but I didn't want to pollute existing PRs with that stuff.

[oandregal]

What are these constants for? Apart from HAPPYCHAT_CONNECTION_ERROR_PING_TIMEOUT I haven't seen them in use anywhere.

[mattwondra]

These come from the Socket.IO client library — search for calls to onClose( and the passed-in values are the possible reasons for the connection error.

I'll add a comment here to document this better.

[oandregal]

It's a much better experience!

The first two test cases worked as expected. The last one didn't work for me with a full local HC, but it did work when using staging HC.

I'm not familiar with the inner details of SocketIO, but my belief is that the reason why full local HC kept working is unrelated to this PR: SocketIO may be maintaining the connection between local calypso and local HC because both run under localhost or it is using a local protocol such as bonjour as a fallback mechanism.

[mattwondra]

SocketIO may be maintaining the connection between local calypso and local HC because both run under localhost

Yep, I believe this is the case. :)