Fixing the real-time connection could not be established problem in EPiServer Azure

I was setting up an EPiServer website in Azure the other day when I ran into an issue. Whenever I tried to access edit mode a pop up would show saying: "A real-time connection could not be established with the server. This may be caused by incorrect configuration. Please see the User interface section in the user guide for further information." It turns out that EPiServer is using websockets since one of the later version to communicate with the server when in Edit mode. Websockets are currently turned off by default in Azure WebApps, but it can be easily turned on. Just go to Settings → Application Settings and you’ll see the following screen:

Make sure to turn Web sockets on and everything should work fine again.