Web Applications

Learning Centre
Bevry DocPad GitHub
Search…
Welcome
Install Node.js
Hands on with Node.js
Web Applications
Building a Chat Web Application
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 Primus and ws both by Arnout Kazemier.
Primus is a wrapper library over many different WebSockets 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 several dodgy workarounds.
We can install Primus for our project like so:
1
npm init  # setup our project
2
npm install --save express  # install express, which we will attach Primus to
3
npm install --save primus  # install Primus
4
npm install --save ws  # the WebSockets library we will sue with Primus
Copied!
Server to Browser Relay
The most basic example of this is the following, which will allow the server to broadcast to all clients, while receiving responses from clients:
socket-server.js
socket-client.html
1
'use strict'
2
​
3
// Requires
4
const express = require('express')
5
const Primus = require('primus')
6
const pathUtil = require('path')
7
​
8
// Application
9
const app = require('express')()
10
const server = require('http').createServer(app)
11
const primus = new Primus(server, { transformer: 'websockets' })
12
​
13
// Middlewares
14
app.get('/', function (req, res) {
15
	require('fs').createReadStream(pathUtil.join(__dirname, 'socket-client.html')).pipe(res)
16
})
17
app.use(function (req, res) {
18
	res.status(404).send('404 Not Found. 🙁 \n')
19
})
20
​
21
// Socket
22
primus.on('connection', function (spark) {
23
	console.log('connection has the following headers', spark.headers)
24
	console.log('connection was made from', spark.address)
25
	console.log('connection id', spark.id)
26
​
27
	// Receive messages
28
	spark.on('data', function (message) {
29
		console.log('connection', spark.id, 'sends', message.toString())
30
	})
31
​
32
	// Send messages
33
	process.stdin.on('data', function (message) {
34
		spark.write('The server has spoken: ' + message.toString())
35
	})
36
​
37
	// Send an initial hello
38
	spark.write('Hello user. I am the server communicating to you.')
39
})
40
​
41
// Listen
42
server.listen(8080)
Copied!
1
<!DOCTYPE html>
2
<html>
3
​
4
<head>
5
	<title>My Web App</title>
6
</head>
7
​
8
<body>
9
	<!-- Scripts -->
10
	<script src="/primus/primus.js"></script>
11
	<script>
12
		// Tell primus to create a new connect to the current domain/port/protocol
13
		var primus = new Primus()
14
​
15
		// Ask for a response if we receive data
16
		primus.on('data', function (message) {
17
			alert(message)
18
			var response = prompt('What would you like to say?')
19
			if (response) {
20
				primus.write(response)
21
				alert('Sent')
22
			}
23
		})
24
	</script>
25
	Hello.
26
</body>
27
​
28
</html>
Copied!
Test it: http://localhost:8080/​
Browser to Browser Broadcasting
A more useful example of this, is your basic chat app, which allows clients to broadcast to other clients:
chat-server.js
chat-client.html
1
'use strict'
2
​
3
// Requires
4
const express = require('express')
5
const Primus = require('primus')
6
const pathUtil = require('path')
7
​
8
// Application
9
const app = require('express')()
10
const server = require('http').createServer(app)
11
const primus = new Primus(server, { transformer: 'websockets' })
12
​
13
// Middlewares
14
app.get('/', function (req, res) {
15
	require('fs').createReadStream(pathUtil.join(__dirname, 'chat-client.html')).pipe(res)
16
})
17
app.use(function (req, res) {
18
	res.status(404).send('404 Not Found. 🙁 \n')
19
})
20
​
21
// Socket
22
primus.on('connection', function (spark) {
23
	console.log('connection has the following headers', spark.headers)
24
	console.log('connection was made from', spark.address)
25
	console.log('connection id', spark.id)
26
​
27
	// Receive messages
28
	spark.on('data', function (message) {
29
		// Broadcast them back to everyone
30
		primus.write('user ' + spark.id + ' sends ' + message.toString())
31
	})
32
​
33
	// Send an initial hello
34
	spark.write('Hello user ' + spark.id + '. I am the server communicating to you.')
35
})
36
​
37
// Listen
38
server.listen(8080)
Copied!
1
<!DOCTYPE html>
2
<html>
3
​
4
<head>
5
	<title>My Web App</title>
6
	<style>
7
		.messages {
8
			max-height: 500px;
9
			border: 1px solid gray;
10
			overflow: auto;
11
		}
12
		.messageInput {
13
			width: 100%;
14
			padding: 1em;
15
		}
16
	</style>
17
</head>
18
​
19
<body>
20
	<!-- App -->
21
	<div class="app">
22
		<ul class="messages"></ul>
23
		<input type="text" disabled class="messageInput" placeholder="Enter your message here" />
24
	</div>
25
​
26
	<!-- Scripts -->
27
	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
28
	<script src="/primus/primus.js"></script>
29
	<script>
30
		// Tell primus to create a new connect to the current domain/port/protocol
31
		var primus = new Primus()
32
​
33
		// Ready
34
		$(function () {
35
			// Fetch
36
			var $app = $('.app')
37
			var $messages = $app.find('.messages')
38
			var $messageInput = $app.find('.messageInput')
39
​
40
			// Enable input once connection is open
41
			primus.on('open', function () {
42
				$messageInput.removeAttr('disabled').focus()
43
			})
44
​
45
			// Receive message
46
			primus.on('data', function (message) {
47
				$message = $('<li>', {
48
					'class': 'message',
49
					text: message
50
				})
51
				$messages.append($message)
52
			})
53
​
54
			// Send message
55
			$messageInput.on('keypress', function (event) {
56
				if (event.keyCode === 13) {  // enter
57
					var message = $messageInput.val().trim()
58
					primus.write(message)
59
					$messageInput.val('')  // clear input
60
				}
61
			})
62
		})
63
	</script>
64
</body>
65
​
66
</html>
Copied!
Test it: http://localhost:8080/​
Where can this go?
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
Experiment with pre-processors - DocPad could help with this
Messages
Relative times
Markdown support
Webkit notifications
Hands on with Node.js - Previous
Advanced Servers
Next - Hands on with Node.js
Appendix
Last modified 2yr ago
Copy link
Contents
Building a Chat Web Application
Server to Browser Relay
Browser to Browser Broadcasting
Where can this go?