Socket.io - User establishes two connections and not sure how to include socket.io-client

Hi there, long time reader, first time poster :cowboy_hat_face:

I’m building a multiplayer game using Node.js, Express, socket.io and p5.js. Please bear with me if I am adding irrelevant info to my queries and let me know if I am leaving out any useful info :slight_smile:

Here is a link to the current version: https://fuzzy-troubled-pheasant.glitch.me/
(Remix link on the page, limiting number of links as I am new :))

I can get the multiple clients to communicate with the server and draw multiple users on my p5 canvas, but I kept getting 400 error.

I think this means that I have not set up the client side correctly, but the program was still working as I expected it too so it must be communicating somehow…?
The “400” errors were resolved by also adding ‘polling’ to transports:

transports: [‘websocket’,‘polling’],

Now I am getting “200” status codes instead, like on Socket.IO tutorials. Is this because it was always communicating using ‘polling’ and now I have “okayed” that type of communication?

But now, whenever a user connects two connections are made. Ciccen (I’ve gone with old-timey spelling for types of birds, not sure why) is the active user and ‘Them’ is the placeholder username I am setting for all connections:

I thought maybe Them was the result of an open browser window, but that second connection alsways disconnects at the same time as the active user.

My questions are:

  • Can you see why two connections are being created?
  • How do I include socket.io-client correctly?

I have included socket.io-client in my package.json file but am not sure if I also need to call it in my module script.js. I have tried using the ES6 format as described on Socket.IO site (have commented out this line in the linked version so the app works):

import { io } from “socket.io-client”;

But then I get the following error:

Uncaught TypeError: Error resolving module specifier “socket.io-client”. Relative module specifiers must start with “./”, “…/” or “/”.

And if I change it to:

import { io } from “./socket.io-client”;

Then I get this error:

Loading module from “https://fuzzy-troubled-pheasant.glitch.me/socket.io-client” was blocked because of a disallowed MIME type (“text/html”).

I have been searching for an answer through what feels like the entirety of this forum and stack overflow and I am sure the answer is out there but I am just unable to understand it… Please let me know if my issue is just plain ignorance regarding a certain topic (MIME types or something), I am trying to learn but get overwhelmed with what to focus on :melting_face: Very grateful for your time spent reading all this and for any help :slight_smile:

2 Likes

It’s been a month and nobody replied, so I might as well give it a go. Just a question though, the first question doesn’t make sense to me. Could you maybe reword it?

Thank you very much! Absolutely, when I “log in” and am the only user this code:

let numOfClients = io.engine.clientsCount;
console.log(“Number of connections:” + numOfClients);

Tells me that there are two users.

console 2 users

And then if I close the window/tab that I am playing the game in, this console.log:

socket.on(“disconnect”, () => {
console.log(${socket.id} disconnected);

returns two IDs:
disconnect ids

I don’t understand why two sockets are created?

I am not able to get a socket to disconnect. or even connect to one another. is there a way for them both to connect? if I’m not mistaken, I would try to remove the socket.removeAllListeners(); on line 138 and see if anything good happens.

Hi, thank you very much for your suggestion, @nobody ! I tried it but it didn’t change the number of connections and I started working on other features to let my frustration with this issue settle a bit!
I have now figured out the “error” (answer to my first question), a while ago I had inserted this tag into the html doc where the script.js file is called and forgotten all about it:

  <script>
    const socket = io();
  </script>

This was what was making the second client connection (I’m also calling const socket = io(); in my script.js file). :person_facepalming:Don’t know if it will be helpful to anyone else, but might be a reminder to check everywhere in your project :smiley:

Just in case anyone is looking for an answer to my second question

How do I include socket.io-client correctly?

This is working well for me in my module :slight_smile:
import { io } from “https://cdn.socket.io/4.4.1/socket.io.esm.min.js”;

2 Likes