A simple websocket chat application

 

Here I have a simple websocket chat client built in ReactJs with which I'll try to start a conversation with the earlier example of tornado websocket server. 

Unfortunately, I ran out of my monkeylearn API quota as I had left my server unattended and making repeated API requests for ML analysis. Hard learning and I'll have to wait till next year to resume, unless I go for a paid membership :-)

Here is what happens when the client triggers:

• The ReactJs site makes an HTTP request to the Tornado server to upgrade to Websocket protocol
• If the server supports Websocket it replies back with the Upgrade header in response. (this is called establishing the handshake)

Take a look at below screenshot for the Upgrade request and response:

• Now, the ReactJS client switches protocol to websocket and starts sending messages and receives server responses. (illustrative screenshot below):

Here we go with the client example:

Screenshot

index.js Conversation.js

And in due course, I'll upload a multi-user and multi-room chat application. So long...

(Caveat: In the Conversation.js example, there is this kuldge which uses innerHTML to append older chat conversations, this is something which comes to grief on different browsers, with chrome being most lenient, and I do not surely recommend it. The better implementation of it may use adding dynamic React child components)