Forem: Oscar Castro

Java WebSocket Programming with Android and Spring Boot

Oscar Castro — Mon, 19 Aug 2019 20:04:57 +0000

The WebSocket protocol provides an always-on connection between a client and a server for bi-directional communication. This is great for applications that require a realtime connection, such as multiplayer games, IoT devices, and chat apps. In this tutorial, we are going to set up a simple Android client that will connect to a WebSocket server using Spring Boot.

You can check out the complete project in the GitHub repository.

Android WebSocket Client

For the Android client, we are going to make a simple demo app that contains four image buttons of cute animals. To get started, initialize a new project on Android Studio, with a Basic Activity, called JavaWebSocketClient. We are going to use a lightweight WebSocket client library for the app, which can be found in this repo. In order to use this library, we have to add it to the build.gradle file in the app directory. Add the following to the dependencies and sync the project:

dependencies { 
    // Add this
    implementation 'tech.gusavila92:java-android-websocket-client:1.2.2'    
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    ...
}

Make sure to include the internet access permission in the manifest file:

<uses-permission android:name="android.permission.INTERNET" />

Connect the Client to the Server

Go to MainActivity.java, import the following packages and set up onCreate():

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.View;
import android.widget.TextView;
import java.net.URI;
import java.net.URISyntaxException;
import tech.gusavila92.websocketclient.WebSocketClient;

public class MainActivity extends AppCompatActivity {
  private WebSocketClient webSocketClient;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.animal_sounds);
    createWebSocketClient();
  }
}

Next, create a new method createWebSocketClient():

private void createWebSocketClient() {
    URI uri;
    try {
      // Connect to local host
      uri = new URI("ws://10.0.2.2:8080/websocket");
    }
    catch (URISyntaxException e) {
      e.printStackTrace();
      return;
    }

    webSocketClient = new WebSocketClient(uri) {
      @Override
      public void onOpen() {
        Log.i("WebSocket", "Session is starting");
        webSocketClient.send("Hello World!");
      }

      @Override
      public void onTextReceived(String s) {
        Log.i("WebSocket", "Message received");
        final String message = s;
        runOnUiThread(new Runnable() {
          @Override
          public void run() {
            try{
              TextView textView = findViewById(R.id.animalSound);
              textView.setText(message);
            } catch (Exception e){
                e.printStackTrace();
            }
          }
        });
      }

      @Override
      public void onBinaryReceived(byte[] data) {
      }

      @Override
      public void onPingReceived(byte[] data) {
      }

      @Override
      public void onPongReceived(byte[] data) {
      }

      @Override
      public void onException(Exception e) {
        System.out.println(e.getMessage());
      }

      @Override
      public void onCloseReceived() {
        Log.i("WebSocket", "Closed ");
        System.out.println("onCloseReceived");
      }
    };

    webSocketClient.setConnectTimeout(10000);
    webSocketClient.setReadTimeout(60000);
    webSocketClient.enableAutomaticReconnection(5000);
    webSocketClient.connect();
  }

This may look like a lot, but really, we are doing four key things in this method:

Starting a new connection to the localhost "ws://10.0.2.2:8080/websocket".
Sending a message to the server once a connection is opened.
Displaying the messages sent from the server on the app.
Setting timeouts and automatic reconnection.

Now that we connected the client to the server, let's set up the method to send messages to the server.

Send Messages to the Server

In MainActivity.java, add the following to sendMessage():

public void sendMessage(View view) {
   Log.i("WebSocket", "Button was clicked");

   // Send button id string to WebSocket Server
   switch(view.getId()){
     case(R.id.dogButton):
       webSocketClient.send("1");
       break;

     case(R.id.catButton):
       webSocketClient.send("2");
       break;

     case(R.id.pigButton):
       webSocketClient.send("3");
       break;

     case(R.id.foxButton):
       webSocketClient.send("4");
       break;
   }
 }

When a button is pressed, the button id is sent to the server. This method is called from the file animal_sounds.xml, which you can get from my Java WebSocket Programming Repo. Make sure to modify the file strings.xml under the values directory so you won't get any errors in the XML file.

The last thing to do on the client-side is to add the images for the animals in the drawable directory. The images are made by Freepik from www.flaticon.com.

Run the Android app in your emulator:

Nothing happens right now because the server is not set up. Let's do that right now!

Spring Boot WebSocket Server

For our server, we will use Spring Boot which makes it easy to create production-grade Spring applications with minimum configurations. To quickly bootstrap our project, we will use Spring Initializr. We will generate a Gradle project, but you can also generate a Maven project if you prefer. Configure the Initializr like the screenshot below and make sure to add WebSocket as a dependency:

Generate the project to download a zip file. Once you unzip the file, go to the src directory and keep on clicking the subdirectories until you get to the JavaWebSocketServerApplication.java file.

package com.example.javawebsocketserver;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class JavaWebSocketServerApplication {
  public static void main(String[] args) {
    SpringApplication.run(JavawebsocketserverApplication.class, args);
  }
}

Add two files to the directory: WebSocketHandler.java and WebSocketConfiguration.java.

Handle the WebSocket Messages

We have to handle the incoming messages that arrive in the server. To do so, in WebSocketHandler.java inherit the class AbstractWebSocketHandler to implement the method handleTextMessage(). Add the following code to the file:

package com.server.javawebsocketserver;

import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.AbstractWebSocketHandler;
import java.io.IOException;

public class WebSocketHandler extends AbstractWebSocketHandler {
    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws IOException {
        String msg = String.valueOf(message.getPayload());
        // Send back unique message depending on the id received from the client
        switch(msg){
            case("1"):
                System.out.println("Dog button was pressed");
                session.sendMessage(new TextMessage("Woooof"));
                break;

            case("2"):
                System.out.println("Cat button was pressed");
                session.sendMessage(new TextMessage("Meooow"));
                break;

            case("3"):
                System.out.println("Pig button was pressed");
                session.sendMessage(new TextMessage("Bork Bork"));
                break;

            case("4"):
                System.out.println("Fox button was pressed");
                session.sendMessage(new TextMessage("Fraka-kaka-kaka"));
                break;

            default:
                System.out.println("Connected to Client");
        }
    }
}

Inside the method, we simply get the string value of the message payload and do a switch expression to check the value of the message with the value of each case. A unique message with the animal sound is sent to the client.

Configure the WebSocket Request Handling

In WebSocketConfiguration.java, implement the interface WebSocketConfigurer and add the following code to the file:

package com.server.javawebsocketserver;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;

@Configuration
@EnableWebSocket
// Add this annotation to an @Configuration class to configure processing WebSocket requests
public class WebSocketConfiguration implements WebSocketConfigurer {
    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(new WebSocketHandler(), "/websocket");
    }
}

We set up the method registerWebSocketHandlers to configure the WebSocketHandler to the path "/websocket".

That is all for the server-side. Now that we have everything set up, let's start the WebSocket server and run the app!

Send Data between Server and Client

In the terminal, go to the root directory of your Spring Boot project and run the following command to start the server:

gradle bootRun

Next, run the Android client in Android Studio and once the app loads, click any of the four buttons.

Play around with the Android app and see how messages are sent from client-to-server with WebSockets!

Update the Android Client to Pub/Sub

Sending data client-to-server or server-to-client is not difficult and can be done pretty fast. But what if you want to send data client-to-client? You can't directly connect clients without implementing some routing and broker logic on the server.

There are several tools we can use to make this task less time-consuming. One such tool is Socket.IO, which sets up a real-time, bidirectional connection between clients. This is a great open-source tool to use, but we still need to set up a server and connect the client to the server. Is there an easier way to securely and reliably send data between clients without manually setting up a server? With PubNub, we can.

PubNub provides the realtime infrastructure to power any device that speaks TCP. We can stream data from client-to-client, client-to-server or server-to-client using PubNub's Global Data Stream Network in under 100 ms! With PubNub, an always-on connection is made between the devices connected to the channel, similar to WebSockets. The best part is that you don't have to worry about setting up a server and maintaining the server because PubNub is serverless and is infinitely scalable.

To see how PubNub simplifies the process of sending data from client-to-client, we will modify the Android app we built earlier. But first, sign up for a free PubNub account. You can get your unique pub/sub keys in PubNub Admin Dashboard.

Modify the Android Client

To differentiate the updated app from the old app, create a new Android project called PubNubJavaClient. In order to use PubNub's Android SDK, add the following to the build.gradle file in the app directory and sync the project:

dependencies {
    implementation group: 'com.pubnub', name: 'pubnub-gson', version: '4.25.0' // Add this
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    ...
}

Include the following permissions to the manifest file:

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

Everything else, except MainActivity.java, is the same. From the previous app, add the following files to the updated app: animal_sounds.xml, strings.xml and the images from the drawable directory. Once you finish this, go to MainActivity.java to add the new code. Import the following packages and set up onCreate():

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;
import com.pubnub.api.PNConfiguration;
import com.pubnub.api.PubNub;
import com.pubnub.api.callbacks.PNCallback;
import com.pubnub.api.callbacks.SubscribeCallback;
import com.pubnub.api.models.consumer.PNPublishResult;
import com.pubnub.api.models.consumer.PNStatus;
import com.pubnub.api.models.consumer.pubsub.PNMessageResult;
import com.pubnub.api.models.consumer.pubsub.PNPresenceEventResult;
import java.util.Arrays;

public class MainActivity extends AppCompatActivity {
  PubNub pubnub;
  TextView textView;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.animal_sounds);

    initPubNub(); // Initialize PubNub
  }

Make a call to initPubNub() to initialize PubNub:

public void initPubNub(){
  PNConfiguration pnConfiguration = new PNConfiguration();
  pnConfiguration.setPublishKey("ENTER_YOUR_PUB_KEY"); // REPLACE with your pub key
  pnConfiguration.setSubscribeKey("ENTER_YOUR_SUB_KEY"); // REPLACE with your sub key
  pnConfiguration.setSecure(true);
  pubnub = new PubNub(pnConfiguration);

  // Listen to messages that arrive on the channel
  pubnub.addListener(new SubscribeCallback() {
    @Override
    public void status(PubNub pub, PNStatus status) {
    }

    @Override
    public void message(PubNub pub, final PNMessageResult message) {
      // Replace double quotes with a blank space
      final String msg = message.getMessage().toString().replace("\"", ""); 
      textView = findViewById(R.id.animalSound);

      runOnUiThread(new Runnable() {
        @Override
        public void run() {
          try{
            // Display the message on the app
            textView.setText(msg);
          } catch (Exception e){
              System.out.println("Error");
              e.printStackTrace();
          }
        }
      });
    }

    @Override
    public void presence(PubNub pub, PNPresenceEventResult presence) {
    }
  });

  // Subscribe to the global channel
  pubnub.subscribe()
    .channels(Arrays.asList("global_channel"))
    .execute();
}

We do three key things in this method:

Initialize the PubNub client API. Make sure to replace "ENTER_YOUR_PUB_KEY" and "ENTER_YOUR_SUB_KEY" with your Pub/Sub keys.
Set up a listener to get notified of messages that arrive on the channel. As we did earlier, display the message on the app for the client to see.
Subscribe to the global channel where messages will be published.

When the user presses a button, the method sendMessage() is called:

// This method is called when a button is pressed
public void sendMessage(View view) {
  // Get button ID
  switch(view.getId()){
    case(R.id.dogButton):
      publishMessage("Woooof");
      break;

    case(R.id.catButton):
      publishMessage("Meooow");
      break;

    case(R.id.pigButton):
      publishMessage("Bork Bork");
      break;

    case(R.id.foxButton):
      publishMessage("Fraka-kaka-kaka");
      break;
  }
}

This method is similar to what we did earlier, except now we publish the actual message, the animal sound, to the global channel and not the server. We use publishMessage() as a helper function to publish the message.

public void publishMessage(String animal_sound){
  // Publish message to the global chanel
  pubnub.publish()
    .message(animal_sound)
    .channel("global_channel")
    .async(new PNCallback<PNPublishResult>() {
      @Override
      public void onResponse(PNPublishResult result, PNStatus status) {
        // status.isError() to see if error happened and print status code if error
        if(status.isError()) {
          System.out.println("pub status code: " + status.getStatusCode());
        }
      }
    });
}

That is all we need to get the app up-and-running!

Send Data Between Clients

Run the Android app in two emulators to see messages appear in realtime.

Now that you know how to send data with WebSockets in Java, make sure to check out the other tutorials in Socket Programming in Python and WebSocket Programming in Node.js.

Build a Multiplayer Tic Tac Toe Game in React

Oscar Castro — Mon, 05 Aug 2019 18:40:36 +0000

Tic tac toe is a quintessential childhood game. All it requires is something to write on and something to write with. But what if you want to play with someone that's in another location? In this case, you would need to use an application that connects you and another player to the game.

The application needs to provide a realtime experience so every move you make is seen instantly by the other player and vice versa. If the application does not provide this experience, then you and many people, won't probably use it anymore.

So how does a developer provide a connected experience where the players can play tic tac toe, or any game, no matter where they are in the world?

Realtime Multiplayer Game Concepts

There are several ways to provide the realtime infrastructure for multiplayer games. You can go the route of building your own infrastructure from the ground up by using technologies and open-source protocols like Socket.IO, SignalR, or WebSockets.

While this may seem like an appealing route to take, you will encounter several issues; one such issue being scalability. It's not hard to handle 100 users, but how do you handle 100,000+ users? Besides infrastructure issues, you still have to worry about maintaining your game.

At the end of the day, the only thing that matters is providing a great experience for the players of your game. But how do you do solve the infrastructure problem? This is where PubNub comes in.

PubNub provides the realtime infrastructure to power any application through its global Data Stream Network. With over 70+ SDKs, including the most popular programming languages, PubNub simplifies sending and receiving messages to any device in under 100 ms. It is secure, scalable and reliable so you don't have to worry about creating and maintaining your own infrastructure.

In order to show how easy it is to develop a multiplayer game using PubNub, we will build a simple React tic tac toe game using the PubNub React SDK. In this game, two players will connect to a unique game channel where they will play against each other. Every move a player makes will be published to the channel to update the other player's board in realtime.

You can check out the complete project in the GitHub repository.

App Overview

Here is what our app will look like once we finish. Click here to try out our live version of the game.

Players first join the lobby where they can create a channel or join a channel. If the player creates a channel, they get a room id to share with another player. The player that created the channel becomes Player X and will make the first move when the game starts.

The player that joins a channel with the room id they were given becomes Player O. Players can only join channels when there is one other person in the channel. If there is more than one person, then a game is in progress for that channel and the player won't be able to join. The game starts once there are two players in the channel.

At the end of the game, the winner's score is incremented by one point. If the game ends in a tie, then neither player is awarded a point. A modal is displayed to Player X asking them to start a new round or to end the game. If Player X continues the game, the board resets for the new round. Otherwise, the game ends and both players go back to the lobby.

Set Up the Lobby

Before we set up the lobby, sign up for a free PubNub account. You can get your unique pub/sub keys in PubNub Admin Dashboard

Once you get your keys, insert them into the constructor of App.js.

// App.js
import React, { Component } from 'react';
import Game from './Game';
import Board from './Board';
import PubNubReact from 'pubnub-react';
import Swal from "sweetalert2";  
import shortid  from 'shortid';
import './Game.css';

class App extends Component {
  constructor(props) {  
    super(props);
    // REPLACE with your keys
    this.pubnub = new PubNubReact({
      publishKey: "YOUR_PUBLISH_KEY_HERE", 
      subscribeKey: "YOUR_SUBSCRIBE_KEY_HERE"    
    });

    this.state = {
      piece: '', // X or O
      isPlaying: false, // Set to true when 2 players are in a channel
      isRoomCreator: false,
      isDisabled: false,
      myTurn: false,
    };

    this.lobbyChannel = null; // Lobby channel
    this.gameChannel = null; // Game channel
    this.roomId = null; // Unique id when player creates a room   
    this.pubnub.init(this); // Initialize PubNub
  }  

  render() {
    return ();
    }
  }

  export default App;

Also in the constructor, the state objects and variables are initialized. We will go over the objects and the variables when they come up throughout the file. Finally, we initialized PubNub at the end of the constructor.

Inside of the render method and inside the return statement, we add the markup for the Lobby component.

return (  
    <div> 
      <div className="title">
        <p> React Tic Tac Toe </p>
      </div>

      {
        !this.state.isPlaying &&
        <div className="game">
          <div className="board">
            <Board
                squares={0}
                onClick={index => null}
              />  

            <div className="button-container">
              <button 
                className="create-button "
                disabled={this.state.isDisabled}
                onClick={(e) => this.onPressCreate()}
                > Create 
              </button>
              <button 
                className="join-button"
                onClick={(e) => this.onPressJoin()}
                > Join 
              </button>
            </div>                        

          </div>
        </div>
      }

      {
        this.state.isPlaying &&
        <Game 
          pubnub={this.pubnub}
          gameChannel={this.gameChannel} 
          piece={this.state.piece}
          isRoomCreator={this.state.isRoomCreator}
          myTurn={this.state.myTurn}
          xUsername={this.state.xUsername}
          oUsername={this.state.oUsername}
          endGame={this.endGame}
        />
      }
    </div>
);

The Lobby component consists of a title, an empty tic tac toe board (nothing happens if the player presses the squares) and the 'Create' and 'Join' buttons. This component is displayed only if the state value isPlaying is false. If it's set to true, then the game has begun and the component is changed to the Game component, which we will go over in the second part of the tutorial.

The Board component is part of the Lobby component as well. Within the Board component is the Square component. We won't go into detail for these two components in order to focus on the Lobby and Game components.

When the player presses the 'Create' button, the button is disabled so the player can't create multiple channels. The 'Join' button is not disabled, just in case the player decides to join a channel instead. Once the 'Create' button is pressed, the method onPressCreate() is called.

Create a Channel

The first thing we do in onPressCreate() is generate a random string id that's truncated to 5 characters. We do so by using shortid(). We append the string to 'tictactoelobby--', which will be the unique lobby channel players subscribe to.

// Create a room channel
onPressCreate = (e) => {
  // Create a random name for the channel
  this.roomId = shortid.generate().substring(0,5);
  this.lobbyChannel = 'tictactoelobby--' + this.roomId; // Lobby channel name

  this.pubnub.subscribe({
    channels: [this.lobbyChannel],
    withPresence: true // Checks the number of people in the channel
  });
}

In order to prevent more than two players from joining a given channel, we use PubNub Presence. Later on, we will look at the logic for checking the occupancy of the channel.

Once the player subscribes to the lobby channel, a modal is displayed with the room id so another player can join that channel.

This modal, and all the modals used in this app, are created by SweetAlert2 to replace JavaScript's default alert() popup boxes.

// Inside of onPressCreate()
// Modal
Swal.fire({
  position: 'top',
  allowOutsideClick: false,
  title: 'Share this room ID with your friend',
  text: this.roomId,
  width: 275,
  padding: '0.7em',
  // Custom CSS to change the size of the modal
  customClass: {
      heightAuto: false,
      title: 'title-class',
      popup: 'popup-class',
      confirmButton: 'button-class'
  }
})

At the end of onPressCreate(), we change the state values to reflect the new state of the app.

this.setState({
  piece: 'X',
  isRoomCreator: true,
  isDisabled: true, // Disable the 'Create' button
  myTurn: true, // Player X makes the 1st move
});

Once the player creates a room, they have to wait for another player to join that room. Let's look at the logic for joining a room.

Join a Channel

When a player presses the 'Join' button, a call to onPressJoin() is called. A modal is displayed to the player asking them to enter the room id in the input field.

If the player types in the room id and presses the 'OK' button, then joinRoom(value) is called where value is the room id. This method is not called if the input field is empty or if the player presses the 'Cancel' button.

// The 'Join' button was pressed
onPressJoin = (e) => {
  Swal.fire({
    position: 'top',
    input: 'text',
    allowOutsideClick: false,
    inputPlaceholder: 'Enter the room id',
    showCancelButton: true,
    confirmButtonColor: 'rgb(208,33,41)',
    confirmButtonText: 'OK',
    width: 275,
    padding: '0.7em',
    customClass: {
      heightAuto: false,
      popup: 'popup-class',
      confirmButton: 'join-button-class',
      cancelButton: 'join-button-class'
    } 
  }).then((result) => {
    // Check if the user typed a value in the input field
    if(result.value){
      this.joinRoom(result.value);
    }
  })
}

The first thing we do in joinRoom() is append value to 'tictactoelobby--', similar to what we did in onPressCreate().

// Join a room channel
joinRoom = (value) => {
  this.roomId = value;
  this.lobbyChannel = 'tictactoelobby--' + this.roomId;
}

Before the player subscribes to the lobby channel, we have to check the total occupancy of the channel by using hereNow(). If the total occupancy is less than 2, the player can successfully subscribe to the lobby channel.

// Check the number of people in the channel
this.pubnub.hereNow({
  channels: [this.lobbyChannel], 
}).then((response) => { 
    if(response.totalOccupancy < 2){
      this.pubnub.subscribe({
        channels: [this.lobbyChannel],
        withPresence: true
      });

      this.setState({
        piece: 'O', // Player O
      });  

      this.pubnub.publish({
        message: {
          notRoomCreator: true,
        },
        channel: this.lobbyChannel
      });
    } 
}).catch((error) => { 
  console.log(error);
});

After the player subscribes to the lobby channel, the state value of piece is changed to 'O' and a message is published to that lobby channel. This message notifies the Player X that another player has joined the channel. We set up the message listener in componentDidUpdate(), which we will get to shortly.

If the total occupancy is greater than 2, then a game is in progress and the player attempting to join the channel will be denied access. The following code is below the if statement in hereNow().

// Below the if statement in hereNow()
else{
  // Game in progress
  Swal.fire({
    position: 'top',
    allowOutsideClick: false,
    title: 'Error',
    text: 'Game in progress. Try another room.',
    width: 275,
    padding: '0.7em',
    customClass: {
        heightAuto: false,
        title: 'title-class',
        popup: 'popup-class',
        confirmButton: 'button-class'
    }
  })
}

Let's now take a look at componentDidUpdate().

Start the Game

In componentDidUpdate(), we check if the player is connected to a channel, that is, check that this.lobbyChannel is not null. If it's not null, we set up a listener that listens to all messages that arrive on the channel.

componentDidUpdate() {
  // Check that the player is connected to a channel
  if(this.lobbyChannel != null){
    this.pubnub.getMessage(this.lobbyChannel, (msg) => {
      // Start the game once an opponent joins the channel
      if(msg.message.notRoomCreator){
        // Create a different channel for the game
        this.gameChannel = 'tictactoegame--' + this.roomId;

        this.pubnub.subscribe({
          channels: [this.gameChannel]
        });
      }
    }); 
  }
}

We check if the message arrived is msg.message.notRoomCreator, which is published by the player that joins the channel. If so, we create a new channel, 'tictactoegame--', with the room id appended to the string. The game channel is used to publish all the moves made by the players which will update their boards.

Finally, after subscribing to the game channel, the state value of isPlaying is set to true. Doing so will replace the lobby component with the game component.

this.setState({
   isPlaying: true
 });  

 // Close the modals if they are opened
 Swal.close();
}

Once the game component is shown, we want to close all the modals, if opened, from the Lobby component by doing Swal.close().

Now that we have two players connected to a unique game channel, they can begin playing tic tac toe! In the next section, we will implement the UI and logic for the game component.

Build Game Features

The first thing we do in Game.js is set up the base constructor:

// Game.js
import React from 'react';
import Board from './Board';
import Swal from "sweetalert2";  

class Game extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      squares: Array(9).fill(''), // 3x3 board
      xScore: 0,
      oScore: 0,
      whosTurn: this.props.myTurn // Player X goes first
    };

    this.turn = 'X';
    this.gameOver = false;
    this.counter = 0; // Game ends in a tie when counter is 9
  }

  render() { 
    return (); 
  } 
 } 
export default Game;

For the state objects, we initialize the array squares property, which is used to store the player's positions in the board. This will be explained furthermore below. We also set the players score to 0 and set the value of whosTurn to myTurn, which is initialized to true for Player X and false for Player O.

The value of the variables turn and counter will change throughout the progression of the game. At the end of the game, gameOver is set to true.

Add the UI

Next, let's set up the markup for the Game component inside of the render method.

render() {
  let status;
  // Change to current player's turn
  status = `${this.state.whosTurn ? "Your turn" : "Opponent's turn"}`;

  return (
    <div className="game">
      <div className="board">
        <Board
            squares={this.state.squares}
            onClick={index => this.onMakeMove(index)}
          />  
          <p className="status-info">{status}</p>
      </div>

      <div className="scores-container">
        <div>
          <p>Player X: {this.state.xScore} </p>
        </div>

        <div>
          <p>Player O: {this.state.oScore} </p>
        </div>
      </div>   
    </div>
  );
}

We show the value of status in the UI to let the players know if it's their turn to make a move or if the other player's turn. The boolean value of the state whosTurn is updated every time a move is made. The rest of the UI consists of the Board component and the player's score.

Add the Logic

When the player makes a move on the board, a call to onMakeMove(index) is made where index is the position the piece is placed on the board. The board has 3 rows and 3 columns, so 9 squares total. Each square has its own unique index value, starting with the value 0 and ending with the value 8.

onMakeMove = (index) =>{
  const squares = this.state.squares;

  // Check if the square is empty and if it's the player's turn to make a move
  if(!squares[index] && (this.turn === this.props.piece)){ 
    squares[index] = this.props.piece;

    this.setState({
      squares: squares,
      whosTurn: !this.state.whosTurn 
    });

    // Other player's turn to make a move
    this.turn = (this.turn === 'X') ? 'O' : 'X';

    // Publish move to the channel
    this.props.pubnub.publish({
      message: {
        index: index,
        piece: this.props.piece,
        turn: this.turn
      },
      channel: this.props.gameChannel
    });  

    // Check if there is a winner
    this.checkForWinner(squares)
  }
}

After getting the state of the array squares, a conditional statement is used to check if the square the player touched is empty and if it's their turn to make a move. If one or both conditions are not met, then the player's piece is not placed on the square. Otherwise, the player's piece is added to the array squares in the index the piece was placed on.

For example, if Player X makes a move in row 0, column 2 and the conditional statement is true, then squares[2] will have the value of "X".

Next, the state is changed to reflect the new state of the game and turn is updated so the other player can make their move. In order for the other player's board to update with the current data, we publish the data to the game channel. All of this is happening in realtime, so both players will immediately see their boards update as soon as a valid move is made. The last thing to do in this method is to call checkForWinner(squares) to check if there is a winner.

Before we do that, let's take a look at componentDidMount() where we set up the listener for new messages that arrive in the game channel.

componentDidMount(){
  this.props.pubnub.getMessage(this.props.gameChannel, (msg) => {
    // Update other player's board
    if(msg.message.turn === this.props.piece){
      this.publishMove(msg.message.index, msg.message.piece);
    }
  });
}

Since both players are connected to the same game channel, they will both receive this message. The method publishMove(index, piece) is called, where index is the position that piece was placed and piece is the piece of the player that made the move. This method updates the board with the current move and checks if there is a winner. To prevent the player that made the current move to have to redo this process again, the if statement checks if the player's piece matches the value of turn. If so, their board is updated.

// Opponent's move is published to the board
publishMove = (index, piece) => {
  const squares = this.state.squares;

  squares[index] = piece;
  this.turn = (squares[index] === 'X')? 'O' : 'X';

  this.setState({
    squares: squares,
    whosTurn: !this.state.whosTurn
  });

  this.checkForWinner(squares)
}

The logic of updating the board is the same as onMakeMove(). Let's now go over checkForWinner().

checkForWinner = (squares) => {
  // Possible winning combinations
  const possibleCombinations = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6],
  ];

  // Iterate every combination to see if there is a match
  for (let i = 0; i < possibleCombinations.length; i += 1) {
    const [a, b, c] = possibleCombinations[i];
    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      this.announceWinner(squares[a]);
      return;
    }
  }
}

All the winning combinations are in the double array possibleCombinations, where every array is a possible combination to winning the game. Every array in possibleCombinations is checked against the array squares. If there is a match, then there is a winner. Let's follow an example to make this more clear.

Say that Player X makes a winning move in row 2 column 0. The index of that position is 6. The board now looks like this:

The winning combination for Player X is [2,4,6]. The array squares is updated to: ["O", "", "X", "O", "X", "", "X", "", ""].

In the for loop, when [a,b,c] has the values of [2,4,6], the if statement in the for loop with be true since [2,4,6]all have the same value of X. The score of the winner needs to be updated, so announceWinner() is called to award the winning player.

If the game ends in a tie, there is no winner for that round. To check for tie games, we use a counter that increments by one every time a move is made on the board.

// Below the for loop in checkForWinner()
// Check if the game ends in a draw
this.counter++;
// The board is filled up and there is no winner
if(this.counter === 9){
  this.gameOver = true;
  this.newRound(null);
}

If the counter reaches 9, then the game ends in a draw because the player did not make a winning move in the last square of the board. When this happens, the method newRound() is called with a null argument since there is no winner.

Before we go to this method, let's go back to announceWinner().

// Update score for the winner
announceWinner = (winner) => {
  let pieces = {
    'X': this.state.xScore,
    'O': this.state.oScore
  }

  if(winner === 'X'){
    pieces['X'] += 1;
    this.setState({
      xScore: pieces['X']
    });
  }
  else{
    pieces['O'] += 1;
    this.setState({
      oScore: pieces['O']
    });
  }
  // End the game once there is a winner
  this.gameOver = true;
  this.newRound(winner);    
}

The parameter of this method is winner, which is the player that won the game. We check if the winner is 'X' or 'O' and increment the winner's score by one point. Since the game is over, the variable gameOver is set to true and the method newRound() is called.

Start a New Round

Player X has the option to play another round or to end the game and go back to the lobby.

The other player has told to wait until Player X decides what to do.

Once the Player X decides what to do, a message is published to the game channel to let the other player know. The UI is then updated.

newRound = (winner) => {
  // Announce the winner or announce a tie game
  let title = (winner === null) ? 'Tie game!' : `Player ${winner} won!`;
  // Show this to Player O
  if((this.props.isRoomCreator === false) && this.gameOver){
    Swal.fire({  
      position: 'top',
      allowOutsideClick: false,
      title: title,
      text: 'Waiting for a new round...',
      confirmButtonColor: 'rgb(208,33,41)',
      width: 275,
      customClass: {
          heightAuto: false,
          title: 'title-class',
          popup: 'popup-class',
          confirmButton: 'button-class',
      } ,
    });
    this.turn = 'X'; // Set turn to X so Player O can't make a move 
  } 

  // Show this to Player X
  else if(this.props.isRoomCreator && this.gameOver){
    Swal.fire({      
      position: 'top',
      allowOutsideClick: false,
      title: title,
      text: 'Continue Playing?',
      showCancelButton: true,
      confirmButtonColor: 'rgb(208,33,41)',
      cancelButtonColor: '#aaa',
      cancelButtonText: 'Nope',
      confirmButtonText: 'Yea!',
      width: 275,
      customClass: {
          heightAuto: false,
          title: 'title-class',
          popup: 'popup-class',
          confirmButton: 'button-class',
          cancelButton: 'button-class'
      } ,
    }).then((result) => {
      // Start a new round
      if (result.value) {
        this.props.pubnub.publish({
          message: {
            reset: true
          },
          channel: this.props.gameChannel
        });
      }

      else{
        // End the game
        this.props.pubnub.publish({
          message: {
            endGame: true
          },
          channel: this.props.gameChannel
        });
      }
    })      
  }
 }

If the message is reset, then all the state values and variables, except the score for the players, are reset to their initial values. Any modals that are still open are closed and a new round starts for both players.

For the message endGame, all the modals are closed and the method endGame() is called. This method is in App.js.

// Reset everything
endGame = () => {
  this.setState({
    piece: '',
    isPlaying: false,
    isRoomCreator: false,
    isDisabled: false,
    myTurn: false,
  });

  this.lobbyChannel = null;
  this.gameChannel = null;
  this.roomId = null;  

  this.pubnub.unsubscribe({
    channels : [this.lobbyChannel, this.gameChannel]
  });
}

All the state values and variables are reset to their initial values. The channel names are reset to null because a new name is generated every time a player creates a room. Since the channel names won't be useful anymore, the players unsubscribe from both the lobby and the game channel. The value of isPlaying is reset to false, so the game component will be replaced with the lobby component.

The last method to include in App.js is componentWillUnmount(), which unsubscribes the players from both channels.

componentWillUnmount() {
  this.pubnub.unsubscribe({
    channels : [this.lobbyChannel, this.gameChannel]
  });
}

This is all we need to do for the game to work! You can get the CSS file for the game in the repo. Now, let's get the game up and running.

Run the Game

There are a couple of small steps we need to do before running the game. First, we need to enable the PubNub Presence feature because we use it to get the number of people in the channel (we used withPresence when subscribing to the lobby channel). Go to the PubNub Admin Dashboard and click on your application. Click on Keyset and scroll down to Application add-ons. Toggle the Presence switch to on. Keep the default values the same.

To install the three dependencies used in the app and to run the app, you can run the script dependencies.sh that's in the root directory of the app.

# dependencies.sh
npm install --save pubnub pubnub-react
npm install --save shortid
npm install --save sweetalert2

npm start

In the terminal, go to the app's root directory and type the following command to make the script executable:

chmod +x dependencies.sh

Run the script with this command:

./dependencies.sh

The app will open in http://localhost:3000 with the lobby component displaying.

Open another tab, or preferably window, and copy and paste http://localhost:3000. In one window, create a channel by clicking the 'Create' button. A modal will pop up displaying the room id. Copy and paste that id. Go to the other window and click the 'Join' button. When the modal pops up, type the room id in the input field and press the 'Okay' button.

Once the players are connected, the game will start. The window you used to create the channel makes the first move. Press any square on the board and see as the piece X is displayed on the board in realtime for both windows. If you try to press another square in the same board, nothing will happen because it's no longer your turn to make a move. In the other window, press any square on the board and the piece O is placed in the square.

Keep on playing until there is a winner or a tie. A modal is then displayed announcing the winner of the round, or announcing that the game ended in a tie. In the same modal, Player X will have to decide whether to continue playing or to exit the game. The modal for Player O will tell them to wait for a new round.

Everything, except the score, is reset if Player X continues the game. Otherwise, both players are taken back to the lobby where they can create or join new channels. Check out this video for a game demo.

Create a Native Mobile Version

Now that you've got your game working beautifully in web browsers, let's take it mobile! Check out how to build a Multiplayer Tic Tac Toe Game in React Native for Android and iOS. And if you want to build more realtime games and want to know how PubNub can help you with that, check out the multiplayer gaming tutorials.

Multiplayer Tic Tac Toe Game in React Native for iOS and Android: Player Turns and Deployment

Oscar Castro — Wed, 24 Jul 2019 17:13:51 +0000

Welcome to Part Two of our tutorial series on building a mobile multiplayer tic tac toe game with React Native and PubNub. In this section, we will work on the actual game itself and testing the game using two methods.

If you haven't already, check out and go through Part One before working on this section, as we initialized the project and set up the lobby.

You can check out the complete project in the GitHub repository.

Implementing the Game Component

From the project root directory, go to src/components and create a new file named Game.js. All the game logic will be inside of this file. Add the following code to the file:

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableHighlight,
  Alert
} from 'react-native';

import range from 'lodash';
const _ = range;

export default class Game extends Component {

  constructor(props) {
    super(props);   

    // Winning combinations
    this.possible_combinations = [
      [0, 3, 6],
      [1, 4, 7],
      [0, 1, 2],
      [3, 4, 5],
      [2, 5, 8],
      [6, 7, 8],
      [0, 4, 8],
      [2, 4, 6]
    ];

    // Corresponds to the square number on the table
    this.ids = [
      [0, 1, 2],
      [3, 4, 5],
      [6, 7, 8]
    ];

    // For the 3x3 table
    this.rows = [
      _.range(3).fill(''),
      _.range(3).fill(''),
      _.range(3).fill(''),
    ];

    this.state = {
      moves: _.range(9).fill(''),
      x_score: 0,
      o_score: 0,
    }
    this.turn = 'X' // Changes every time a player makes a move
    this.game_over = false; // Set to true when the game is over
    this.count = 0; // used to check if the game ends in a draw
  }
}

We do several things in the base constructor:

First, we set up an array of possible combinations to win the game. If a player matches with any of the combinations, that player is the winner of the game.
Second, we set up another array named ids that labels every square of the table with a unique id to check if a square has been occupied or not.
Then, we set up rows which contain three empty arrays with each size of three.
After, for the state objects, we initialize moves to be an array with empty string values and initialize the score for both players to 0. The array moves will be used to check if there is a winner, as we will see later on.
Finally, we add three variables, turn, game_over and count that will be useful throughout the game.

Setting up the UI

Let's set up the UI for the component, which includes the table and the current score and username for each player. Also, include the styles.

render() {
  return (
    <View style={styles.table_container}>
      <View style={styles.table}>
        {this.generateRows()}
      </View>

      <View style={styles.scores_container}>
        <View style={styles.score}>
          <Text style={styles.user_score}>{this.state.x_score}</Text>
          <Text style={styles.username}>{this.props.x_username} (X)</Text>
        </View>

        <View style={styles.score}>
          <Text style={styles.user_score}>{this.state.o_score}</Text>
          <Text style={styles.username}>{this.props.o_username} (O)</Text>
        </View>
      </View>               
    </View>
  );
 }
}

const styles = StyleSheet.create({
  table_container: {
    flex: 9
  },
  table: {
    flex: 7,
    flexDirection: 'column',
    color: 'black'
  },
  row: {
    flex: 1,
    flexDirection: 'row',
    borderBottomWidth: 1,
  },
  block: {
    flex: 1,
    borderRightWidth: 1,
    borderColor: '#000',
    alignItems: 'center',
    justifyContent: 'center'
  },
  block_text: {
    fontSize: 30,
    fontWeight: 'bold',
    color: 'black'
  },
  scores_container: {
    flex: 2,
    flexDirection: 'row',
    alignItems: 'center'
  },
  score: {
    flex: 1,
    alignItems: 'center',
  },
  user_score: {
    fontSize: 25,
    fontWeight: 'bold',
    color: 'black'
  },
  username: {
    fontSize: 20,
    color: 'black'
  }
});

Notice that for the username, we use this.props since we get the value from App.js. As a refresher, here are the values that we'll be using from App.js.

<Game 
  pubnub={this.pubnub}
  channel={this.channel} 
  username={this.state.username} 
  piece={this.state.piece}
  x_username={this.state.x_username}
  o_username={this.state.o_username}
  is_room_creator={this.state.is_room_creator}
  endGame={this.endGame}
/>

To build the tic tac toe table, we call the method generateRows(), which calls generateBlocks(). These methods are responsible for creating the table.

generateRows = () => {
  return this.rows.map((row, col_index) => {
    return (
      <View style={styles.row} key={col_index}>
        {this.generateBlocks(row, col_index)}
      </View>
    );
  });
}

generateBlocks = (row, row_index) => {
  return row.map((block, col_index) => {
    let id = this.ids[row_index][col_index];
    return (
      <TouchableHighlight 
        key={col_index} 
        onPress={
          this.onMakeMove.bind(this, row_index, col_index)
        } 
        underlayColor={"#CCC"} 
        style={styles.block}>

        <Text style={styles.block_text}>
          {
            this.state.moves[id]
          }
        </Text>

      </TouchableHighlight> 
    );
  });
}

We use TouchableHightlight so players can touch any square on the table. In order for their corresponding piece to be placed on that square, set the block text to be the value of this.state.moves[id], which will contain the correct piece for the player that made the move. This will be explained more below.

Adding the Logic

Make a call to onMakeMove() with row_index, the row that the piece was placed on, and col_index, the column the piece was placed on, as the method arguments.

onMakeMove(row_index, col_index) {
  let moves = this.state.moves;
  let id = this.ids[row_index][col_index];

  // Check that the square is empty
  if(!moves[id] && (this.turn === this.props.piece)){ 
    moves[id] = this.props.piece;

    this.setState({
      moves
    });

    // Change the turn so the next player can make a move
    this.turn = (this.turn === 'X') ? 'O' : 'X';

    // Publish the data to the game channel
    this.props.pubnub.publish({
      message: {
        row: row_index,
        col: col_index,
        piece: this.props.piece,
        is_room_creator: this.props.is_room_creator,
        turn: this.turn
      },
      channel: this.props.channel
    });
    this.updateScores.call(this, moves);
  }
}

We get the integer id of the square pressed by getting the value of this.ids[row_index][col_index]. The if statement checks if the square the player touched is empty and if it's that player's current turn to place their piece. We ignore the touch if these two conditions are not met. If the conditions are met, we add the piece to the array moves with id as the index.

For example, if the room creator makes a move on row 0 column 2 on the table, then this.ids[0][2] returns the integer 2.

this.ids = [
  [0, 1, 2],
  [3, 4, 5],
  [6, 7, 8]
];

The piece X is added to the array moves on the second index: ["", "", "X", "", "", "", "", "", ""]. Later in updateScores(), we will see how moves is used to check for a winner.

Getting back to onMakeMove(), after we change the state for moves, we update turns so the next player can make their move. We publish the data to the game channel, such as the piece that moved and the position it was placed at. The other player's table updates with the current data. Finally, make a call to updateScores() to check if there is a winner or if the game ended in a draw.

Before we get to updateScores(), implement the channel listener in componentDidMount() to listen to incoming messages from the channel.

componentDidMount() {
  // Listen for messages in the channel
  this.props.pubnub.getMessage(this.props.channel, (msg) => {
    // Add the other player's move to the table
    if(msg.message.turn === this.props.piece){
      let moves = this.state.moves;
      let id = this.ids[msg.message.row][msg.message.col];

      moves[id] = msg.message.piece;

      this.setState({
        moves
      });

      this.turn = msg.message.turn;
      this.updateScores.call(this, moves);
    }
  });
}

Both players will receive this message since both are subscribed to the same channel. When the message is received, we do several of the same steps we did for onMakeMove(), in particular, update the table and check if there's a winner. But, we don't want the player that made the move to do the steps over again. So, we do an if statement to make sure that only the opposite player performs the steps. We do so by checking if turn (which is either X or O) matches the player's piece.

Let's now implement the method updateScores().

updateScores = (moves) => {
 // Iterate the double array possible_combinations to check if there is a winner
 for (let i = 0; i < this.possible_combinations.length; i++) {
    const [a, b, c] = this.possible_combinations[i];
    if (moves[a] && moves[a] === moves[b] && moves[a] === moves[c]) {
      this.determineWinner(moves[a]);   
      break;
    }
  }
}

To determine if there is a winner, we have to iterate possible_combinations to check if any of the combinations are present in the table. This is where the array moves_comes in handy. We use [a,b,c]_ to get each array of possible_combinations. Then check if that matches any pattern in moves. To make this more clear, let's follow an example.

Let's say the room creator makes a winning move on row 2 column 2, with an id of 8, on the table. The table will look like the image below:

As you can see, the winning moves are in positions 2, 5, and 8, according to their id's. The array moves is now: ["O", "", "X", "", "O", "X", "", "", "X"]. In updateScores(), we iterate through every possible winning combination.

For this example, the winning combination is [2,5,8]. So when [a,b,c] has the values of [2,5,8], the if statement in the for loop with be true since [2,5,8] all have the same value of X. A call is made to determineWinner() to update the score of the winning player, which in this case, is the room creator. Before we get to that method, let's finish the rest of updateScores().

If no winner is found and the game ends in a draw, then neither player gets a point. To check if there is a draw, add the following code below the above for loop.

this.count++;
// Check if the game ends in a draw
if(this.count === 9){
  this.game_over = true;
  this.newGame();   
}

Every time a square is pressed on the table, updateScores() is called. If no winner is found, then count increments by one. If the count is equal to 9, the game ends in a draw. This occurs when a player makes a final move on the last square of the table that is not a winning move, so count is incremented from 8 to 9. The method newGame() is then called.

We will get back to newGame() in a bit. Let's first implement determineWinner().

determineWinner = (winner) => {
  var pieces = {
    'X': this.state.x_score,
    'O': this.state.o_score
  }

  // Update score for the winner
  if(winner === 'X'){
    pieces['X'] += 1;
    this.setState({
      x_score: pieces['X']
    });
  }
  else{
    pieces['O'] += 1;
    this.setState({
      o_score: pieces['O']
    });
  }
  // End the game once there is a winner
  this.game_over = true;
  this.newGame();   
}

We check if the winner is the room creator or the opponent and we increment the winner's current score by 1 point. Once the score has been updated, we set game_over to true and call the method newGame().

Game Over

new_game = () => {
  // Show this alert if the player is not the room creator
  if((this.props.is_room_creator === false) && this.game_over){
    Alert.alert('Game Over','Waiting for rematch...');
    this.turn = 'X'; // Set turn to X so opponent can't make a move
  }

  // Show this alert to the room creator
  else if(this.props.is_room_creator && this.game_over){
    Alert.alert(
      "Game Over!", 
      "Do you want to play another round?",
      [
        {
          text: "Nah", 
          onPress: () => {
            this.props.pubnub.publish({
              message: {
                gameOver: true
              },
              channel: this.props.channel
            });             
          },
          style: 'cancel'
        },
        {
          text: 'Yea', 
          onPress: () => {
            this.props.pubnub.publish({
              message: {
                reset: true
              },
              channel: this.props.channel
            });
          }  
        },
      ],
      { cancelable: false } 
    );
  }
}

We show two different alerts to the room creator and the opponent. The alert for the room creator has a message asking them if they want to play another round or exit the game.

For the opponent, we show them an alert with a message telling them to wait for a new round, which will be decided by the room creator.

If the room creator decides to end the game, then the message gameOver is published to the channel; else the message restart is published to the channel. We take care of these messages by adding some more logic inside of getMessage() in componentDidMount().

componentDidMount() {
  // Listen for messages in the channel
  this.props.pubnub.getMessage(this.props.channel, (msg) => {
    ...

    if(msg.message.reset){
      this.setState({
        moves: _.range(9).fill('')
      });
      this.turn = 'X';
      this.game_over = false;
    }

    if(msg.message.gameOver){
      this.props.pubnub.unsubscribe({
        channels : [this.props.channel]
      });
      this.props.endGame();
    }
  }); 
}

If the room creator wants to play another round, then we reset the table as it was at the start of the game. We do so by setting the array moves to its original state. We reset turn to be X again and reset game_over to false.

But if the room creator decides to end the game, then both players unsubscribe from the current channel and a call to the method endGame() is made. This method will end the game and take the players back to the lobby since is_playing is reset to false. The method endGame() is a prop from App.js, so we have to go back to App.js to implement it.

// In App.js
endGame = () => {
  // Reset the state values
  this.setState({
    username: '',
    rival_username: '',
    is_playing: false,
    is_waiting: false,
    isDisabled: false
  });

  // Subscribe to gameLobby again on a new game
  this.channel = null;
  this.pubnub.subscribe({
    channels: ['gameLobby'],
    withPresence: true
  });
}

We reset all the state values back to its original state and reset the value of channel to null since there will be a new room_id when the Create button is pressed again. Finally, subscribe again to the "gameLobby" channel so the players can continue playing tic tac toe if they choose to.

That is all we need for our React Native tic tac toe game to work! Now, it's time to test the app and play around with it.

Testing the App

Before running the app, we need to enable the Presence feature to detect the number of people in the channel. To turn it on, go to the PubNub Admin Dashboard and click on your application. Click on Keyset and scroll down to Application add-ons. Toggle the Presence switch to on. Keep the default values the same.

To run the app, make sure you are in the project folder and enter the following command in the terminal:

react-native run-ios

This command will open the simulator and run the app. You can also run the app on the Android emulator by replacing run-ios with run-android (Note: Make sure you open an emulator first before running the command). Once the simulator opens, the lobby UI will be displayed.

We can test the app by either using PubNub's Debug Console or by running the React app version of the tic tac toe game. The React app is already connected to the React Native app and the necessary logic is taken care of. All you need to do is insert the same Pub/Sub keys from the React Native app.

This section will be broken into two parts to go into detail on how to test the app using the above two methods. For each section, there will be a video that goes over what we did in that section. If you prefer to watch the video instead of reading, go to the end of the section.

Play the Game using the Debug Console

In this section, we will use the debug console to create a channel and the simulator to join that channel. Make sure you have the app opened in the simulator.

To get into the debug console, go the PubNub Admin Dashboard and click on Debug Console that's on the left sidebar.

On the top bar, select the app and the keys you are using for this project.

You should now see a panel where you can enter the channel name. Change the default channel to "gameLobby" and add the client.

Once the client has been created, replace the default message with:

{"is_room_creator":true, "username":"Player X"}

You can put any username, but for this example, we will be using Player X for the room creator and Player O for the opponent. Click the Send button and you should see the message in the console. Here is a screenshot of what the debug console should look like:

Next, we have to create a new channel for the game. Go to the panel next to the current panel we used and change the default channel to "tictactoe--gameChannel" (Note: While we chose a fixed channel name for the game, in the app if the player presses the Create button, a random channel name will be generated).

Add the client to connect to the new channel. Go back to the previous panel where we sent the first message and unsubscribe from that channel as we won't be using it anymore.

Now, go to the simulator and for the username type Player O. Click the "Join" button and enter the channel name "gameChannel" (Note: "tictactoe--" will be appended to the channel name, so you don't have to include that).

Once you press OK, the lobby component will be replaced with the game component and the table UI will be displayed. Since we used the simulator to join the channel, you won't be able to do anything on the table since the room creator makes the first move. So, on the debug console, replace the default message with:

{"row":0, "col":1, "piece":"X", "is_room_creator":true, "turn":"O"}

Make sure to capitalize both "X" and "O". Send the above message and you should see an "X" on the simulator's table. Here is a screenshot of the debug console and the simulator:

Now you are able to make a move in the simulator. To continue playing, only change the values of row and col in the debug console, when it's the room creator's turn, to place "X" in different parts of the table. If a player has won that round, the score for the winning player will update in the simulator. An alert message in the simulator will notify the opponent to wait for a new round.

If you want to play another round, type the following message in the debug console:

{"reset":true}

The above message will reset the table in the simulator for a new round. To end the game, type the following message instead:

{"gameOver":true}

Ending the game will send the opponent back to the lobby.

Check out the video below to review what we did for this section.

You might have noticed that there are a lot of manual steps when using the debug console. In the app itself, a lot of the manual steps we did are automated, like unsubscribing from "gameLobby" or subscribing to a new channel for the game. We used the debug console because there might be some complications when running two simulators or emulators on your machine. The debug console is a better approach to simulate gameplay of the app.

Instead of the debug console, you could also use the React version of the app to simulate gameplay. By using the React app, you don't have to worry above manually running commands since everything will be automated, as it should be in the app.

Play the Game using the React App

We will use the simulator to create a channel and the React app to join that channel (Note: The React app is currently set up to only join channels and not create them). You can clone the React app from this repo. Once you open the project, go to the file Game.js and in the constructor, add the same Pub/Sub keys you used for the React Native app. That's all you have to edit for the React project.

Run the following command in the terminal to install the dependencies:

npm install

To run the app, type the following command in the terminal:

npm start

The app will open in http://localhost:3000 with an empty table and two input fields.

Go to the simulator and in the lobby, type Player X for the username and press the "Create" button to create a new room id. Go back to the browser and for the username field, type Player O. In the room name field, type the room id that was created in the simulator.

Once both fields are filled in, press the Submit button and the game will start for both players. Since the simulator is the room creator, press any square on the table to place an X. You should see the X in both the simulator and in the browser. Try pressing another square in the simulator's table and you will notice that nothing happens as it's the opponent's turn to make a move. In the browser, press any square to place an O.

Keep playing until someone wins or the game ends in a draw. If there is a winner, the winner will be announced in the browser along with the winning squares background color turned to green. In the simulator, the score for the winning player will update and an alert will ask the room creator if they want to play another round or exit the game.

If the room creator decides to play another round, both the simulator's and the browser's table will reset for the new round. If the room creator decides to exit the game, the room creator will be taken to the lobby while the browser resets the table. You can create a new channel in the simulator and in the browser you can join that new channel.

Check out the video below to review what we did for this section.

What's Next

If you want to see more examples on how to use PubNub for a React Native project, check out all our React Native tutorials. Or if you want to see the different ways that PubNub is used to power multiplayer games, check out our multiplayer gaming tutorials.

Multiplayer Tic Tac Toe Game in React Native for iOS and Android: Lobby and Joining

Oscar Castro — Wed, 24 Jul 2019 17:13:46 +0000

Tic tac toe is a classic paper-and-pencil game that we're all too familiar with. The rudimentary rules of tic tac toe are simple: two players, X and O, take turns placing their pieces in a square on a 3x3 table. A winner is declared when one of the two players places three of their pieces in a horizontal, vertical or diagonal row.

In this tutorial series, we will develop the classic tic tac toe game in React Native, and allow two players to play against one another in realtime. In this part (Part One), we'll set up the lobby where players will be able to enter their username, then create or join a room to play. In Part Two, we'll implement and test the game.

Multiplayer Gaming and PubNub

Our aim is to provide a connected shared experience for players, where they can play with their friends anytime, anywhere around the world. To do so, we'll use PubNub to power our game's realtime infrastructure, so we'll just focus on developing a great experience for the players.

PubNub provides a secure, scalable and reliable realtime infrastructure to power any application through its global Data Stream Network. With over 70+ SDKs supporting most of the programming languages, PubNub makes it easy to send and receive messages on any device in under 100 milliseconds.

We use the PubNub React SDK to connect two players to a game channel where they will play against each other. Each move the player makes will be published to the channel, as a JSON payload, so the other player's table updates with the current move. By updating the table in realtime for each move, players will feel as if they were playing next to each other!

You can check out the complete project in the GitHub repository.

Tutorial Overview

Our app will work on both Android and iOS (the beauty of React Native). This is how it will look once we're finished:

We add a lobby where players can join or create a room. If a player creates a room, they become the room creator and waits for another player to join their room.

If another player wants to join that same room, they enter the room name in the alert prompt. That player becomes the opponent.

If the opponent tries to join a room that already has two people, they will not be able to join. But, if the room only has one player, the opponent will be able to join the room and the game will start for both players. Once the game starts, the tic tac toe board is displayed, along with the initialized score of the players.

If the game ends in a draw, then neither player gets a point. But if there's a winner, the winner's score is updated. The room creator gets an alert asking them if they want to play another round or exit the game. If the room creator continues the game, the board will reset for the new round. If the room creator decides to exit the game, both players will return to the lobby.

Before we can start implementing the game, there are a few requirements you need to take care of.

Setting up the App

If you don’t already have React Native set up on your machine, then follow the Get Started instructions. Make sure you click on the second tab, React Native CLI Quickstart, and choose your Target OS. Follow the rest of the instructions in the documentation to install the dependencies.

In your terminal, go to the directory you want to save your project in and type the following to create a new application:

react-native init ReactNativeTicTacToe

Next, you need to install five dependencies and link them to the app you just created. To make this easy, add the following script file, dependencies.sh, to your app's root directory:

npm install --save pubnub pubnub-react
npm install --save react-native-prompt-android
npm install --save react-native-spinkit
npm install --save shortid
npm install --save lodash
react-native link

Make the script executable with the command:

chmod +x dependencies.sh

Run the script with:

./dependencies.sh

Now that your machine is set up, sign up for a free PubNub account. You can get your unique pub/sub keys in PubNub Admin Dashboard.

Now that we got the requirements out of the way, let's start coding!

Initializing the Project

Create a file named index.js in your app's root directory and copy the following code:

import {AppRegistry} from 'react-native';
import App from './App.js';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

Next, create a new file named App.js. This is the main file for the game and it contains the components for the lobby and the table. To make App.js easy to follow along, we will break it into separate parts and go into detail for each part. Let’s first import the components and dependencies that will be used throughout the project.

import React, { Component } from 'react';
import PubNubReact from 'pubnub-react';
import {
  Platform,
  StyleSheet,
  View,
  Alert,
  Text,
} from 'react-native';

import Game from './src/components/Game';
import Lobby from './src/components/Lobby';
import shortid  from 'shortid';
import Spinner from 'react-native-spinkit';
import prompt from 'react-native-prompt-android';

Next, add the base constructor where you will insert your Pub/Sub keys to connect to PubNub, initialize the local state objects and initialize the variables.

export default class App extends Component {
  constructor(props) {
    super(props);
    this.pubnub = new PubNubReact({
      publishKey: "ENTER_YOUR_PUBLISH_KEY_HERE",
      subscribeKey: "ENTER_YOUR_SUBSCRIBE_KEY_HERE"
    });

    this.state = {
      username: '',
      piece: '', // Creator of the room is 'X' and the opponent is 'O'
      x_username: '', // Username for the room creator
      o_username: '', // Username for the opponent
      is_playing: false, // True when the opponent joins a room channel
      is_waiting: false, // True when the room creator waits for an opponent
      is_room_creator: false, 
      isDisabled: false // True when the 'Create' button is pressed
    };

    this.channel = null;
    this.pubnub.init(this); // Initialize PubNub
  }
 }

We will go into more detail about each state object and variable later on. Also, make sure that you initialize PubNub after initializing the state.

Next, subscribe to the channel "gameLobby" when the component mounts.

componentDidMount() {
   this.pubnub.subscribe({
     channels: ['gameLobby']
   });
 }

The channel "gameLobby" is the main channel that players subscribe and publish to when they are in the lobby. We will add more logic to this method later. For now, let's take a look at the render method.

render() {
  return (
    <View style={styles.container}>
      <View style={styles.title_container}>
        <Text style={styles.title}>RN Tic-Tac-Toe</Text>
      </View>

      <Spinner 
        style={styles.spinner} 
        isVisible={this.state.is_waiting} 
        size={75} 
        type={"Circle"} 
        color={'rgb(208,33,41)'}
      />

      {
        !this.state.is_playing &&
        <Lobby 
          username={this.state.name} 
          onChangeUsername={this.onChangeUsername}
          onPressCreateRoom={this.onPressCreateRoom} 
          onPressJoinRoom={this.onPressJoinRoom}
          isDisabled={this.state.isDisabled}
        />
      }

      {
          this.state.is_playing &&
          <Game 
            pubnub={this.pubnub}
            channel={this.channel} 
            username={this.state.username} 
            piece={this.state.piece}
            x_username={this.state.x_username}
            o_username={this.state.o_username}
            is_room_creator={this.state.is_room_creator}
            endGame={this.endGame}
          />
        }
    </View>
  );
}

The Lobby component is shown first because this.state.is_playing is initialized to false. Once an opponent has joined a room channel that is waiting for another player, then this.state.is_playing is set to true and the Lobby component will be replaced by the Game component. The Spinner component is displayed to the room creator as long as the room creator is waiting for another player to join the game.

Make sure to add the styles at the end:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: 'white',
  },
  spinner: {
    flex: 1,
    alignSelf: 'center',
    marginTop: 20,
    marginBottom: 50
  },
  title_container: {
    flex: 1,
    marginTop: 18
  },
  title: {
    alignSelf: 'center',
    fontWeight: 'bold',
    fontSize: 30,
    color: 'rgb(208,33,41)'
  },
});

Before we finish the rest of App.js, let's take a look at the Lobby component.

Implementing the Lobby Component

In the lobby, players can enter their username and create or join a room. We implement the logic, such as saving the username and calling the right method when a button is pressed, in App.js. All the methods in the lobby component are used to style the buttons, so we won't go into detail for those methods. The only three methods we will go into detail is onChangeUsername(), onPressCreateRoom() and onPressJoinRoom(), which are passed in as props from App.js.

In the app's root directory, create a new folder named src and within that folder, create another folder named components. Inside of components, create a new file named Lobby.js. Add the following to the new file:

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  TextInput,
  TouchableHighlight
} from 'react-native';

export default class Lobby extends Component {
  constructor() {
    super();
    this.state = {
      pressCreateConfirm: false, // Set to true when the Create button is pressed
      pressJoinConfirm: false // Set to true when the Join button is pressed
     };
  }

  onHideUnderlayCreateButton = () => {
    this.setState({ pressCreateConfirm: false });
  }

  onShowUnderlayCreateButton = () => {
    this.setState({ pressCreateConfirm: true });
  }

  onHideUnderlayJoinButton = () => {
    this.setState({ pressJoinConfirm: false });
  }

  onShowUnderlayJoinButton = () => {
    this.setState({ pressJoinConfirm: true });
  }

  render() {
    return (        
      <View style={styles.content_container}>
        <View style={styles.input_container}>
          <TextInput
            style={styles.text_input}
            onChangeText={this.props.onChangeUsername}
            placeholder={" Enter your username"}
            maxLength={15}
            value={this.props.username}
          />
        </View>

        <View style={styles.container}>
          <View style={styles.buttonContainer}>
            <TouchableHighlight
              activeOpacity={1}
              underlayColor={'white'}
              style={
                this.state.pressCreateConfirm
                    ? styles.buttonPressed
                    : styles.buttonNotPressed
              }
                onHideUnderlay={this.onHideUnderlayCreateButton}
                onShowUnderlay={this.onShowUnderlayCreateButton}
                disabled={this.props.isDisabled}
                onPress={this.props.onPressCreateRoom}
              >
                <Text
                  style={
                  this.state.pressCreateConfirm
                      ? styles.cancelPressed
                      : styles.cancelNotPressed
                      }
                  >
                  Create
                </Text>
            </TouchableHighlight>
          </View>

          <View style={styles.buttonBorder}/>
            <View style={styles.buttonContainer}>
                <TouchableHighlight
                activeOpacity={1}
                underlayColor={'white'}
                style={
                  this.state.pressJoinConfirm
                      ? styles.buttonPressed
                      : styles.buttonNotPressed
                }
                  onHideUnderlay={this.onHideUnderlayJoinButton}
                  onShowUnderlay={this.onShowUnderlayJoinButton}
                  onPress={this.props.onPressJoinRoom}
                >
                  <Text
                    style={
                    this.state.pressJoinConfirm
                        ? styles.cancelPressed
                        : styles.cancelNotPressed
                        }
                    >
                    Join
                  </Text>
            </TouchableHighlight>
          </View>
        </View>
      </View>
    );
  }
}

This may look like a lot, but really, all we are doing here is setting up the username field and the two buttons. Like previously mentioned, the only logic we do is to style the buttons. In this case, the buttons background color, border color, and text color change when the button is pressed and unpressed.

Make sure to add the styles to the end of the file:

const styles = StyleSheet.create({
  content_container: {
    flex: 1,
  },
  input_container: {
    marginBottom: 20,
  },
  container: {
    flexDirection: 'row',
    paddingLeft: 11,
    paddingRight: 11
  },
  buttonContainer: {
    flex: 1,
    textAlign: 'center',
  },
  buttonBorder: {
    borderLeftWidth: 4,
    borderLeftColor: 'white'
  },
  text_input: {
    backgroundColor: '#FFF',
    height: 40,
    borderColor: '#CCC', 
    borderWidth: 1
  },
  buttonPressed:{
    borderColor: 'rgb(208,33,41)',
    borderWidth: 1,
    padding: 10,
    borderRadius: 5
  },
  buttonNotPressed: {
    backgroundColor: 'rgb(208,33,41)',
    borderColor: 'rgb(208,33,41)',
    borderWidth: 1,
    padding: 10,
    borderRadius: 5
  },
  cancelPressed:{
    color: 'rgb(208,33,41)',
    fontSize: 16,
    textAlign: 'center',
    alignItems: 'center',
  },
  cancelNotPressed: {
    color: 'white',
    fontSize: 16,
    textAlign: 'center',
    alignItems: 'center',
  },
});

Saving the Username

Whenever the player types in the username field, onChangeUsername() is called. This method, along with the rest of the methods in this post, is found in App.js.

onChangeUsername = (username) => {
    this.setState({username});
}

We save the username in the username state and limit the number of characters to 15 characters so the username won't be too long. You can increase or decrease this number if you want to.

Creating the Room Channel

Next, let's implement the method for onPressCreateRoom(), which is called when the user presses the Create button.

onPressCreateRoom = () => {
  if(this.state.username === ''){
    Alert.alert('Error','Please enter a username');
  }

We first check that the username field is not empty; if so, we alert the player to enter a username. A random room ID is generated and truncated to 5 characters. The ID is then appended to 'tictactoe--', which will be used as the game channel that players will subscribe and publish to. Below the if statement, add the following code:

else{
      let roomId = shortid.generate(); // Random channel name generated
      let shorterRoomId = roomId.substring(0,5); // Truncate to a shorter string value
      roomId = shorterRoomId;
      this.channel = 'tictactoe--' + roomId;
      this.pubnub.subscribe({
        channels: [this.channel],
        withPresence: true
      });
   ...

In order to obtain the number of people in the channel, we use Presence. We care about the channel occupancy because we only want two people to be connected to one channel at a time, as tic tac toe is a game for two people. That's why we set withPresence to true.

Once the room creator subscribes to the new channel, we alert them to share the room ID with their friends.

Add the following code to the else statement we used above:

// alert the room creator to share the room ID with their friend
Alert.alert(
  'Share this room ID with your friend',
  roomId,
  [
    {text: 'Done'},
  ],
  { cancelable: false }
);

Since we want to change the state for certain objects, we use setState() to do so. Below the alert and still in the else statement, add the following:

this.setState({
      piece: 'X',
      is_room_creator: true,
      is_waiting: true,
      isDisabled: true
    });

    this.pubnub.publish({
      message: {
        is_room_creator: true,
        username: this.state.username
      },
      channel: 'gameLobby'
    });  
  } // Close the else statement

After changing the state of four objects, the boolean is_room_creator and the room creator's username will be published to "gameLobby". The Spinner component will be displayed to the room creator while they wait for someone to join the game.

Getting back to componentDidMount(), we need to set up a listener to listen for certain messages that arrive in "gameLobby".

componentDidMount(){
  ...
  this.pubnub.getMessage('gameLobby', (msg) => {
    // Set username for Player X
    if(msg.message.is_room_creator){
      this.setState({
        x_username: msg.message.username
      })
    }
   ...
  });
}

We want to get the room creator's username, so we do an if statement to check if the message arrived is msg.message.is_room_creator. If so, we change the state, x_username, to the room creators username.

Joining the Room Channel

We will now implement the last method, onPressJoinRoom().

onPressJoinRoom = () => {
  if(this.state.username === ''){
    Alert.alert('Error','Please enter a username');
  }
  else{
    // Check for platform
    if (Platform.OS === "android") {
      prompt(
        'Enter the room name',
        '',
        [
         {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
         {text: 'OK', onPress: (value) =>  
         (value === '') ? '' : this.joinRoom(value)},
        ],
        {
            type: 'default',
            cancelable: false,
            defaultValue: '',
            placeholder: ''
          }
      );      
    }
    else{
      Alert.prompt(
        'Enter the room name',
        '',
        [
         {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
         {text: 'OK', onPress: (value) =>  
         (value === '') ? '' : this.joinRoom(value)},
        ],
        'plain-text',
      );
    }  
  }
}

Again, we make sure that the username field is not empty. If it's not empty, then a prompt is shown to the opponent to enter the room name.

Since we want to take into consideration both platforms (iOS and Android), we check which platform the app is running on and use the appropriate prompt. For Android, we use the prompt dependency react-native-prompt-android. We do so since Alert.prompt() is only supported for iOS devices. Essentially, both prompts accomplish the same goal: call joinRoom(value), where value is the room name and cannot be an empty value, when OK is pressed.

joinRoom = (room_id) => {
  this.channel = 'tictactoe--' + room_id;

  // Check that the lobby is not full
  this.pubnub.hereNow({
    channels: [this.channel], 
  }).then((response) => { 
    // If totalOccupancy is less than or equal to 1, then the player can't join a room since it has not been created
    if(response.totalOccupancy <= 1){
      Alert.alert('Lobby is empty','Please create a room or wait for someone to create a room to join.');
    }
    // Room is available to join
    else if(response.totalOccupancy === 2){
      this.pubnub.subscribe({
        channels: [this.channel],
        withPresence: true
      });

      this.setState({
        piece: 'O',
      });  

      this.pubnub.publish({
        message: {
          readyToPlay: true, // Game can now start
          not_room_creator: true,
          username: this.state.username
        },
        channel: 'gameLobby'
      });
    } 
    // Room already has two players
    else{
      Alert.alert('Room full','Please enter another room name');
    }
  }).catch((error) => { 
      console.log(error)
  });
}

We don't want more than two people to be in the same game channel, so we use the hereNow() function to check the total occupancy for the channel. If the total occupancy is less than 1, the player is trying to join a room that has not been created, or there is a typo in the room name.

If the total occupancy is 2, then there is a player in the channel, the room creator, and is waiting for another player to start the game.

If the total occupancy is greater than 2, then the player is trying to join a room with a game in progress, so an alert tells the player that the room is full and to join another room.

Once the opponent successfully subscribes to the game channel, a message is published with the opponent's username and readyToPlay set to true. Since the player is not the room creator, not_room_creator is set to true.

Finishing the Lobby Component

We will add the last logic for the listener in componentDidMount().

componentDidMount() {
  ...
  this.pubnub.getMessage('gameLobby', (msg) => {
    ...

    else if(msg.message.not_room_creator){
      this.pubnub.unsubscribe({
        channels : ['gameLobby']
      }); 
      // Start the game
      this.setState({
        o_username: msg.message.username,
        is_waiting: false,
        is_playing: true,
      });  
    }
  });
}

Both players will unsubscribe from "gameLobby" since they are subscribed to the game room channel. In setState(), we do three things: set the opponents username to o_username, set is_waiting to false so the Spinner component will disappear from the room creator's view, and set is_playing to true so the game between the two players can start.

The last method we need to include is componentWillUnmount().

componentWillUnmount() {
  this.pubnub.unsubscribe({
    channels : ['gameLobby', this.channel]
  });
}

This method is called when the component is unmounted and destroyed. We unsubscribe from "gameLobby," if the user is still subscribed to that channel, and this.channel, the channel the player is subscribed to for the game.

Now that we have finished the logic for the lobby, we will work on setting up the table, adding the game logic and implementing realtime interactivity between the players. On to Part Two!

How to Build a Group Chat App with Vue.js

Oscar Castro — Mon, 10 Jun 2019 06:04:25 +0000

Chat is everywhere and has ascended to one of the most important communication mediums across our daily lives. The number of chat app use cases is vast and continues to grow. And with today's technological advancements, we expect our messages to send and receive in realtime, instantaneously. It's not a nice-to-have, it's a requirement.

There are thousands of ways to build a chat app, and there are many things to consider: infrastructure, scalability, reliability, and security to name a few. With a vast amount of services, frameworks, and technologies to choose from, making that decision can be overwhelming!

In this tutorial, we're going to build a realtime group chat app in Vue.js. We'll power our app using PubNub, which takes care of the heavy work for us; all we have to worry about is developing the app, not the underlying infrastructure.

Tutorial Overview

Our application will send messages to all connected users in the group chat using publish, and receive messages using subscribe. Our messages will be stored using history, so users can see past or missed messages. To do all this, we will use the PubNub Vue.js SDK. This tutorial is broken into two sections: Publish/Subscribe (Pub/Sub) and History.

You can check out the complete project in the GitHub repository.

Setting up Pub/Sub Messaging

Before we start working on the app, sign up for a free PubNub account. You can get your unique pub/sub keys in the Admin Dashboard.

Next, we need to install two dependencies: vuex and pubnub-vue. We can use NPM to do so.

npm install vuex --save
npm install pubnub-vue --save

Since the PubNub Vue.js SDK is a wrapper of the PubNub JavaScript SDK, it offers all the same features. A few extra features, such as Trigger Events, are added to simplify the integration with Vue. One trigger event we'll be using is $pnGetMessage. We use $pnGetMessage with a reactive property so messages display as soon as they are received. To subscribe to a channel we use $pnSubscribe and to publish to a channel we use $pnPublish.

Initialize the PubNub Client API

In the main.js file, create a unique UUID for each user and replace the pub/sub keys with your keys. We include two plugins: PubNubVue and Vuex.

import Vue from 'vue'
import App from './App'
import store from './store';
import PubNubVue from 'pubnub-vue'

Vue.config.productionTip = false;

const publish_Key = 'YOUR_PUBLISH_KEY_HERE';
const subscribe_Key = 'YOUR_SUBSCRIBE_KEY_HERE';

// Make a unique uuid for each client
const myUuid = fourCharID();
const me = {
  uuid: myUuid,
};

try{
  if(!publish_Key || !subscribe_Key){
    throw 'PubNub Keys are missing.';
  }
}
catch(err){
  console.log(err);
}

Vue.use(PubNubVue, {
  subscribeKey: subscribe_Key,
  publishKey: publish_Key,
  ssl: true
}, store);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  store,
  components: { App },
  template: '<App/>',
  created
})

Next, we generate a random 4 character UUID for the user by making a call to the function fourCharID.

function fourCharID() {
  const maxLength = 4;
  const possible = 'abcdef0123456789';
  let text = '';

  for (let i = 0; i < maxLength; i++) {
    text += possible.charAt(Math.floor(Math.random() * possible.length));
  }

  return text;
}

It's recommended to use a standard 128-bit UUID in production apps, but the UUID can be a plain string as well, as is the case for this app. The constant ‘me’ holds the UUID. To commit the constant to the Vuex store, we add the function created.

function created(){
  this.$store.commit('setMe', {me});
}

This function will execute when the Vue instance is created.

Setting Up the Vuex Store

For the store.js file, we set up the centralized store that holds and manages the application state. The file will contain a global state object along with a collection of mutation and getter functions. Since outside components cannot access the state directly, we commit a mutation every time we need to update the state.

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const state = {
  me: {},
};

const mutations = {
  setMe(state, {me}) {
    state.me = me;
  },
}

const getters = {
  getMyUuid: (state) => state.me.uuid,
};

export default new Vuex.Store({
  state,
  getters,
  mutations,
});

The getMyUuid getter is referenced in three of the components and is a global getter for the UUID.

ChatContainer Component

The ChatContainer component is the highest parent node of the UI. The markup includes custom HTML tags for the children components of ChatContainer, as well as Vue specific markup to reactively render data.

<template>
  <div class="chat-container">
    <div class="heading">
      <h1>{{title + '- User: ' + uuid }}</h1>
    </div>
    <div class="body">
      <div class="table">
        <chat-log></chat-log>
        <message-input></message-input>
      </div>
    </div>
  </div>
</template>

The h1 curly braces bind two JavaScript variables, title and uuid, reactively evaluates the expressions and displays the text output as the text content in the tag. The variable title gets its value from the function data.

data() {
  return {
    title: 'PubNub & Vue Global Chat',
  };
},

Before we discuss the variable uuid, let’s discuss the imports and the two properties above data.

import ChatLog from '@/components/ChatLog';
import MessageInput from '@/components/MessageInput';
import {mapGetters} from 'vuex';

Since we are using the chat-log and message-input tags in the markup, we need to import the ChatLog and MessageInput components so the tags are rendered properly. We also import mapGetters to get the UUID from the store.

export default {
  name: 'chat-container',
  components: {
     ChatLog,
     MessageInput,
  },

The name property is ‘chat-container’ and it coincides with the kebab-case HTML tag name in the markup. We include the components property to tell Vue which components are being referenced in the markup. Now, getting back to the variable uuid in the h1 curly brace, we need to set up the computed property which uses mapGetters to map the getter ‘getMyUUID’ to uuid.

computed: {
 ...mapGetters({
     uuid: 'getMyUuid',
  ),
},

Since we are mapping the getter to a different name (uuid), we use an object. Finally, we include the function mounted to subscribe to the channel 'vueChat'.

mounted() {
  this.$pnSubscribe({
      channels: ['vueChat'],
  });
},

We subscribe, using $pnSubscribe, to the channel once the Vue instance is mounted to the DOM.

MessageInput Component

We break this component into 4 parts:

First, we check that the message body is not empty.
Then, we get the user UUID from the store and assigned it to the variable userUUID.
We publish the message, along with userUUID, to the channel 'vueChat'.
Finally, we reset the text input.

Here is the template for the component.

<template>
  <div class="message-input">
    <textarea
      ref="messageInput"
      placeholder="message..."
      maxlength="20000"
      @keydown.enter="submitMessage"
    ></textarea>
  </div>
</template>

When the user types in the message body and presses enter, the function submitMessage is called to check that the message body is not empty. We include this function inside of methods. (Note: The rest of the code for MessageInput Component will be inside of submitMessage).

methods: {
  submitMessage(event) {
    if (!event.shiftKey) {
       event.preventDefault();
     } else {
        return;
     }

     // If the message body is empty, do not submit
     if (event.target.value.length === 0) {
       return;
     }

We access the getter, getMyUUID, and assign it to the variable userUUID.

const userUUID = this.$store.getters.getMyUuid;

If the user presses enter and the message body is not empty, we publish to 'vueChat ' the text and the user’s UUID.

this.$pnPublish({ 
  channel: 'vueChat', 
  message: {
    text: event.target.value,
    uuid: userUUID,
    },
  })

We reset the text input once the user presses enter.

event.target.value = '';

MessageBubble Component

The chat log will display the messages sent and received in a message bubble. We'll get to the chat log component in a bit, but for now, let’s focus on the message bubble component. When you send a message, the message bubble is shown on the right side of the chat log without displaying your UUID. The messages received from other users are shown on the left side of the chat log with the users UUID shown above the bubble. This follows the design logic of many group chat apps.

<template>
  <div
    class="message-bubble"
    :class="me"
  >
    <span
      class="from"
      :class="me"
    >uuid</span>
    <br :class="me">
    <span
      class="message-text"
    >text </span>
  </div>
</template>

The class ‘me’ is bound to a class, such as ‘message-bubble’ or ‘from’, only if you send the message. When ‘me’ is bound to a class, the positioning and styling of the message bubble will change, as mentioned above. A computed property is used to check if the user is yourself or someone else.

export default {
  name: 'message-bubble',
  props: ['uuid','text'],
  computed: {
    me() {
      let result = false;
      // Check if the client uuid of the message received is your client uuid
      if (this.$store.getters.getMyUuid === this.uuid) {
        result = true;
      }

      // Render the message bubble on the right side if it is from this client
      return result ? 'me' : '';
    },
  },
  data() {
    return {};
  },
};

Besides the computed property, another important part in the script are the prop attributes that are registered to the MessageBubble component. The two values in the prop, ‘uuid’ and ‘text’, will be passed to MessgeBubble's parent component, ChatLog.

ChatLog Component

The chat log displays the messages once it’s received in the channel. Before we work on the template, let’s do the script section first.

import MessageBubble from '@/components/MessageBubble';
import {mapGetters} from 'vuex';
function scrollBottom() {
  this.$el.scrollTo(0, this.$el.scrollHeight);
}

Since we'll be using the message-bubble tag in the markup, we need to import the MessageBubble component in the script so the tags are rendered properly. The scrollBottom function auto scrolls the chat log to the bottom whenever a message is received. This function is called in the watch property.

watch: {
  vueChatMsg: function(){
    this.$nextTick(scrollBottom);
  }
},

We use .$nextTick to make sure the scrollBottom function is called only after the DOM has been updated. Next, let’s add the name property, components and the data function.

name: 'chat-log',
components: {MessageBubble},
data() {
  return {
    vueChatMsg: this.$pnGetMessage('vueChat'),
  }
},

The data function returns vueChatMsg, which contains the new message payload from the channel. As mentioned before, since we are using $pnGetMessage, the messages will display as soon as they are received. We include the channel name as a parameter. The vueChatMsg property holds an array of objects where every object of the array is the Subscribe Message Response. For every message published, a new message response is added to the array. The objects in the message response includes information such as the channel name, the publisher, the message payload, the subscriber, and so on. We only want the message payload which includes the ‘uuid’ and ‘text’. We will implement this logic in the template.

<template>
  <div
    class="chat-log"
    ref="chatLogContainer"
  >
  <message-bubble
    v-for="msg in vueChatMsg" 
    v-bind:key="msg.id"
    v-bind:uuid="msg.message.uuid"
    v-bind:text="msg.message.text"
  ></message-bubble>
  </div>
</template>

We use v-for to iterate vueChatMsg with ‘msg.id’ as the unique key. We use v-bind to bind the two prop values, ‘uuid’ and ‘text’. Remember that we declared the prop in the child component MessageBubble. So for every iteration of the for loop, we only iterate the message payload and bind ‘msg.message.uuid’ and ‘msg.message.text’ to its corresponding prop attribute.

Let’s quickly summarize the above. Every time a message response is received, it is added as a new element to the array of objects, vueChatMsg, which is returned by the data function. When this happens, inside the message-bubble tag we iterate, using v-for, the new element in the array. Since we only want the message payload, v-for only checks for ‘message’ which contains the payload. The payload values ‘uuid’ and ‘text’ are bind to its appropriate props. Both values are then sent back to the child component, MessageBubble.

That’s all for the Pub/Sub section of this tutorial. Make sure that the code is correct and that you have installed the appropriate plugins. Get the CSS section of the four components from the repo. Run your program by typing 'npm install’ and ‘npm run dev’ in the terminal and your program should start on a localhost port. Type a message in the message input and you should see a blueish bubble on the right side of the chat log. Open another tab, or preferably window, and copy and paste the URL. Now type a new message in the message input and again, you should see the blueish bubble on the right side of the chat log. But now, you should also see the new message on the other chat log. This new message should be a greyish bubble on the left side of the chat log. Play around with both chat windows and see the messages appear in realtime on both screens.

Storing Chat Messages with the History API

While everything is set up and ready to use, there is one problem. If you reload the page, you will notice that all the messages disappear. This occurs because the Storage & Playback feature is not turned on. To turn it on, go to the PubNub Admin Dashboard and click on your application. Click on Keyset and scroll down to Application add-ons. Keep scrolling down until you get to Storage & Playback and toggle the switch to on. Keep the default values the same.

Now that it’s on, messages will persist in storage and can be retrieved later on. Messages can also be deleted from history to meet GDPR compliance. If you cloned the repo, then reload the page for the chat app and the messages should appear in oldest to newest order. If you didn’t clone the repo, the messages won’t appear since the history function, which fetches historical messages of a channel, has not been added to the code. Either way, in the next section, we will implement the history function so messages can be stored and retrieved.

Setting up History

Fetching the historical messages of our channel is not difficult to do. We need to make small modifications to three files: store.js, ChatContainer.vue, and ChatLog.vue. Let’s start with store.js.

Modify the Vuex State

In the state, we need to add a new property, history, with an empty array as the value.

const state = {
  ...
  history: [],
};

In mutations, we add a new mutation, addHistory, with state as the first argument and history as the second argument.

const mutations = {
  ...
  addHistory(state, {history}){
    history.forEach(element => {
      state.history.push(element.entry);
    });
  },
}

We iterate the array history that contains the historical messages retrieved from the channel. Each element in the array contains two keys, timetoken and entry. We only want entry since it contains the text the user entered and their UUID. This is why in each iteration we push element.entry to the history array we added in state. We will only add one line to getters.

const getters = {
  ...
  getHistoryMsgs: (state) => state.history,
};

Modify ChatContainer

Since we need to use the history function, import PubNubVue.

import PubNubVue from 'pubnub-vue';

Below the imports, we add a new function, fetchHistory, that will fetch 6 messages from the channel. You can change the number of messages to fetch with 100 being the max number.

function fetchHistory(store){
  PubNubVue.getInstance().history(
      {
        channel: 'vueChat',
        count: 6, // how many items to fetch
        stringifiedTimeToken: true, // false is the default
      },
      function(status, response) {
        const msgs = response.messages;
        // Iterate msgs array and save each element to history
        msgs.forEach(elem => {
          store.commit('addHistory', {history: [elem]});
        })
      }
   )   
}

To commit the history payload, save response.messages to the constant variable ‘msgs’. The constant contains an array of objects where each object contains two keys (timetoken and entry). We don’t want to commit the whole array to the Vuex Store, rather, we want to iterate the array and commit each element. This will make it easier to fetch the necessary keys in the addHistory function. The last modification to include is in mounted which makes the call to fetchHistory.

mounted() {
  ...
  this.$nextTick(fetchHistory(this.$store));
},

We pass this.$store as a parameter so we can commit the changes to the store.

Modify ChatLog

This is the last file we need to update. We need to make changes to the template and the script. Let’s start with the script. We need to import mapGetters since we will be using it in the computed property.

import {mapGetters} from 'vuex';

In the computed property, we map the getter ‘getHistoryMsgs’ to history.

computed: {
  ...mapGetters({
    history: 'getHistoryMsgs',
  }),
},

In the template, we add another message-bubble tag.

<template>
  ...
   <message-bubble
    v-for="historyMsg in history" 
    v-bind:key="historyMsg.id"
    v-bind:uuid="historyMsg.uuid"
    v-bind:text="historyMsg.text"
  ></message-bubble>
  ...
</template>

This looks very similar to what we did earlier. We use v-for to iterate history. At every iteration, we retrieve the ‘uuid’ and ‘text’ from the array and bind it to its appropriate prop attributes. The messages will show in the chat log as message bubbles. That is all we need to do for history. Run the program again and you should see the last six messages from history in the chat log.

There are two things to take note of. The first thing is that the messages will persist in storage for 1 day only. After 1 day, the messages are removed from storage. You can change the time period a message is stored by changing the retention time, which is located in the Storage & Playback add-on. For the purpose of this tutorial, we leave the default value of 1 day.

The second thing to note is that the history messages will show on the left side of the chat log, even if the messages are from you. This is because we generate a random 4 character UUID every time the app instantiates. So when you reload the page, a new UUID is assigned to you and the previous messages you sent before the reload will now be seen as messages sent from another user. This is fine for this tutorial, but for real production, each user should have a unique UUID that is persistent. For a persistent UUID, the history messages that are sent by you will show on the right side of the chat log.

What's Next?

Now that you've got your basic messaging functionality implemented, it's time to add more features! Head over to our Chat Resource Center to explore new tutorials, best practices, and design patterns for taking your chat app to the next level.