Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including npm_crafty with all npm packages installed. Try it out:

var npmCrafty = require("npm_crafty")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

npm_crafty v0.5.3-8

A server version of craftyJS. It allows multiple server-client(s) sessions.

Example


Note that in all examples the path to npm_crafty module is specified relative to the example folder. When you install the module you have to var npm_crafty = require('npm_crafty');

Run the server with node exampleName.server.js (from the appropriate working directory).
Run the client by opening the url localhost with your browser (the browser will load the html file).

Simple

========= This example shows you basic usage of npm_crafty for creating one client-server room.
The server initiates an event on client connect. The client logs the event and replies back to the server. The server logs the event.

Server

var path = require('path'),
    npm_crafty = require('../lib/npm_crafty.server');

var Crafty;
//setup default server with the following arguments
npm_crafty.setupDefault( function () { //immediate callback
    //setup additional get requests
    npm_crafty.app.get('/', function (req, res) {
        res.sendfile(path.join(__dirname + '/simple.client.html'));
    });
    
    //create Crafty Server and bind it to "Room1"
    Crafty = npm_crafty.createServer("Room1");
    
    //server will receive event from client back
    Crafty.netBind("CustomEvent", function(msg) {
        console.log("2. Server receive event");
    });
    
}, function (socket) { //connect callback

    //bind client socket to crafty instance, thus "Room1"
    npm_crafty.addClient(Crafty, socket);
    
    //send event to newly connected client
    Crafty.netTrigger("CustomEvent", "customData");
    
}, function (socket) { //disconnect callback
});

Client

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Simple</title>
    <script src="crafty_client.js"></script>
    <script src="npm_crafty.js"></script>
  </head>
  <body>
    <script>
    window.onload = function() {
        var npm_crafty = require("npm_crafty");
        npm_crafty.setupDefault(function() { //immediate callback after Crafty with Crafty.net is available
            
            // create Crafty Client
            Crafty = npm_crafty.createClient("CLIENT");
            
            // client will receive event and send back to server
            Crafty.netBind("CustomEvent", function(data) {
                console.log("1. Client receive event");
                Crafty.netTrigger("CustomEvent", data);
            });
            
        }, function(socket) { //connect callback
        
            // bind client socket to server socket
            npm_crafty.setServer(Crafty, socket);
            
        }, function(socket) { // disconnect callback
        });
    };
    </script>
  </body>
</html>

PongBasic

============ This is an adaptation of a basic pong game. Open localhost and enter __"CLIENT1"__, then open localhost again in a new tab and enter __"CLIENT2"__. CLIENT1 controls the paddle with W & S, CLIENT2 with UP & DOWN.

In this basic version, each client controls one paddle. The input is send to the server. The server handles the game logic. The server feeds the updated game state back to the client. The client displays the entities.

Note that npm_crafty only handles low-level networking. In a real world example, where the server is not localhost you would have to predict client movement on the client locally and adjust the movement accordingly when a corrected position update of the server arrives.

The relevant files are:

  • pongBasic.client.html
    • game room setup on client
  • pongBasic.server.js
    • game room setup on server
  • pongBasic.game.js
    • this is the actual game
    • all common features of entities are defined equally in both server and client
    • the client adds input and output features to entites
    • the server adds game logic features to entities
    • both the client and the server communicate via net events
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free