Search code examples
javascriptnode.jsmultiplayerwebrtcsocket.io

How do you set up a peer-to-peer connection for an online game built for the web?

I've looked into different kinds of technologies built for the web for the past few months and I've been thinking about making a game for the web. The problem is I'm not familiar of how to use these technologies for the specific purpose of connecting two players to a game. The game at this state is at beta, but I've been stuck with the part in which two players are able to connect each other through URL exchanges like the game Cube Slam created by Google. Cube slam uses a method in which the original player gives their friend or opponent a link and the game connects both players to start a match, but I've looked into the channel api, but with no luck of finding any good tutorials other than Google's documentation on the api. I would assume I'd have to use Google's app engine.

My plan is this, I want to user to first place their name into a input form after doing so they will get a link to share with the other player and the game will start. The problem is I'm not quite sure how to tackle this very part. I have a few question that I would like to get answered. Thank you in advance.

  1. How did Google make the Cube slam gameplay so that when you play with the opponent the game starts without loading a new page? Is this done through Ajax?

2.how do I setup a connection with two players?

  1. Would it be easier to use Googles method of sending the opponent a URL? Or would it be easier to type your name, click play and find a random user, and if so how would this be done?

  2. I've looked at a couple of methods of incorporating online interactions with players such as:

NodeJS PeerJS Socket.IO WebRTC Google's Channel API

Which of these are more suitable on easier for my situation?

  1. Can anyone give me any sample codes, tutorials, methods, or ideologies in which I can accomplish this task. I have a great game idea, I'm just stuck with this very aspect sadly.

Thank you for your time and patience.

Solution

  • Cube Slam uses the Channel API for messaging/signaling, along with Ajax. The HTML5 Rocks WebRTC article describes how this is done for the apprtc.appspot.com video chat app.

    Another alternative, as you suggest, is to use something like Socket.IO. I built a codelab that gives step by step instructions on how to do that: bitbucket.org/webrtc/codelab.