• Choose a category
• All
• Classic-Fiction

var r = new LoginRequest();

r.userName = "CanvasUser_" + Math.floor(Math.random() * 1000);

es.engine.send(r);

}

function onLoginResponse(event) {

statusMessages.push("Login Successful?: "+event.successful);

username = event.userName;

var crr = new CreateRoomRequest();

crr.zoneName = "TestZoneChat";

crr.roomName = "TestRoomChat";

es.engine.send(crr);

}

function sendMessage(event) {

var formElement = document.getElementById("textBox");

var pmr = new PublicMessageRequest();

pmr.message = "";

pmr.roomId = _room.id;

pmr.zoneId = _room.zoneId;

var esob = new ElectroServer.EsObject();

esob.setString("message", formElement.value);

esob.setString("type","chatmessage");

pmr.esObject = esob;

es.engine.send(pmr);

statusMessages.push("message sent")

}

function onPublicMessageEvent(event) {

var esob = event.esObject;

statusMessages.push("message received")

if (esob.getString("type") == "chatmessage") {

chatMessages.push(event.userName + ":" + esob.getString("message"));

}

}

}

Further Explorations with ElectroServer

Displaying text on HTML5 Canvas is interesting, but as we have shown you in this book, you can do much more. Let’s add some graphics to the previous demo. We have added a second application for you to peruse, named CH11EX3.html. This application adds the bouncing ball demo app from Chapter 5 to the chat application we just created. It allows chatters to “send” bouncing balls to each other by clicking on the canvas.

The heart of the app is simply another use of the EsObject from the chat application, which is created when the user clicks on the canvas. This EsObject adds information about a ball that one user created for the others in the room:

function eventMouseUp(event) {

var mouseX;

var mouseY;

if (event.layerX || event.layerX == 0) { // Firefox

mouseX = event.layerX ;

mouseY = event.layerY;

} else if (event.offsetX || event.offsetX == 0) { // Opera

mouseX = event.offsetX;

mouseY = event.offsetY;

}

ballcounter++;

var maxSize = 8;

var minSize = 5;

var maxSpeed = maxSize+5;

var tempRadius = Math.floor(Math.random()*maxSize)+minSize;

var tempX = mouseX;

var tempY = mouseY;

var tempSpeed = maxSpeed-tempRadius;

var tempAngle = Math.floor(Math.random()*360);

var tempRadians = tempAngle * Math.PI/ 180;

var tempvelocityx = Math.cos(tempRadians) * tempSpeed;

var tempvelocityy = Math.sin(tempRadians) * tempSpeed;

var pmr = new PublicMessageRequest();

pmr.message = "";

pmr.roomId = _room.id;

pmr.zoneId = _room.zoneId;

var esob = new ElectroServer.EsObject();

esob.setFloat("tempX",tempX );

esob.setFloat("tempY",tempY );

esob.setFloat("tempRadius",tempRadius );

esob.setFloat("tempSpeed",tempSpeed );

esob.setFloat("tempAngle",tempAngle );

esob.setFloat("velocityx",tempvelocityx );

esob.setFloat("velocityy",tempvelocityy );

esob.setString("usercolor",usercolor );

esob.setString("ballname",username+ballcounter);

esob.setString("type", "newball");

pmr.esObject = esob;

es.engine.send(pmr);

statusMessages.push("send ball");

}

When a user connected in the same room receives this public message, we handle the newball event in a similar manner to how we handled the chat text, by using the onPublicMessageEvent() function. When the function sees an event with the type newball, it calls createNetBall(). The createNetBall() function creates ball objects to bounce around the canvas, much like the ones we created in Chapter 5:

function onPublicMessageEvent(event) {

statusMessages.push("message received")

var esob = event.esObject;

if (esob.getString("type") == "chatmessage") {

chatMessages.push(event.userName + ":" + esob.getString("message"));

} else