So recently with glacialflame we toyed with the idea of adding a multiplayer element to the game.
There were a few options available to us but we opted to stick with new developments and try out html5 websockets.
Brief lowdown: http://en.wikipedia.org/wiki/WebSockets
Even though html5 websockets are still new and recently have had a few bugs attached (http://hacks.mozilla.org/2010/12/websockets-disabled-in-firefox-4/), in the long run it will be a viable option for multiplayer browser based games.
Anyway on with the basics:
Client
Lets start with the client side stuff, i’ve written up a basic sample page which demonstrates all of the basics of websockets.
<html>
<head>
<script type="text/javascript">
var websocket;
function onLoad()
{
websocket = new WebSocket('ws://localhost:1234');
websocket.onopen = function(){ onOpen() };
websocket.onclose = function(){ onClose() };
websocket.onmessage = function(input){ onMessage(input) };
websocket.onerror = function(input){ onError(input); };
}
// Event Handlers -------------------------
function onOpen()
{
output("Connected");
}
function onClose()
{
output("Disconnected");
}
function onMessage(input)
{
output('Recieved: ' + input.data);
}
function onError(err)
{
output('Error:' + err.data);
}
// Send Msg -----------------------
function wsSend()
{
var input = document.getElementById('input');
var msg = input.value;
input.value = ''; // Clear Text Box
output("SENT: " + msg);
websocket.send(msg);
}
// Output -----------------------
function output(message)
{
var output = document.getElementById("output");
output.value += (message + "n");
output.scrollTop = output.scrollHeight;
}
</script>
</head>
<body onload="onLoad();">
<h2>Input</h2>
<input type="text" id="input">
<input type="button" value="Send" onclick="wsSend();">
<h2>Output</h2>
<textarea id="output"></textarea>
</body>
</html>
The main things to be noted from the above code is firstly the creation of the websocket,
websocket = new WebSocket('ws://localhost:1234');
Then functions are assigned to handle the different events that can happen,
websocket.onopen = function(){ onOpen() };
websocket.onclose = function(){ onClose() };
websocket.onmessage = function(input){ onMessage(input) };
websocket.onerror = function(input){ onError(input); };
The different events are pretty self explanatory and for now the functions that are called simply output a value to a textbox. However in the future we can use these to tie into different events happening in the game.
The last thing is sending messages to the server, this is achieved by:
websocket.send(msg);
Server
Now we have a client that can send and receive messages we need to create a server to for it to connect to.
For this tutorial I will create a simple server using node.js, the main reasons for doing so is its ease of development and the fact its coded in javascript makes it nice a familiar
There are also a number of modules available that will handle the handshake and other features for you. The one i quite like is https://github.com/miksago/node-websocket-server
This is the code for a simple socket server created using node.js and the node-websocket module that will echo back all messages sent to it.
// Import Module
var ws = require("websocket-server");
// Create Server
var server = ws.createServer({debug: true});
console.log('>> Sever Started');
// Listener waiting for connections
server.addListener("connection", function(connection){
// Handle new Connection
// Listner for incoming messages
connection.addListener("message", function(msg){
// Handle Incoming Messages
connection.send(msg); // Send Message Back to connection
});
});
server.listen(1234);
Then its simply a matter of saving it up and running it,

So what next?
Next stages are to being communicated player positions and so forth between the server and client and other fun things!
Currently with glacialflame we have multiplayer working with chat, movement and projectiles and are in the process of developing a small demo game to showcase what we have so far while we continue working on the main game ![]()













