[Bug]: Can't connect to socket server

[exotexot]

What issue are you experiencing?

I'm running strapi and my frontend in a docker container.
I'm using nginx as reverse proxy.

Strapi url: http://localhost/strapi
frontend url: http:/localhost/frontend

in my client I just setup my socket like:

import { io } from "socket.io-client"
export const socket = io(http://localhost/strapi)

strapi/config/plugins.ts:

export default ({ env }) => ({
  io: {
    enabled: true,
    config: {
      // This will listen for all supported events on the article content type
      contentTypes: ["api::session.session", "api::player.player"],
    },
  },
});

Steps To Reproduce

No response

What version of the plugin are you using?

2.0.4

What strapi version are you using?

4.15.5

[ComfortablyCoding]

As they are in a docker container I would assume it is some misconfiguration on the docker (or nginx) side of things as opposed to something wrong with this plugin.

The configuration from the plugins standpoint looks fine to me.

Is it possible to provide the docker and nginx configurations you are using?

[exotexot]

I got rid of the errors via "properly" setting the socket.serverOptions.cors.origin

export default ({ env }) => ({
  io: {
    enabled: true,
    config: {
      // This will listen for all supported events on the article content type
      contentTypes: ["*"],

      socket: {
        serverOptions: {
          cors: {
            // origin: ["*", "http://localhost:1337", "http://localhost:3001"],
            origin: "*",
            methods: ["GET", "POST"],
          },
        },
      },
    },
  },
});

In my React Frontend I'm trying to catch updates of my Strapi Player Table like so, which doesn't work sadly :/
It doesn't reliably log on the "connect" event. Sometimes when I refresh the page it does log this message, but not when my socket client is connecting :(

React.useEffect(() => {
socket.on("connect", () => {
	console.log("socket connected")

	socket.on("api::player.player:update", (data) => {
		console.log("article updated!")
		console.log(data)
	})

	socket.on("player.player:update", (data) => {
		console.log("article updated!")
		console.log(data)
	})

	socket.on("player:update", (data) => {
		console.log("article updated!")
		console.log(data)
	})

	socket.on("api:player.player:update", (data) => {
		console.log("article updated!")
		console.log(data)
	})

	socket.on("hello", (data) => {
		console.log("article updated!")
		console.log(data)
	})

})

return () => {
	socket.removeAllListeners()
}
}, [])

When I try to explicitly emit an event from my strapi controller like so:
strapi.$io.raw("hello", "world");

my Strapi build crashes, as it doesn't know $io

2023-12-07 18:30:28 ERROR in ./src/api/player/controllers/player.ts:138:14
2023-12-07 18:30:28 TS2339: Property '$io' does not exist on type 'Strapi'.
2023-12-07 18:30:28     136 |
2023-12-07 18:30:28     137 |     try {
2023-12-07 18:30:28   > 138 |       strapi.$io?.raw("test", "hallo");
2023-12-07 18:30:28         |              ^^^
2023-12-07 18:30:28     139 |
2023-12-07 18:30:28     140 |       const result = await strapi.db.query(CONTROLLER_API).update({
2023-12-07 18:30:28     141 |         where: { id },
2023-12-07 18:30:28 
2023-12-07 18:30:28 webpack 5.89.0 compiled with 1 error in 15334 ms
2023-12-07 18:30:28 [ERROR]  There seems to be an unexpected error, try again with --debug for more information 

I'm using Typescript Version on of Strapi, and maybe the plugin doesn't register this type properly...

[ComfortablyCoding]

This plugin is built in js and therefor does not have any types. Ideally an index.d.ts would exists to prevent this but I have not done that yet.

In the meantime I believe something along the lines of

// ./index.d.ts
declare module "@strapi/strapi" {
  interface Strapi {
      $io: any;
  }
}

at the root of the project should resolve this typing issue for now.