Socket.io implementation problems

Phaser 3
1

Hi all - this is my first live Phaser project, which has so far progressed fairly well. It is a fairly simple turn-based battle game, and you can view a current build here: Bulldroids

Much of the game is implemented now, but it has reached the point where I need to implement multiplayer, which is another first for me.

This tutorial seemed the best for what I need (Create a Basic Multiplayer Game in Phaser 3 with Socket.io – Part 1 – GameDev Academy), and from what I have seen on the forums, it is a popular tutorial.

I have got to the point of adding the server code, then installing socket.io as per the tutorial. However, I get the following error that I can’t fathom how to fix:

"Property ‘listen’ does not exist on type ‘typeof import(“C:/xampp/htdocs/node_modules/socket.io/dist/index”)’.

Referencing this server code:

var express = require('express')
var app = express()

// @ts-ignore
var server = require('http').Server(app)

var io = require('socket.io').listen(server)

io.on('connection', function (socket) {
  console.log('a user connected')
  socket.on('disconnect', function () {
    console.log('user disconnected')
  })
})

app.use(express.static(__dirname + '/public'))

app.get('/', function (req, res) {
  res.sendFile(__dirname + '/index.html')
})

server.listen(8081, function () {
  console.log(`Listening on ${server.address().port}`)
})

This is the offending line: “var io = require(‘socket.io’).listen(server)”

The second error I get, related to the first, is in the Create function of my first scene:

“Cannot find name ‘io’.”

From this line:
this.socket = io()

All I have done so far is followed the example code in the tutorial. I have also included my index file code below.

In terms of what the game needs to do, it is fairly simple - per round there are only two options each player can select - their move, and their special Pawer move. So the server-side stuff needs to be fairly minimal.

Index code:

<html>
    <head>
        <title>Bulldroids</title>
    </head>
    <body>
        <script src="/socket.io/socket.io.js"></script>
        
        <div id='bulldroidsgame'>
        
            <script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.min.js"></script>
            <script type="module" src="src/Bulldroids.js"></script>
        </div>
    </body>
</html>
2

as far as i can see from socket-io-website (and use in my project) u dont have to use “listen”, but to instantiate the socket-server via:

require('socket.io')(server)

the “listen” is for the server, not the “io” :slight_smile:

see also:

3

Thanks Puccini. I’ll give that a try.

4

Looks like it was out of date tutorial code. I followed the Get Started stuff on Socket.io and it works now. Thanks Puccini, that really helped :slight_smile:

5

I have one last issue - my scripts can’t find io:

Cannot find name ‘io’.

That is the error from this code in my first scene:

    create()
    {
        var self = this
        this.socket = io()
        this.socket.on('currentPlayers', function (players) {
            Object.keys(players).forEach(function (id) {
                if (players[id].playerId === self.socket.id) {
                    addPlayer(self, players[id])
                }
            })
        })
}

I added the call code into Index as advised:

<body>        
        <div id='bulldroidsgame'>
        
            <script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.min.js"></script>
            <script type="module" src="src/Bulldroids.js"></script>
        </div>

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

Little unsure how I get my phaser scripts to find io?

6

Hi @ResetRich

Perhaps you should try loading the socket.io script before your own script (in your HTML code). So that it is known by your script when calling io().

If it works, and even not, you dont need the last code var socket = io() here.

7

Thanks @jhice - looks like it is just a typescript error, the actual code works fine. Now tested by emitting a message with socket.

So, I have gone with the “// @ts-ignore” option.

8

Great :slightly_smiling_face: I made a multiplayer game with Phaser and socket.io a few years ago and had fun doing it, so I wish you the best with your game.

9

Cheers :slight_smile: I’m starting to get there now with the MP stuff. Phew!

1 Like