Websocket path /adonis-ws 404

Hi guys, I have been struggling with this for a few days, and was wondering if you had any suggestions.

I am building a webapp with Nuxt.js and Adonisjs as a backend. Really loving it so far! But when it came to implementing websockets (for feedback of a server side conversion), I keep running into the same dang error:

Its like the path: '/adonis-ws' is not getting registered with the http server when I call .wsServer() on igniter.

I was following the setup instructions on https://adonisjs.com/docs/4.1/websocket and the readme for the client-side WebSocket library at https://www.npmjs.com/package/adonis-websocket-client to set up the Nuxt.js plugin. The plugin is working just fine, but I am still getting a 404 error for that websocket path.

Here is my main library/framework setup:

  • Adonisjs 4.1
  • Nuxt v2.12.2
  • adonis-websocket-client 1.0.2

Here is my configuration:

start/app.js providers

const providers = [
  '@adonisjs/framework/providers/AppProvider',
  '@adonisjs/auth/providers/AuthProvider',
  '@adonisjs/bodyparser/providers/BodyParserProvider',
  '@adonisjs/cors/providers/CorsProvider',
  '@adonisjs/lucid/providers/LucidProvider',
  '@adonisjs/framework/providers/ViewProvider',
  '@adonisjs/mail/providers/MailProvider',
  '@adonisjs/drive/providers/DriveProvider',
  'adonis-drive-minio/providers/DriveProvider',
  '@adonisjs/websocket/providers/WsProvider',
]

config/socket.js

'use strict'

module.exports = {
  path: '/adonis-ws',
  serverInterval: 30000,
  serverAttempts: 3,
  clientInterval: 25000,
  clientAttempts: 3
}

start/socket.js

'use strict'

const Ws = use('Ws')

Ws.channel('chat', ({ socket }) => {
  console.log('new socket joined %s', socket.id)
})

start/wsKernel.js

'use strict'

const Ws = use('Ws')

const globalMiddleware = [
]

const namedMiddleware = {
}


Ws
  .registerGlobal(globalMiddleware)
  .registerNamed(namedMiddleware)

server.js

'use strict'

const { Ignitor } = require('@adonisjs/ignitor')

new Ignitor(require('@adonisjs/fold'))
  .appRoot(__dirname)
  .wsServer()
  .fireHttpServer()
  .catch(console.error)

Nuxt plugin

import Vue from 'vue'

const ws = require('adonis-websocket-client')
const wsVuePlugin = function (Vue, url, options) {
  Vue.prototype.$io = ws(url, options)
}
Vue.use(wsVuePlugin, 'http://127.0.0.1:3333', {path: '/adonis-ws'})

Nuxt plugin usage

<template>
  <div>
    <Navbar/>
    <nuxt/>
  </div>
</template>

<script>
import Navbar from '~/components/Navbar'

export default {
  components: {
    Navbar
  },
  mounted() {
    this.$io.channel('chat').connect()
  }
}
</script>

Errors in the browser

Errors in the console

HttpException: Route not found GET /adonis-ws/
    at Server._getRoute (C:\Users\grply\code\upwav\server\node_modules\@adonisjs\framework\src\Server\index.js:146:13)   
    at C:\Users\grply\code\upwav\server\node_modules\@adonisjs\framework\src\Server\index.js:429:28

I just don’t understand, I feel like I’ve covered all the bases, even solved the Cors issues cause I’m serving the nuxt client on a different port.

Because the websocket-client library is a bit old, I just wanted to make sure I’m using right one and configuring it properly.

Any help at all is greatly appreciated. Thank you!

1 Like

Hmm… Odd…

Only thing that I noticed is that when I do WS connection in one of my projects WS connection URL does not have /in the end (before ?). It’s just like this:
/adonis-ws?token=eyJh..

Yeah I know right??

I am not specifying /adonis-ws/ but /adonis-ws as the path when i setup the client:

import Vue from 'vue'

const ws = require('adonis-websocket-client')
const wsVuePlugin = function (Vue, url, options) {
  Vue.prototype.$io = ws(url, options)
}
Vue.use(wsVuePlugin, 'http://127.0.0.1:3333', {path: '/adonis-ws'})

Doing a raw GET request to 127.0.0.1:3333/adonis-ws also gives a 404. I thought maybe you had to set something in your routes, but the Websocket provider should take care of that. I’ve never seen this issue and it seems others don’t have this.

Thanks Anyway though! I’ll see if anyone else has any feedback.

1 Like