Battleship — The Game(Step2: Multiplayer)

Focusing on Node.js and Socket.io

In a previous article, I showcased how to build the interface in HTML and CSS for the game battleship. Then the focus was to build the logic and make the game happen.

I implemented my game with one player in mind and the computer for an opponent.

In this article, I would explain how to use Node and Socket.io in order to transform the game into a multiplayer, where two distant players can play against each other.

If you haven’t read my previous article, or if you need to refresh on the game rules, here is a link for you.

Battleship — The Game (Step1: UserInterface and game logic)

Definitions

Node.js

NodeJS is a runtime environment running v8 JavaScript engine, which is the core of Google Chrome, outside of the browser.

That feature makes NodeJS a powerful tool, allowing for server-side operations running in a single process. It gives thousands of JS developers the chance to work on server-side processing.

NodeJS is mainly used for chat apps, Object DB APIs, Queued inputs with optimistic rendering… in our case, it is a multiplayer online game.

If you would like to read more about NodeJS and maybe go into deeper details on how and when to use it, I suggest the following article by Tomislav Capan.

Why The Hell Would I Use Node.js? A Case-by-Case Tutorial

Socket.io

Socket.io is a library built with JavaScript to go hand in hand with the nodeJS server, it allows for real-time communication back and forth between web clients (browser) and servers.

You can have a look at their own website where they explain the architecture and how the library works.

Introduction

socket.io comes in two parts: a client-side library that runs in the browser, and a server-side library for Node.js

Steps

Similar to the previous article, I will dissect the problem we are trying to solve here into smaller problems, and I will show step by step how to go about every problem alone.

Setup Server

The server in this case is a JS file, but first things first.

1- Install NodeJS: (using HomeBrew)

brew install node

2- Since we have source code already we want to initiate a node project using the init command

npm init -y

that will create package.json

3- Now we install express and socket.io (that would take a minute to install)

npm i express socket.io

4- We would want to install nodemon to monitor our server changes and automatically restart the server for those changes to take effect.

npm i --save-dev nodemon

5- In package.json we would need to update some values and add some scripts as follows

6- Create server.js in the root directory of the project, this file would be our backend, and we set it up as follows.

Brainstorm

What are we trying to achieve? always remember your goal and keep it front and center. We want to make the game we have multiplayer.

Here is a link to the game rules to help us remember the essentials so we can plan how to implement them with node and socket.io

Battleship (game)

Having two players requires us to monitor their status, what are the different statuses of a player?

Connected: I wanted to keep the option of a single-player available for my users, so I added a button specifically for the multiplayer option and that’s when my player is considered connected.

Disconnected: before a player joins the game / in our case before they load the app and choose the multiplayer option.

Ready/Not Ready: a player is not ready until he places all his ships on the grid and presses the play button.

knowing that the next step would be to handle those statuses in the game and to let players know when another player connects and when they are ready to play.

Likewise, we need to communicate players' moves, hits, and misses.

Communication will happen between client and server, in our case between server.js and app.js

Connection

Connection to the server is initiated by the client, in our case, it is initiated on click event of the button “Multiplayer” and it is as easy as calling the function io().

On the server-side, handling connection requests and everything within that connection happens in the io.on block.

Disconnection

Within a connection, all communication happens by inter-changing messages, both the server and the client will emit and listen for specific messages holding specific pieces of data to help progress the game.

socket.on is a listening function with a callback method to handle what happens after being fired. The first argument though is the event we are listening for and it is a text value sent by the other side using the emit function.

Ready/Move

The same goes for readiness and moves, the client emits the message, and the server processes it and returns responses.

socket.emit does send a message to a specific socket and it is used on both the client and the server sides, yet socket.broadcast.emit is used by the server and it sends a message to all connected sockets.

I would stop here for now, as the rest would be more related to how to handle the game logic while using socket communication, and I want to keep this article focused on how to use socket and node.

Conclusion

As you can see, for us to set up a server and to start a connection between our client and that server is pretty easy and straightforward.
after that point, it is up to you what do you want to do and what logic do you want to implement.

The basics of server-client communication are:
1- setting up the connection.
2- listening to requests/messages.
3- decide what to do when receiving the request/message.

If you are interested in the logic implementation you can check my GitHub repository as I will soon be finishing my implementation of the game, otherwise stay tuned for more interesting articles to come.