Creating a tic-tac-toe app with React Native and Pusher
Tags: reactnative, react, pusher, realtime
Published: 2018-01-19 06:07:00

---
title: Creating a tic-tac-toe app with React Native and Pusher
published: true
description: In this tutorial, we’ll be implementing the classic game Tic-Tac-Toe with React Native and Pusher.
tags: [react-native, react, pusher, realtime]
---

In this tutorial, we’ll be implementing the classic game Tic-Tac-Toe with React Native and Pusher. This tutorial assumes that you already have a basic knowledge of React Native. 


## Prerequisites

- **Pusher Account** - a Pusher account is needed to create a Pusher instance that we will be using in this tutorial. If you don’t already have an account, you can [sign up here](https://pusher.com/signup). After creating an account, you can go ahead and create a new Pusher app.

- **Android SDK** - we’ll be specifically deploying the app as an Android App so you need the Android SDK to run the app on an Android device or emulator.

- **A Machine that’s ready for React Native Development** - if you don’t already have your machine set up for React Native, you can follow the [Getting Started Guide](https://facebook.github.io/react-native/docs/getting-started.html) on the official docs. Be sure to follow the instructions in the "Building Projects with Native Code” tab. 

- **Genymotion or Android Emulator** - this is optional, as you can always use a real device for testing. 


## What We’re Going to Build

Here’s what the app is going to look like by default:

![RN Pusher Tic Tac Toe Home Screen](https://d2mxuefqeaa7sj.cloudfront.net/s_43120DF689AC360D0F545E886ED4790122C9ABD5F678F2D76DE7FDEEADF16BE1_1506923992084_creating-a-tictactoe-app-with-react-native-and-pusher-home-screen.png)

When a user has chosen to create a room, the room ID will be generated by the app. This room ID should be entered by another user so the game can begin. Throughout this tutorial, I’ll be referring to the user other than the current user as the “rival”.

![Room ID](https://d2mxuefqeaa7sj.cloudfront.net/s_43120DF689AC360D0F545E886ED4790122C9ABD5F678F2D76DE7FDEEADF16BE1_1506924055537_creating-a-tictactoe-app-with-react-native-and-pusher-after-room-creation.png)

Once someone has joined the room, the Tic-Tac-Toe board will be shown. At this point, any of the players can start the first move.

![Game begins](https://d2mxuefqeaa7sj.cloudfront.net/s_43120DF689AC360D0F545E886ED4790122C9ABD5F678F2D76DE7FDEEADF16BE1_1506924222904_creating-a-tictactoe-app-with-react-native-and-pusher.png-empty-board.png)

Once the last move is used to fill the board, an alert will be shown to the room creator asking whether they want to restart the game (empty the board and start over) or end the game. If the room creator has chosen to end the game, the app state will reset and the default screen will be shown.

![Game is finished](https://d2mxuefqeaa7sj.cloudfront.net/s_43120DF689AC360D0F545E886ED4790122C9ABD5F678F2D76DE7FDEEADF16BE1_1506924331024_creating-a-tictactoe-app-with-react-native-and-pusher-restart-game.png)

You can find the full source code of the app in its [Github repo](https://github.com/anchetaWern/RN-Pusher-TicTacToe).


## Coding the Server Component

The server component authenticates the requests that will come from the app. This is needed because we’ll be using [client events](https://pusher.com/docs/client_api_guide/client_events#trigger-events) to send data from client to client. The server component authenticates the request whenever an app tries to connect using the API key of the app you created earlier. This way you can verify if the request really came from your app.

Start by initializing a `package.json` file:

```
npm init
```

Install the dependencies:

```
npm install --save express body-parser pusher dotenv
```

Create a `.env` file in the same folder as the `package.json` file and add your Pusher app details:

```
APP_ID="YOUR PUSHER APP ID"
APP_KEY="YOUR PUSHER APP KEY"
APP_SECRET="YOUR PUSHER APP SECRET"
APP_CLUSTER="YOUR PUSHER APP CLUSTER"
```

Create a `server.js` file and add the following code:

```
var express = require('express'); // for running a server
var bodyParser = require('body-parser'); // for processing JSON submitted in the request body
var Pusher = require('pusher'); // for connecting to Pusher

require('dotenv').config();

var app = express();
app.use(bodyParser.json()); // for parsing JSON strings passed in the request body
app.use(bodyParser.urlencoded({ extended: false })); // for parsing URL encoded request body

var pusher = new Pusher({ // connect to pusher
  appId: process.env.APP_ID, // load the Pusher app settings from the .env file
  key: process.env.APP_KEY, 
  secret:  process.env.APP_SECRET,
  cluster: process.env.APP_CLUSTER, 
});

app.get('/', function(req, res){ // for testing if the server is running
  res.send('everything is good...');
});

app.post('/pusher/auth', function(req, res) { // authenticate user's who's trying to connect
  var socketId = req.body.socket_id;
  var channel = req.body.channel_name;
  var auth = pusher.authenticate(socketId, channel);
  res.send(auth);
});

var port = process.env.PORT || 5000;
app.listen(port);
```

Here’s what the code above does:

- **Line** **1** imports `[express](https://expressjs.com/)`, a web framework for Node.js which allows us to create a server and respond to specific routes.

- **Line 2** imports `body-parser`, a middleware for parsing the request body so that the data passed in the request body can be accessed like an object. For example, in the `/pusher/auth` route, this allows us to do the following to access the socket ID from the request body:  `req.body.socket_id`.

- **Line 3** imports the `pusher` package. This allows us to communicate with the Pusher app you created earlier in order to authenticate the user (line 25).

- **Line 5** imports the `dotenv` package which loads up the config in the `.env` file you created earlier. You can see them being accessed as environment variables on lines 12 to 15.

- **Lines 7 to 9** tells Express to use `body-parser` to create two different middleware entries, one for parsing JSON strings and the other for parsing URL encoded strings. The `extended` option is set to `false` because we’re not really expecting rich objects and arrays to be included in the request body. Instead, we’re only expecting plain JSON strings to be passed in the request body. 

- **Lines 18 to 20** are for testing if the server is running, you can access `http://localhost:5000` from your browser. If you see the string output “everything is good…” then it works.

- **Lines 22 to 27** are for processing the authentication requests coming from the app. The authentication request is sent every time a client connects to Pusher from the app that we’ll be creating. Note that the code for authenticating users doesn’t really have any security measures in place. This means anyone can just use your Pusher app if they happen to get a hold of your Pusher app credentials. 


## Coding the App

Now we’re ready to add the code for the app. First bootstrap a new React Native app:

```
react-native init RNPusherTicTacToe
```

Once it’s done, you can now install the dependencies:

```
npm install --save lodash.range pusher-js react-native-prompt shortid react-native-spinkit@latest
```

Out of these dependencies, React Native Spinkit has some assets which need to be linked, so execute the following command to link those:

```
react-native link
```

Here’s how the packages you’ve just installed are used in the app:

- **pusher-js** - for using Pusher. This allows us to send messages to channels, and receive messages from channels in real-time.
- **react-native-prompt** - for showing a prompt box, used for getting user input.
- **react-native-spinkit** - for showing a spinner while waiting for another player to join the room.
- **lodash.range** - for generating arrays which has a specific number of items.
- **shortid** - for generating unique IDs when creating a room.

Now we’re ready to add the code for the app. First, open the `index.android.js` file and replace the default code with the following:

```javascript
import React, { Component } from 'react';
import {
  AppRegistry
} from 'react-native';

import Main from './components/Main';

export default class RNPusherTicTacToe extends Component {
  
  render() {
    return (
      <Main />
    );
  }
  
}

AppRegistry.registerComponent('RNPusherTicTacToe', () => RNPusherTicTacToe);
```

Make sure that `RNPusherTicTacToe` matches the name you’ve given to the app when you created it with `react-native init`.

Next, create a `components/Main.js` file and add the following:

```javascript
import React, { Component } from 'react';

import {
  StyleSheet,
  Text,
  View,
  Button,
  Alert
} from 'react-native';

// include the dependencies
import Pusher from 'pusher-js/react-native';
import shortid  from 'shortid';
import Spinner from 'react-native-spinkit';

// include the components
import Header from './Header'; 
import Home from './Home'; // the default screen
import Board from './Board'; // the tic-tac-toe board and score UI
```

Inside the constructor, initialize the state and the functions that will be used throughout the component:

```javascript
export default class Main extends Component {

  constructor() {
    super();
    this.state = {
      username: '', // the name of the user
      piece: '', // the piece assigned to the user
      rival_username: '', // the name of the rival player
      is_playing: false, // whether the user is currently playing or not 
      show_prompt: false, // whether the prompt box for entering the room name is visible
      is_waiting: false, // whether the user is currently waiting for another player (rival) or not
      is_room_creator: false // whether the user is the room's creator
    }
  
    this.game_channel = null; // the Pusher channel where data regarding the game will be sent
    this.is_channel_binded = false; // whether a channel has already been binded or not
  
    this.onChangeUsername = this.onChangeUsername.bind(this); // executes when the value of the username text field changes
    this.onPressCreateRoom = this.onPressCreateRoom.bind(this); // executes when user creates a room
    this.onPressJoinRoom = this.onPressJoinRoom.bind(this); // executes when user taps on the join room button
    this.joinRoom = this.joinRoom.bind(this); // the function for joining a room
    this.onCancelJoinRoom = this.onCancelJoinRoom.bind(this); // executes when user cancels joining a room
    this.endGame = this.endGame.bind(this); // the function for ending the game

  }
}
```

Before the component is mounted, connect to Pusher using the credentials you’ve been given when you created the Pusher app:

```javascript
componentWillMount() {
  this.pusher = new Pusher('YOUR PUSHER API KEY', {
    authEndpoint: 'YOUR AUTH ENDPOINT',
    cluster: 'YOUR PUSHER APP CLUSTER',
    encrypted: true
  });
}
```

When the component is updated,  we need to check whether the user is already waiting for a rival and that a Pusher channel has not been bound to any events yet. If that’s the case, we listen for the `client-joined` event. When this happens, update the state so that the UI shows the game board. If the user is the room creator, trigger the same event so that the rival (the one who joined the room) is informed that the game can already start. 

```javascript
componentDidUpdate() {
  if(this.state.is_waiting && !this.is_channel_binded){
    
    this.game_channel.bind('client-joined', (data) => {
      this.setState({
        is_waiting: false,
        is_playing: true,
        rival_username: data.username
      });

      if(this.state.is_room_creator){
        // inform the one who joined the room that the game can begin
        this.game_channel.trigger('client-joined', {
          username: this.state.username // send the name of the room creator to the one who joined
        });
      }
    });

    this.is_channel_binded = true;
  }
}
```

In the `render` method, the `Home` component is shown by default. It displays the UI for letting the user enter their name, and either join or create a new room. Once a rival joins a room, the game board will be shown. The `Spinner` component is used as the transition state between the two while waiting for a rival to join a room.

```javascript
render() {
  return (
    <View style={styles.container}>
      <Header title={"RN Pusher Tic-Tac-Toe"} />

      <Spinner 
        style={styles.spinner} 
        isVisible={this.state.is_waiting} 
        size={75} 
        type={"WanderingCubes"} 
        color={"#549eff"}
      />

      {
        !this.state.is_playing && !this.state.is_waiting &&
        <Home 
          username={this.state.name} 
          onChangeUsername={this.onChangeUsername}
          onPressCreateRoom={this.onPressCreateRoom} 
          onPressJoinRoom={this.onPressJoinRoom}  
          show_prompt={this.state.show_prompt}
          onCancelJoinRoom={this.onCancelJoinRoom}
        />
      }

      {
        this.state.is_playing &&
        <Board 
          channel={this.game_channel} 
          username={this.state.username} 
          piece={this.state.piece}
          rival_username={this.state.rival_username}
          is_room_creator={this.state.is_room_creator}
          endGame={this.endGame}
        />
      }

    </View>
  );
}
```

Here’s the function that’s executed when the text field for entering the user’s name changes:

```javascript
onChangeUsername(username) {
  this.setState({username});
}
```

When a user taps on the *Create Room* button, generate a unique ID for the room and subscribe to a new Pusher channel using that ID. Here we’re using a [private channel](https://pusher.com/docs/client_api_guide/client_private_channels) so that we can send messages directly from the app:

```javascript
onPressCreateRoom() {
 
  let room_id = shortid.generate(); // generate a unique ID for the room
  this.game_channel = this.pusher.subscribe('private-' + room_id); // subscribe to a channel
  
  // alert the user of the ID that the friend needs to enter 
  Alert.alert(
    'Share this room ID to your friend',
    room_id,
    [
      {text: 'Done'},
    ],
    { cancelable: false }
  );

  // show loading state while waiting for someone to join the room
  this.setState({
    piece: 'X', // room creator is always X
    is_waiting: true,
    is_room_creator: true
  });

}
```

When a rival taps on the *Join Room* button, the prompt box is shown:

```javascript
onPressJoinRoom() {
  this.setState({
    show_prompt: true
  });
}
```

Once the rival joins the room, the following function is executed. The `room_id` is provided by the prompt box so we simply use it to subscribe to the same channel as the room creator. This allows the two users to communicate directly using this channel. Note that the code below doesn’t handle if a third person happens to join the room. You can add the functionality to check for the number of users in the room if you want. That way the app will reject it if there are already two users in the room.

```javascript
joinRoom(room_id) {
  this.game_channel = this.pusher.subscribe('private-' + room_id);
  // inform the room creator that a rival has joined
  this.game_channel.trigger('client-joined', {
    username: this.state.username
  });
  
  this.setState({
    piece: 'O', // the one who joins the room is always O
    show_prompt: false,
    is_waiting: true // wait for the room creator to confirm
  });
}
```

When the user cancels joining of a room, simply hide the prompt box:

```javascript
onCancelJoinRoom() {
  this.setState({
    show_prompt: false
  });
}
```

When the room creator decides to end the game, the app is reset back to its default state:

```javascript
endGame() {
  // reset to the default state
  this.setState({
    username: '',
    piece: '',
    rival_username: '',
    is_playing: false,
    show_prompt: false,
    is_waiting: false,
    is_room_creator: false
  });
  // reset the game channel
  this.game_channel = null;
  this.is_channel_binded = false;
}
```

Lastly, add the styles:

```javascript
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#F5FCFF',
  },
  spinner: {
    flex: 1,
    alignSelf: 'center',
    marginTop: 20,
    marginBottom: 50
  }
});
```

Next is the `Header` component. Create a `components/Header.js`  file and add the following:

```javascript
import React, { Component } from 'react';

import {
  StyleSheet,
  Text,
  View
} from 'react-native';

export default class Header extends Component {

  render() {
    return (
      <View style={styles.title_container}>
        <Text style={styles.title}>{this.props.title}</Text>
      </View>
    );
  }

}

const styles = StyleSheet.create({
  title_container: {
    flex: 1,
  },
  title: {
    alignSelf: 'center',
    fontWeight: 'bold',
    fontSize: 30
  }
});
```

All this component does is to display the title of the app in the header.

Next, create a `components/Home.js` file. As mentioned earlier, this is the default component that is shown the first time the user opens the app or when the room creator ends the game. 

```javascript
import React, { Component } from 'react';

import {
  StyleSheet,
  Text,
  View,
  TextInput,
  Button
} from 'react-native';

import Prompt from 'react-native-prompt';

export default class Home extends Component {

  render() {

    return (        
      <View style={styles.content_container}>
        <View style={styles.input_container}>
          <TextInput
            style={styles.text_input}
            onChangeText={this.props.onChangeUsername}
            placeholder={"What's your name?"}
            maxLength={20}
            value={this.props.username}
          />
        </View>

        <View style={styles.button_container}>
          <Button
            onPress={this.props.onPressCreateRoom}
            title="Create Room"
            color="#4c87ea"
            style={styles.button}
          />
          <Button
            onPress={this.props.onPressJoinRoom}
            title="Join Room"
            color="#1C1C1C"
            style={styles.button}
          />
        </View>

        <Prompt
          title="Enter Room Name"
          visible={this.props.show_prompt}
          onSubmit={this.props.joinRoom}
          onCancel={this.props.onCancelJoinRoom}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  content_container: {
    flex: 1
  },
  input_container: {
    marginBottom: 20
  },
  button_container: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center'
  },
  text_input: {
    backgroundColor: '#FFF',
    height: 40,
    borderColor: '#CCC', 
    borderWidth: 1
  },
  button: {
    flex: 1
  }
});
```

Next, create a `components/Board.js` file. This component serves as the main meat of the app because it’s where the game happens. 

First, include the components and packages that we’ll be needing:

```javascript
import React, { Component } from 'react';

import {
  StyleSheet,
  Text,
  View,
  TextInput,
  Button,
  TouchableHighlight,
  Alert
} from 'react-native';

import range from 'lodash.range'; 
```

In the constructor, bind the methods for generating the content for the board (3x3 board). The possible combinations for getting a score are also declared. The `ids` are used as the IDs for referring to the individual blocks. As you can see, it’s an array which has three arrays in it. Each of these arrays pertains to the rows in the board, and its items pertains to the individual blocks. So when referring to the second column in the first row of the board, you can get the ID for that by using `this.ids[0][1]`. This will then return `1`. The ID will be used later on to determine the scores based on the `possible_combinations` array.

```javascript
export default class Board extends Component {

  constructor() {
    super();
    this.generateRows = this.generateRows.bind(this); // bind the method for generating the rows for the board
    this.generateBlocks = this.generateBlocks.bind(this); // bind the method for generating individual blocks for each row
    
    // the possible combinations for getting a score in a 3x3 tic-tac-toe board 
    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]
    ];
    
    // the IDs of the individual blocks
    this.ids = [
      [0, 1, 2],
      [3, 4, 5],
      [6, 7, 8]
    ];
    
    // the individual rows
    this.rows = [
      range(3).fill(''), // make an array with 3 elements and set each item to an empty string
      range(3).fill(''),
      range(3).fill('')
    ];

    this.state = {
      moves: range(9).fill(''), // the pieces (X or O) used on each block
      x_score: 0, // score of the room creator
      o_score: 0 // score of the rival
    }

}
```

Right below the declaration for `this.ids` is the array which will be used to generate the rows in the board. 

Once the component is mounted, we then want to listen for the `client-make-move` event to happen. This event is triggered every time a user places their piece (either “X” or “O”) on the board. Note that this will only be triggered on the rival and not the user who has sent the event.

```javascript
componentDidMount() {
  this.props.channel.bind('client-make-move', (data) => {
    let moves = this.state.moves;
    let id = this.ids[data.row_index][data.index]; // get the ID based on the row index and block index
    moves[id] = data.piece; // set the piece
    
    // update the UI
    this.setState({
      moves
    });
    
    this.updateScores.call(this, moves); // update the user scores
  });
}
```

Every time a move is made, the `updateScores` function is executed. This loops through all the possible combinations. It uses the [every()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/every) method to check whether a specific piece was used on each of the items for a possible combination. For example, if “X” is used for blocks 0, 1, and 2, then 1 point is rewarded to the user who has “X” as their piece.

```javascript
updateScores(moves) {

  var pieces = {
    'X': 0,
    'O': 0
  }

  function isInArray(moves, piece, element, index, array){
    return moves[element] && moves[element] == piece; // check if there's a piece assigned to a specific block and that piece is the piece we're looking for (either "X" or "O")
  }

  this.possible_combinations.forEach((p_row) => {
    if(p_row.every(isInArray.bind(null, moves, 'X'))){
      pieces['X'] += 1;
    }else if(p_row.every(isInArray.bind(null, moves, 'O'))){
      pieces['O'] += 1;
    }
  });

  this.setState({
    x_score: pieces['X'],
    o_score: pieces['O']
  });
        
}
```

Here’s the `render()` method. It uses the `generateRows()` method to generate the content for the board. Below that is the score display for the two users.

```javascript
render() {
  return (
    <View style={styles.board_container}>
      <View style={styles.board}>
      {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.username} (x)</Text>
        </View>
    
        <View style={styles.score}>
          <Text style={styles.user_score}>{this.state.o_score}</Text>
          <Text style={styles.username}>{this.props.rival_username} (o)</Text>
        </View>
      </View>
    </View>
  );
}
```

Here’s the `generateRows()` method:

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

The `generateBlocks()` method is used for generating the individual blocks on each row. It uses the `TouchableHighlight` component to create a view which can be tapped on by the user. Each block displays the piece of the user who first tapped on it. Tapping on a block executes the `onMakeMove()` method which places the user’s piece on that block.

```javascript
generateBlocks(row, row_index) {
  return row.map((block, index) => {
    let id = this.ids[row_index][index];
    return (
      <TouchableHighlight 
        key={index} 
        onPress={this.onMakeMove.bind(this, row_index, index)} 
        underlayColor={"#CCC"} 
        style={styles.block}>
          <Text style={styles.block_text}>
          {this.state.moves[id]}
          </Text>
      </TouchableHighlight>        
    );
  });
}
```

The `onMakeMove()` method receives the `row_index` and the block `index`. These allow us to get the block `id` which is used to set the piece on a specific block. After that, the `updateScores()` is also called to update the user scores. To update the UI of the rival, the details of the move is sent using the `client-make-move` event.

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

  if(!moves[id]){ // nobody has occupied the space yet
    moves[id] = this.props.piece;
    this.setState({
      moves
    });

    this.updateScores.call(this, moves);
    
    // inform the rival that a move is made
    this.props.channel.trigger('client-make-move', {
      row_index: row_index,
      index: index,
      piece: this.props.piece
    });   
  }
}
```

Once the board has been filled up with pieces, ask the room creator if they want to restart or end the game. If the room creator decides to restart the game the board is simply reset to its default state, otherwise the app is reset to its default state (the same as when the app is first opened).

```javascript
if(this.props.is_room_creator && moves.indexOf('') == -1){
  Alert.alert(
    "Restart Game", 
    "Do you want to restart the game?",
    [
      {
        text: "Nope. Let's call it quits.", 
        onPress: () => {
          this.setState({
            moves: range(9).fill(''),
            x_score: 0,
            o_score: 0
          });
          this.props.endGame();
        },
        style: 'cancel'
      },
      {
        text: 'Heck yeah!', 
        onPress: () => {
          this.setState({
            moves: range(9).fill(''),
            x_score: 0,
            o_score: 0
          });
        }  
      },
    ],
    { cancelable: false } 
  );
}
```

Lastly, add the styles:

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

## Testing the App

Now that you’ve built the app, it’s now time to try it out. The first thing that you need to do is run the server:

```
node server.js
```

You can run the app with the following command:

```
react-native run-android
```

Be sure that you already have a connected device or an emulator opened when you execute this.

If you’re using either Genymotion or the Android emulator, and you don’t really want to test on a real device, then you can use the browser to simulate the rival. 

Once that’s done, run the app and create a new room. Then copy the room ID shown in the alert box.

Next, go to your Pusher app’s dashboard and click on the **Debug Console** tab.
Click on **Show event creator** and enter  `private-ROOM_ID` for the **Channel**. Be sure to replace `ROOM_ID` with the actual ID of the room then set `client-joined` as the value of the **Event.** The value for the **Data** is:

```
{
  "username": "doraemon"
}
```

Use the screenshot below as a reference:

![test events from the debug console](https://d2mxuefqeaa7sj.cloudfront.net/s_43120DF689AC360D0F545E886ED4790122C9ABD5F678F2D76DE7FDEEADF16BE1_1508228053466_Creating-a-tic-tac-toe-app-with-React-Native-and-Pusher-debug-console.png)

Once that’s done, click on the **Send event** button.  This should trigger the app to change its UI to the actual game board.  To trigger some moves, set the **Event** name to `client-make-move` then add the details of the move on the **Data** field:

```
{
  "row_index": 0,
  "index": 0,
  "piece": "O"
}
```

This will place the “O” piece on the first box in the game board.

From there you can place a different value for the `index` and `row_index` to emulate the game play. 

## Deploying the Server

The method I showed you above is great if you only want to test inside your own local network. But what if you want to test it out with your friends outside the network? For that, you could use [*Now*](https://zeit.co/now). I’m not going to go into details on how to deploy the server, but you can check out their [docs](https://zeit.co/docs). *Now* is free to use, the only downside is that your code will be available publicly. 

## Conclusion

That’s it! In this tutorial you’ve learned how to re-create Tic-Tac-Toe using Pusher. As you have seen, Pusher really makes it easy to implement real-time features in games. While Tic-Tac-Toe is a very simple game, this doesn’t mean that Pusher can only be used in simple games. You can pretty much use Pusher in any real-time game you can think of.

*Originally published on the [Pusher blog](https://blog.pusher.com/tic-tac-toe-react-native-pusher/)*