SockJS
SockJS is a Javascript library that provides a WebSocket-like object, allows you to create real-time, low-latency, full duplex and cross-domain communication. SockJS tries to use WebSocket in the background if the browser supports so the syntax is very similar to WebSocket object.
This post demonstrate a simple chat example using SockJS with NodeJS server. For other kinds of server, you can find it on the SockJS Github page https://github.com/sockjs.
SockJS include 2 parts, client-side SockJS and server-side SockJS. You need both for your application to run properly.
Server-side SockJS
The SockJS server will listen for all connection on port 9999 (you can change to whatever you want). Every time a client send a chat message to the server, it will broadcast to all other clients.
Create a new folder sockjs-server
for your SockJS server. Create a file name
server.js
. First, you need to load all the required dependencies. Add this to
your server.js
file.
// Required packages
var http = require('http');
var sockjs = require('sockjs');
You also need an object to hold a list of all connected clients
// Clients list
var clients = {};
This function is used to broadcast message to all clients
// Broadcast to all clients
function broadcast(message){
// iterate through each client in clients object
for (var client in clients){
// send the message to that client
clients[client].write(JSON.stringify(message));
}
}
Create a sockjs server like this
// create sockjs server
var echo = sockjs.createServer();
// on new connection event
echo.on('connection', function(conn) {
// add this client to clients object
clients[conn.id] = conn;
// on receive new data from client event
conn.on('data', function(message) {
console.log(message);
broadcast(JSON.parse(message));
});
// on connection close event
conn.on('close', function() {
delete clients[conn.id];
});
});
Create an http server and integrate sockjs inside that, listening on port 9999.
The client will need to connect to http://localhost:9999/echo
(as specifiec in
the prefix
configuration).
// Create an http server
var server = http.createServer();
// Integrate SockJS and listen on /echo
echo.installHandlers(server, {prefix:'/echo'});
// Start server
server.listen(9999, '0.0.0.0');
You can download the file server.js
from this
link.
Open Terminal, change to sockjs-server
folder and issue these commands to
run the server
$ cd sockjs-server
$ npm install sockjs
$ node server.js
SockJS v0.3.9 bound to "/echo"
Client-side SockJS
Create another folder sockjs-client
for client-side chat application. Make a
new file index.html with the content like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Sock chat</title>
</head>
<body>
<textarea id="chat-content" style="width:500px;height:300px"></textarea><br/>
<input type="text" id="username" placeholder="Choose username"/>
<input type="text" id="message" placeholder="Enter chat message"/>
<input type="button" value="Send" onclick="sendMessage()"/>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://cdn.sockjs.org/sockjs-0.3.min.js"></script>
<script src="index.js" ></script>
</body>
</html>
Create another index.js
file for the JS code. First, you need to create a
connection to http://localhost:9999/echo
.
// Create a connection to http://localhost:9999/echo
var sock = new SockJS('http://localhost:9999/echo');
// Open the connection
sock.onopen = function() {
console.log('open');
};
// On connection close
sock.onclose = function() {
console.log('close');
};
When receive message from the server, show it in the textarea
// On receive message from server
sock.onmessage = function(e) {
// Get the content
var content = JSON.parse(e.data);
// Append the text to text area (using jQuery)
$('#chat-content').val(function(i, text){
return text + 'User ' + content.username + ': ' + content.message + '\n';
});
};
This function is for handling Send button click event
// Function for sending the message to server
function sendMessage(){
// Get the content from the textbox
var message = $('#message').val();
var username = $('#username').val();
// The object to send
var send = {
message: message,
username: username
};
// Send it now
sock.send(JSON.stringify(send));
}
These are the link for index.html and index.js.
To run the chat application, simply open index.html
file in 2 browser windows,
enter the username, chat message and then click Send button.