Stuck with multiplayer

Hi guys, I’m trying to implement a multiplayere setup by following the tutorial at: https://developer.playcanvas.com/en/tutorials/real-time-multiplayer/
But I’m stuck at the point where the first communication should appear. I’ve got errors like this:

Failed to load resource: https://themonstr.glitch.me/socket.io/?EIO=4&transport=polling&t=NQArPHn
Origin https://playcanv.as is not allowed by Access-Control-Allow-Origin.

Did I misse something?

seems to be a CORS Issue could be mitigated with a browser extension, don’t think theres a better way to do this unfortunately

Link of an CORS-disabling extension: https://chrome.google.com/webstore/detail/moesif-origin-cors-change/digfbfaphojjndkpccljibejjbppifbc

Hi agent178, thanks for your reply. How can this be? Playcanvas is providing a step by step tutorial doing this and the example works exact the same way. There must be another way to solve this. Do I have to allow my glich app to allow requests from playcanvas?.

Hi @Karl47,

You need to whitelist the playcanv.as domain name on your glitch.me project, or use a cors extension on your browser while developing as @agent178 said.

Ok, how do I do this at my glitch project? It’s my first time using a node app with glitch

Here is a helpful post with a quick google search: https://benborgers.com/posts/glitch-cors/

1 Like

Ok, one last try because I have no idea. Regarding the tutorial: What do I have to add in glitch at the server.js to make it work? I’ve added the cors package to my glitch project.

var server = require('http').createServer();
var io = require('socket.io')(server);

io.sockets.on('connection', function(socket) {
    console.log("Client has connected!");
});

console.log ('Server started.');
server.listen(3000);

I think you need to add the following lines in your node.js server to enable cors:

const cors = require("cors"); // importing the `cors` package
app.use(cors()); // tells Express to use `cors`, and solves the issue

Ok, thanks a lot. I’ve nothing in my script that is called “app”. Only “server” and “io”. That does not work.

I think the node.js cors module has to be used with express.js (the app instance you see on the code above). That’s a node.js middleware that makes it easier to setup routes/pages to your node.js server.

You can find a tutorial online most likely on how to use nodejs + express + sockets. Sorry for not being of more help!

1 Like
const express = require("express");
const app = express();
1 Like

Thanks @Fus_ion, and how do I add my socket connection in there?

i think its something like this:

var server = require('http').createServer(app);
var io = require('socket.io')(server);

io.sockets.on("connection",function(socket){
   console.log("connection");
});

i almost forgot but you need for it to listen on a port also

Ok, but if I bring this together it has no effect on the communication. It still says that Origin https://playcanv.as is not allowed by Access-Control-Allow-Origin.

did u include?

Yes, and I’ve added the CORS package to my project

I ran into this same problem. This is actually a new problem with the latest socket.io version, I’m not sure why it suddenly requires this CORS work-around, but this is what the top of my server.js looks like on glitch to circumvent the problem:

var server = require('http').createServer();
var options={
 cors:true,
 origins:["http://127.0.0.1:5347"],
}
var io = require('socket.io')(server, options);

Hope that helps!

4 Likes

Hi @ChandlerTwins,
that’s it! Thanks for helping :grinning: To sum it up:

  • Go to package.json of your glitch server and install CORS package
  • Go to the server.js of your glitch server and replace the first two lines:
var server = require('http').createServer();
var io = require('socket.io')(server);

with the code ChandlerTwins posted:

var server = require('http').createServer();
var options={
 cors:true,
 origins:["http://127.0.0.1:5347"],
}
var io = require('socket.io')(server, options);
  • The funny thing is, for me it doesn’t matter what I put into orgins. It works even if its empty. It seems that it is enough to set cors: true
1 Like

Good to know! I found the answer on some obscure stackoverflow question when I was working on my fighting game, so it’s good to have this information in a more reachable place hahaha

Glad it’s all sorted!