$ mkdir python-pusher-mutiplayer-game
    $ cd python-pusher-mutiplayer-game
    $ virtualenv .venv
    $ source .venv/bin/activate # Linux based systems
    $ \path\to\env\Scripts\activate # Windows users

    $ pip install flask

    $ pip install pusher

    // File: ./app.py
    from flask import Flask, render_template, request, jsonify, make_response, json
    from pusher import pusher

    app = Flask(__name__)

    pusher = pusher_client = pusher.Pusher(
      app_id='PUSHER_APP_ID',
      key='PUSHER_APP_KEY',
      secret='PUSHER_APP_SECRET',
      cluster='PUSHER_APP_CLUSTER',
      ssl=True
    )

    name = ''

    @app.route('/')
    def index():
      return render_template('index.html')

    @app.route('/play')
    def play():
      global name
      name = request.args.get('username')
      return render_template('play.html')

    @app.route("/pusher/auth", methods=['POST'])
    def pusher_authentication():
      auth = pusher.authenticate(
        channel=request.form['channel_name'],
        socket_id=request.form['socket_id'],
        custom_data={
          u'user_id': name,
          u'user_info': {
            u'role': u'player'
          }
        }
      )
      return json.dumps(auth)

    if __name__ == '__main__':
        app.run(host='0.0.0.0', port=5000, debug=True)

    name = ''

    
        
        
        
        
        
        
        
      
      
        

          

            

              
              
TIC-TAC-TOE
              
PUT IN YOUR DETAILS TO PLAY
            
            

                
                  Username
            
            

              
                Email address
            
            Connect
            
© 2017-2018
          
        
        
        
    

  
  
  
  


  

    

      
      

        
        
  {{ username }}  
      
    
    

      

        

          

          

          

          

          

          

          

          

          

          

          

        
      
      

        

          

            
  {{ players }}  online player(s) 
            

            

               {{ member }} 
            
          
          

          

             {{ status }} 
          
        
      
    
  
  
  
  

var app = new Vue({
  el: '#app',

  data: {
    username: '',
    players: 0,
    connectedPlayers: [],
    status: '',
    pusher: new Pusher('PUSHER_APP_KEY', {
      authEndpoint: '/pusher/auth',
      cluster: 'PUSHER_APP_CLUSTER',
      encrypted: true
    }),
    otherPlayerName: '',
    mychannel: {},
    otherPlayerChannel: {},
    firstPlayer: 0,
    turn: 0,
    boxes: [0, 0, 0, 0, 0, 0, 0, 0, 0]
  },

  created () {
    let url = new URL(window.location.href);
    let name = url.searchParams.get("username");

    if (name) {
      this.username = name
      this.subscribe();
      this.listeners();
    } else {
      this.username = this.generateRandomName();
      location.assign(this.username);
    }
  },

  methods: {
    // We will add methods here
  }
});

// [...]

subscribe: function () {
  let channel = this.pusher.subscribe('presence-channel');
  this.myChannel = this.pusher.subscribe('private-' + this.username)

  channel.bind('pusher:subscription_succeeded', (player) => {
    this.players = player.count - 1
    player.each((player) => {
      if (player.id != this.username)
        this.connectedPlayers.push(player.id)
    });
  });

  channel.bind('pusher:member_added', (player) => {
    this.players++;
    this.connectedPlayers.push(player.id)
  });

  channel.bind('pusher:member_removed', (player) => {
    this.players--;
    var index = this.connectedPlayers.indexOf(player.id);
    if (index > -1) {
      this.connectedPlayers.splice(index, 1)
    }
  });
},

listeners: function () {
  this.pusher.bind('client-' + this.username, (message) => {
    if (confirm('Do you want to start a game of Tic Tac Toe with ' + message)) {
      this.otherPlayerName = message
      this.otherPlayerChannel = this.pusher.subscribe('private-' + this.otherPlayerName)
      this.otherPlayerChannel.bind('pusher:subscription_succeeded', () => {
        this.otherPlayerChannel.trigger('client-game-started', this.username)
      })
      this.startGame(message)
    } else {
      this.otherPlayerChannel = this.pusher.subscribe('private-' + message)
      this.otherPlayerChannel.bind('pusher:subscription_succeeded', () => {
        this.otherPlayerChannel.trigger('client-game-declined', "")
      })
      this.gameDeclined()
    }
  }),

  this.myChannel.bind('client-game-started', (message) => {
    this.status = "Game started with " + message
    this.$refs.gameboard.classList.remove('invisible');
    this.firstPlayer = 1;
    this.turn = 1;
  })

  this.myChannel.bind('client-game-declined', () => {
    this.status = "Game declined"
  })

  this.myChannel.bind('client-new-move', (position) => {
    this.$refs[position].innerText = this.firstPlayer ? 'O' : 'X'
  })

  this.myChannel.bind('client-your-turn', () => {
    this.turn = 1;
  })

  this.myChannel.bind('client-box-update', (update) => {
    this.boxes = update;
  })

  this.myChannel.bind('client-you-lost', () => {
    this.gameLost();
  })
},

// [...]

// Generates a random string we use as a name for a guest user
generateRandomName: function () {
  let text = '';
  let possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  for (var i = 0; i < 6; i++) {
    text += possible.charAt(Math.floor(Math.random() * possible.length));
  }
  return text;
},

// Lets you choose a player to play as.
choosePlayer: function (e) {
  this.otherPlayerName = e.target.innerText
  this.otherPlayerChannel = this.pusher.subscribe('private-' + this.otherPlayerName)
  this.otherPlayerChannel.bind('pusher:subscription_succeeded', () => {
    this.otherPlayerChannel.trigger('client-' + this.otherPlayerName, this.username)
  });
},

// Begins the game
startGame: function (name) {
  this.status = "Game started with " + name
  this.$refs.gameboard.classList.remove('invisible');
},

// User declined to play
gameDeclined: function () {
  this.status = "Game declined"
},

// Game has ended with current user winning
gameWon: function () {
  this.status = "You WON!"
  this.$refs.gameboard.classList.add('invisible');
  this.restartGame()
},

// Game has ended with current user losing
gameLost: function () {
  this.turn = 1;
  this.boxes = [0, 0, 0, 0, 0, 0, 0, 0, 0]
  this.status = "You LOST!"
  this.$refs.gameboard.classList.add('invisible');
  this.restartGame()
},

// Restarts a game
restartGame: function () {
  for (i = 1; i < 10; i++) {
    this.$refs[i].innerText = ""
  }
  this.$refs.gameboard.classList.remove('invisible');
},

// Checks tiles to see if the tiles passed are a match
compare: function () {
  for (var i = 1; i < arguments.length; i++) {
    if (arguments[i] === 0 || arguments[i] !== arguments[i - 1]) {
      return false
    }
  }

  return true;
},

// Checks the tiles and returns true if theres a winning play
theresAMatch: function () {
  return this.compare(this.boxes[0], this.boxes[1], this.boxes[2]) ||
    this.compare(this.boxes[3], this.boxes[4], this.boxes[5]) ||
    this.compare(this.boxes[6], this.boxes[7], this.boxes[8]) ||
    this.compare(this.boxes[0], this.boxes[3], this.boxes[6]) ||
    this.compare(this.boxes[1], this.boxes[4], this.boxes[7]) ||
    this.compare(this.boxes[2], this.boxes[5], this.boxes[8]) ||
    this.compare(this.boxes[2], this.boxes[4], this.boxes[6]) ||
    this.compare(this.boxes[0], this.boxes[4], this.boxes[8])
},

// Checks to see if the play was a winning play
playerAction: function (e) {
  let index = e.target.dataset.id - 1
  let tile = this.firstPlayer ? 'X' : 'O'

  if (this.turn && this.boxes[index] == 0) {
    this.turn = 0
    this.boxes[index] = tile
    e.target.innerText = tile

    this.otherPlayerChannel.trigger('client-your-turn', "")
    this.otherPlayerChannel.trigger('client-box-update', this.boxes)
    this.otherPlayerChannel.trigger('client-new-move', e.target.dataset.id)

    if (this.theresAMatch()) {
      this.gameWon()
      this.boxes = [0, 0, 0, 0, 0, 0, 0, 0, 0]
      this.otherPlayerChannel.trigger('client-you-lost', '')
    }
  }
},

$ flask run