Web Applications
Last updated
Was this helpful?
Last updated
Was this helpful?
It's now time to move onto building a proper web application. Rather than the simple todo application you would build in other systems, for node the standard is a chat application (which is a lot more exciting!).
To do this, we will use and both by .
Primus is a wrapper library over many different libraries. WebSockets is a technology that allows browser clients to communicate with servers. Until WebSockets became a thing in 2011, such functionality was achieved via .
We can install Primus for our project like so:
The most basic example of this is the following, which will allow the server to broadcast to all clients, while receiving responses from clients:
A more useful example of this, is your basic chat app, which allows clients to broadcast to other clients:
It is now your turn to have a go and mash up your own solution. To help you get started, here are a bunch of ideas on how you can extend the chat application:
Chat Rooms
Add support for two chat rooms
Add support for unlimited chat rooms
Allow users to change the names of the chat rooms
Users
Give each user a randomly generated name - e.g. User ${Math.random()}
Next to each message, show the user who sent it - e.g.${user.name} says: ${message.text}
Show user connection and disconnection events as messages in the chat - e.g. ${user.name} joined the chat"
Remember the user's details if they leave the page and come back - e.g. localstorage or sessions
Allow the user to change their name
Show user name change events as messages in the chat - e.g.${oldName} changed their name to ${newName}
Give each user their own randomly selected color - e.g. style="color: hsl(50,50,50);"
Create a sidebar that lists all active members in the chat room
Allow users to specify their email
If a user has an email specified, display their avatar next to their username in the message listing
When a user changes their details, automatically update all prior mentions of their details
Abstractions
Messages
Relative times
Markdown support
Webkit notifications
Test it:
Test it:
Experiment with pre-processors - could help with this