Issue with Socket.io not running with Adonis Server Instance #4154

roqkabel · 2023-05-10T16:05:34Z

roqkabel
May 10, 2023

Problem statement

I am using AdonisJs with socket.io, and I followed the documentation for using with socket.io

When on the Ws Service Class,
using this code provided by the docs does not instantiate the socket and always returns 404 not found /socket.io/
But when I change the socket to use a different port, I was able to connect to the socket.

Actual Results

When using this code works and I am able to connect to socket.io from the client using ws://localhost:3000 meanwhile app server is running on port 3333

    this.io = new Server(3000, {
      path: '/socket.io',
    })

Expect Results

From the docs, this code should allow a socket connection.

    this.io = new Server(AdonisServer.instance!, {
      path: '/socket.io',
    })

Package version

AdonisJs Version 5

Node.js and npm version

Node v18.15.0
NPM 9.5.0

Sample Code (to reproduce the issue)

  public boot() {
    /**
     * Ignore multiple calls to the boot method
     */
    if (this.booted) {
      return
    }

    this.booted = true

    this.io = new Server(AdonisServer.instance!, {
      path: '/socket.io',
    })
  }

roqkabel · 2023-05-13T16:27:33Z

roqkabel
May 13, 2023
Author

@aikrom

Can you be able to help with this issue?

Would be glad you check this out.

0 replies

aikrom · 2023-05-13T17:29:05Z

aikrom
May 13, 2023

It looks like you didn't boot socket.io.

The code below must be in your provider:

import { ApplicationContract } from '@ioc:Adonis/Core/Application'

export default class AppProvider {
  constructor(protected app: ApplicationContract) {}

  public async ready() {
    if (this.app.environment === 'web') {
      await import('../start/socket')
    }
  }
}

If it doesn't help, create a repository to reproduce the error

0 replies

roqkabel · 2023-05-14T07:26:10Z

roqkabel
May 14, 2023
Author

okay, let me try this.

0 replies

hieuhuynh93 · 2023-05-30T06:35:30Z

hieuhuynh93
May 30, 2023

I also had the same problem even though I followed all the steps as in Adonis's tutorial.

0 replies

lioneil · 2023-06-25T09:51:25Z

lioneil
Jun 25, 2023

Try this:

// app/Services/Ws.ts

...

this.io = new Server(3000, {
  cors: {
    origin: 'http://localhost:3333',
    allowedHeaders: ['Access-Control-Allow-Origin'],
  },
});

Also for some reason, this also works:

this.io = new Server(3000, { cors: {} });

^ That's whether the config/cors.ts enabled flag is true or false.

0 replies

adnanerlansyah403 · 2023-11-20T22:43:27Z

adnanerlansyah403
Nov 20, 2023

Any updates for this issue guys?, I had the same problem but still not fixed yet. Please guys, let me know if there's a way to fix it

6 replies

adnanerlansyah403 Nov 25, 2023

Yeah, I've already tried it. But it's got nothing and the console.log that I put on the function still didn't appears. This is my code :

// resources/views/welcome.edge
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title></title>
</head>
<body>
    <h1> Welcome </h1>
  
    <script src="https://cdn.socket.io/4.0.1/socket.io.min.js"></script>
    <script>
        const socket = io()
        socket.on('news', (data) => {
          console.log('test')
          socket.emit('other-event', { my: 'data' })
        })
    </script>
</body>
</html>

// app/Services/Ws.ts
import { Server } from 'socket.io'
import AdonisServer from '@ioc:Adonis/Core/Server'

class Ws {
  public io: Server
  private booted = false

  public boot() {
    /**
     * Ignore multiple calls to the boot method
     */
    if (this.booted) {
      return
    }

    this.booted = true
    this.io = new Server(AdonisServer.instance!, {
      cors: {
        origin: '*'
      }
    })
  }
}

export default new Ws()

// start/socket.ts
// start/socket.ts

import Ws from 'App/Services/Ws'

Ws.boot()

Ws.io.on('connection', (socket) => {
  console.log(socket.id);
});

This is the screenshoots of browser :

Please help me out with this issue, if u know how to fix it. Thank you so much

aikrom Nov 25, 2023

I think, in your example everything works as expected. What behaviour do you expect? console.log doesn't print anything in browser because there no "news" event received from server.

adnanerlansyah403 Nov 25, 2023

Nope, bro, I've already tried it but it still doesn't appear on the console

aikrom Nov 25, 2023

I just copy and paste step by step code from cookbook and everything works. Try this repo https://github.com/aikrom/adonisjs-ws-demo

adnanerlansyah403 Nov 25, 2023

May you also examine my code, this is the repository :
https://github.com/adnanerlansyah403/PWA-CHAT-API.git

I don't know why, but I've already followed the step same as coobook and your repository. But It does not change anything, I am just curious what the causes of this issue because maybe this will help other people when they have the same problem as me.

MohamedAljoke · 2024-02-05T16:58:35Z

MohamedAljoke
Feb 5, 2024

any news about websockets with adonis v6?

8 replies

MohamedAljoke Feb 6, 2024

Sorry if i am miss understanding, but the thing is that i am not finding the instance of the booted server so i can´t do the Inversion of Control, what i am trying to do is to use the server instance booted by adonis to create my websocket server (so that they share the same port)
i was looking in the /bin/server.ts file where there is the Ignitor cass wish boots the server https://docs.adonisjs.com/guides/application-lifecycle
but i can not figure how to take this instance and use it

jackielev94 Sep 20, 2024

Was there ever an update on this @aikrom @MohamedAljoke ? Running into the same issue:

Sorry if i am miss understanding, but the thing is that i am not finding the instance of the booted server so i can´t do the Inversion of Control, what i am trying to do is to use the server instance booted by adonis to create my websocket server (so that they share the same port)
i was looking in the /bin/server.ts file where there is the Ignitor cass wish boots the server https://docs.adonisjs.com/guides/application-lifecycle
but i can not figure how to take this instance and use it

MohamedAljoke Sep 20, 2024

hi @jackielev94 so its been a while since i got in this problem, i think what i did somthing like this

this is the provider

import type { ApplicationService } from '@adonisjs/core/types'

export default class WProvider {
  constructor(protected app: ApplicationService) {}

  /**
   * Register bindings to the container
   */
  register() {}

  /**
   * The container bindings have booted
   */
  async boot() {}

  /**
   * The application has been booted
   */
  async start() {}

  /**
   * The process has been started
   */
  async ready() {
    const { WebSocketIo } = await import('#connections/ws/sockets')
    const webSocket = new WebSocketIo(this.app)
    await webSocket.boot()
  }

  /**
   * Preparing to shutdown the app
   */
  async shutdown() {}
}

my websocket class


import server from '@adonisjs/core/services/server'
import { Server, Socket } from 'socket.io'

export class WebSocketIo {
  constructor(protected app: ApplicationService) {}
  public async boot() {
    console.log('booting ws server')
    //TODO: remove this new server to use adonis server

    const wsIo = new Server(server.getNodeServer(), {
      cors: {
        origin: ['handle cors here'],
      },
    })
    wsIo.on('connection', async (socket) => { 
      
    })
}

so this part was to get websockets with the same server as adonis i was having a problem with auth
so i did this on connection

    wsIo.on('connection', async (socket) => {
      const token = socket.handshake.auth.token
    const user =  await this.authenticateUser({ socket, token })
    })

  private async authenticateUser({ socket, token }: { socket: Socket; token: string }) {
    try {
      const authResolver = await authConfig.resolver(this.app)
      const request: Request = {
        header: () => `Bearer ${token}`,
      } as unknown as Request

      let ctx: HttpContext = {
        request: request,
      } as unknown as HttpContext

      const auth = authResolver.guards.api(ctx)
      const user = await auth.authenticate()
      return user
    } catch (error) {
      console.log(error)
      socket.disconnect()
    }
  }

the authConfig i got from
import authConfig from '#config/auth'

./config/auth file has this


export const authProvider = {
  provider: tokensUserProvider({
    tokens: 'authTokens',
    model: () => import('#models/user'),
  }),
}
const authConfig = defineConfig({
  default: 'api',
  guards: {
    api: tokensGuard(authProvider),
  },
})

export default authConfig

jackielev94 Sep 20, 2024

Thanks! Unfortunately I get this error when I try to use the server from @adonisjs/core/services/server
TypeError: Cannot read properties of undefined (reading 'booted')

MohamedAljoke Sep 20, 2024

i do not know if it will help

but the version i am using is
"@adonisjs/core": "^6.2.2",

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

AdonisJS Framework

Issue with Socket.io not running with Adonis Server Instance #4154

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 7 comments 14 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Issue with Socket.io not running with Adonis Server Instance #4154

Problem statement

Actual Results

Expect Results

Package version

Node.js and npm version

Sample Code (to reproduce the issue)

Replies: 7 comments · 14 replies

roqkabel May 13, 2023 Author

roqkabel May 14, 2023 Author

Replies: 7 comments 14 replies

roqkabel
May 13, 2023
Author

roqkabel
May 14, 2023
Author