使用HTML / JS / AJAX / Java开发基于多人浏览器的纸牌游戏

Question

I currently have a multiplayer card game developed and working in Java and it is working in the console. The game is similar in format to Bridge and Spades, minus the bidding process. It is a four-player game, and players take turns playing a card.

I am currently working to convert this to a browser-based webapp, and am adding Spring MVC, and using HTML, JavaScript, and AJAX for the UI and communication with the backend. I have a good idea of the approach I want to take on getting this to work single-player against the AI, allowing the user to play their card and using an AJAX call to get the next three plays from the server.

However, I'm wondering what kind of approach I would need to take for this to be multiplayer. I have seen some references to "Socket-programming," which I am unfamiliar with, but those seem to revolve around Java applets, instead of a browser-based app.

Basically, I am looking for a way to ensure that when a user starts a game and someone else joins, how do I ensure that they are connected to the same game, and are able to see each others' plays? I am asking this now before I have the UI fully developed for single-player, because I want to avoid a complete redesign to support multiplayer functionality.

Answer 1

Since you are creating a multiplayer game, you will need to have at least one server for your client(s) to connect to. Since you want to make this browser based, you will most likely need your own server (rather than having one of the clients be a server). When a user joins a game, it is logged on the server where that user is. When a player performs an action, the server processes the action, then sends a notification to each of the other clients connected to that room. At that point the clients UI updates.

In the past, you could not do this with pure HTML / JavaScript as you cannot open a socket. Which means, the server could not notify the clients. However in HTML5 you should be able to use WebSockets to achieve what you are doing with a server in the middle. The WebSocket API

However, if you don't want to use HTML5 WebSockets, there is another technique that imitates Sockets in JavaScript. That is, the server can talk to the clients. This technique is called long polling. The client sends a request to the server asking for an update, if there is no update available, the server holds the request until an update is available and sends it back to the client at which point they make another update request. Simple Long Polling Example

Another option, if you are very familiar with Java you may wish to check out Google Web Toolkit . GWT is a subset of Java that is compiled into HTML and JavaScript for the front end and if needed creates a Server Side java executable that you can use with TomCat or another web service. In this option, you have a few libraries that allow you to write socket-style code that will be compiled into Long Polling JavaScript.

Best of luck!