Game Tutorial using Node.js - IBM Bluemix (Part 2) [WebSocket Communication]

Hi folk,

In this part of the tutorial I will teach you how to implement the client-server part in a game with a few basic concepts using a basic connection model architecture, deploy the application in IBM Bluemix and how you can perform debugging tasks.

Let's start first with some basic concepts of WebSocket and the client-server architecture.

General concepts

WebSocket is a computer communication protocol communications protocol, providing full-duplex communication channels over a single TCP connection. WebSocket is designed to be implemented in web browsers and web servers, but it can be used by any client or server application.

The client-server architecture is a software design model in which tasks are shared between service providers or services, called servers, and callers, called clients. A client makes requests to another program, the server, which gives an answer.

To perform the requests and exchange data there is a concept called socket.
A socket designates an abstract concept by which two programs (possibly located on different computers) can interchange any data at a single node in a computer network.

Procedure

Before following the procedure, it is recommended to create the project structure described in previous post Game Tutorial using Nodejs - IBM Bluemix (Part 1).

So for the WebSocket communication, I'm going to use the Socket.IO library. Socket.IO enables real-time bidirectional event-based communication.

The procedure I followed in this part of the game tutorial is as follows:

1) Execute following command into project root folder to install node modules dependencies:

$ npm install socket.io           

2) Open file app.js and copy and paste following lines at the end:

// Socket communication
var io = require('socket.io')(server);

// Connect event
io.on('connection', function(socket){
  console.log('a user connected');
  // Disconnect event
  socket.on('disconnect', function(){
    console.log('user disconnected');
  });
});

3) Save file app.js
 4) Open file index.html and copy and paste following lines at the end:

<script src="/socket.io/socket.io.js"></script>
<script> 
var socket = io(); 
</script>

5) Save file index.html
6) Execute following command into project root folder to run local Express server:

$ node app.js

7) Open a browser a type localhost:3000

Once the connection is made from the client we will send a message to the server.

8) Open file index.html and copy and paste following into script tag:

// Send message to server
socket.emit('clientMsg',{
  msg:'Hi from browser client',
});

9) Save file index.html
10) Open file app.js and copy and paste following lines into ‘io’ connection function:

// Receive event message from client
socket.on('clientMsg', function(data){
  console.log(data.msg);
});

11) Save file app.js
12) Execute following command into project root folder to run local Express server:

$ node app.js

13) Open a browser a type localhost:3000

Finally, the server responds to the client with a return message.

14) Open file app.js and copy and paste following lines into ‘io’ connection function:

socket.emit('serverMsg',{
  msg:'Hi from browser server',
}); 

15) Save file app.js
16) Open file index.html and copy and paste following into script tag:

socket.on('serverMsg', function(data){
  console.log(data.msg);
});

17) Save file index.html
18) Execute following command into project root folder to run local Express server:

$ node app.js

19) Open a browser a type localhost:3000
20) Open browser Inspect tool.

Note: Most browsers currently have an inspection tool. In the case of Firefox the option is Inspect Element from the options menu of the page.

21) Execute following command into project root folder to push your app to Bluemix:

$ bluemix app push

Note: Deploying your application can take a few minutes. When deployment completes, you'll see a message that your app is running.

22) Open a browser and type {nameofyourapp}.mybluemix.net
23) Execute following command into project root folder to debug your app to Bluemix:

$ bluemix app logs {nameofyourapp}

Note: Debugging your application can take a few minutes the first time your invoke the service to retrieving logs. When deployment completes, you'll see your application traces log.

Second step done! now you can think something creative to create a game in the cloud.

You can download the sources of the example application here.
And you can also try the client example here.

Are you ready for the next part of the tutorial? Soon I publish it, be patient !!

Be blue, Be mix