Jump to content

where to add websockets io?


Recommended Posts

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

Link to comment
Share on other sites

Hi, welcome to this forum ! :D

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
	// Load all MODELS
	// Initialise socket connection
	socket = io.connect("http://localhost:8000");
	// Initialise remote players array
	remotePlayers = [];
	// Start listening for socket events

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);

	// Add new player to the remote players array

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 ;)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...