Chat Page - (WebSockets Example)


This page is a basic demonstration of using WebSockets to allow bi-directional server-client communication in real time.
Here, that means: when someone types a chat message, all others in the chat receive the message instantly, without waiting nor making additional server requests (polling).

This was also an experiment in using a Node.js based server. (This server is predominantly django on python.)

It further is an example using Vue.js for dynamic page elements.
The chat box uses Vue to display new messages, after receiving them via WebSocket communication.

To test it out on your own, you can e.g. open this page again in another tab.
Note: the chat is public, but anonymised.

Chat Box

Your name is: {{ your_friendly_name }}.
Number of other users: {{ num_other_users }}
  • You said: {{ message.user_friendly_name || 'Someone' }} said: {{ message.content }}
  • {{ participant }} (you)