Socket.io not working?

#1

When I try to use socket.io it does not work. It says this in the console:
image
When I go to that url it brings me to a screen that says this:
image
There must be something I am not doing right, because your socket.io example works.
Here is my code:

var Network = pc.createScript('network');
Network.id = null;
Network.socket = null;
// initialize code called once per entity
Network.prototype.initialize = function() {
var socket = io.connect("https://fearless-ember-journey.glitch.me/");
  Network.socket = socket;
};

Please help and thanks in advace!

#2

Hi @HTML_Celeb,

That isn’t an error but a warning for missing the source map file for the socket.io library. That isn’t required to use the socket.io library, your code seems correct. Try sending/receiving a message to see if the connection is working.

1 Like
#3

Also, I am confused.
This is how I did socket.io:
client:

  var socket = io();
socket.connect("https://persistent-gentle-banon.glitch.me/");

and the server:

io.on('connection', (socket) => {
console.log("test");

});

But you do it like this:
client:

var socket = io.connect("https://fearless-ember-journey.glitch.me/");

server:

io.sockets.on('connection', (socket) => {
console.log("test");

});

They are different. Is the version in the tutorial (the one here: https://developer.playcanvas.com/en/tutorials/real-time-multiplayer/) an old version?

#4

Hi @HTML_Celeb, in case it helps, this is how I’m doing it on my project on both client and server side. It uses an HTTPS (and hence wss) connection, so it requires a little bit more configuration (credentials, cors):

/* Server side */
var cors = require('cors')
const express = require('express')()
express.use(cors())

var httpsServer = require('https').createServer(credentials, express)

// Server with CORS enabled and WS protocol for transport only
var wsServer = require('socket.io')(httpsServer, {
    cors: {
        origin: "*",
        methods: ["GET", "POST"]
    },
    transports: ['websocket']
})


wsServer.sockets.on('connection', (socket) => {
    console.log("Client has connected!")
    socket.emit('customEvent', 'hello')
})

[...]

// Make sure your HTTP server is listening on the right port and address
httpsServer.listen(3000, '0.0.0.0')

And then in the client side (make sure you’ve got your socket.io javascript file included in your PlayCanvas project so it can load properly):

/* Client side (e.g your network.js script) */
var socket = io.connect('wss://<your_server_endpoint>:3000', { transports: ['websocket'] });

socket.on('customEvent', function(data){
console.log(data) // should print 'hello'
})

Hope it helps.

2 Likes
#5

It says credentials is not defined

#6

Didn’t include that part as it should be your own credentials (private key, cert). For example:

const credentials = {
  key: fs.readFileSync('key.pem'),
  cert: fs.readFileSync('cert.pem')
};

where key.pem and cert.pem are your private key and certificate for the server, respectively. This tutorial is useful in case you need to know how to generate those: https://www.sitepoint.com/how-to-use-ssltls-with-node-js/

1 Like
#7

ahhh man :frowning: I have a really slow chromebook. Terminals wont work on chrome os, I am sorry :frowning:

#8

I think you should update that tutorial. It only works in version 2.0.4 of socket.io

#9

but how do you do it on glitch.com?