where to add websockets io?

[zahachtah]

I am a total amateur in games, decent in programming but not very good in javascript. BUT, I want to learn and Babylon just seems very easy and intuitive. I understand most demos and was able to make a few scenes myself. So my question:

 

I would like to try to make a game that talks with my desktop computer using websockets. I am used to programming parallel for scientific use, so I know how to handle it on the server side (going to use julia for fun on the server side..). But where in the general structure of the babylon code would I define the function to make a websocket connection and where do I put the functions to listen and write (listen to server sending position update, write keyboard events and mouse x,y coordinates) and update babylon objects such as camera position etc. 

 

Sorry for asking such a dumb question, but if anyone would be able to just give a quick idea of how to do this efficiently that would save a few days of googling and reading (would be great to have this in the tutorials too!). I can make a playground demo to share the knowledge then.

 

Anyhow, I am fascinated by the opportunities of babylon, not the least for scientific visualisation!

 

Best, Jon

[Boz]

Hi, welcome to this forum !

I set up a server with NodeJS and socket.io inside a Babylon project. You did the server stuff so I will tell you how I manage client side.

In my main file index.php I include all my .js files.

game.js :

var init = function() {
	// Initialise scene
	createScene();
	
	// Load all MODELS
	loadModels();
	
	// Initialise socket connection
	socket = io.connect("http://localhost:8000");
	
	// Initialise remote players array
	remotePlayers = [];
	
	// Start listening for socket events
	setEventHandlers();
	setsocketHandlers();
};

This is my main method, where I build the scene, load models, and create socket connection

SetEventHandlers() function is where I catch clicks on scene, to pick up objects, etc..

SetSocketHandlers is where I listen to server messages !

var setsocketHandlers = function()
{
	// socket connection successful
	socket.on("connect", onsocketConnected);

	// socket disconnection
	socket.on("disconnect", onsocketDisconnect);

	// New player message received
	socket.on("new player", onNewPlayer);

	// Player move message received
	socket.on("move player", onMovePlayer);

	// Player removed message received
	socket.on("remove player", onRemovePlayer);
	
	// New chat message received
	socket.on("new_chat_msg", onNewChatMsg);

	// New private chat message received
	socket.on("new_private_chat_msg", onNewPrivateChatMsg);
};

Doing this, you start listening to server events. The second parameter is the function name which is called when the event is raised.

example : a new player connects to the game, the server tells you and you can add it on your side :

function onNewPlayer(data) {
	console.log("New player connected: "+data.id);

	// Initialise the new player ("dude" for everyone else for the moment)
	var newPlayer = new Player("dude", data.x, data.z, false);
	newPlayer.setID(data.id);

	// Add new player to the remote players array
	remotePlayers.push(newPlayer);
};

Here I create a Player object but you can create players as Babylon elements like boxes, spheres, etc..

 

Second part : send info to server

if (localPlayer && localPlayer.update(keys)) {
	// Send local player data to the game server
	socket.emit("move player", { pos: localPlayer.getPosition(), rot: localPlayer.getRotation() });

This is the way I send new client position to server.

WARNING : this is very basic client-server communication, and not so safe. I prefer to tell people to send client inputs instead of updated positions. But you can manage all data received by server and do it what you want to do

I don't know if this is the answer you were looking for. Good luck for your projects with BabylonJS

[Boz]

Here is the article I learned a lot from : http://buildnewgames.com/real-time-multiplayer/

[zahachtah]

Many thanks, this will get me on the right track.