Transmit does not seem to work

[kartik-madhak]

I am using adonisjs transmit package in my app. I want to send real time updates to my edge file. Here is my relevant code: -

controller: -

// import type { HttpContext } from '@adonisjs/core/http'

import { HttpContext } from '@adonisjs/core/http'
import { reviewValidator } from '#validators/review'
import { RepoReaderService } from '#services/repo_reader_service'
import { AIReviewService } from '#services/ai_review_service/ai_review_service'
import { inject } from '@adonisjs/core'
import transmit from '@adonisjs/transmit/services/main'

export default class ReviewsController {
  @inject()
  async handle({ request }: HttpContext, aiReviewService: AIReviewService) {
    const data = await reviewValidator.validate(request.all())

    const repoReaderService = new RepoReaderService(data.repoURL)
    const commitsDiffData = await repoReaderService.validateAndGetCommitsDiff()

    for (let i = 0; i < 10; i++) {
      console.log('tramsmitting')
      transmit.broadcast('review', { message: 'i sdsad' })
    }

    return commitsDiffData
  }
}

app.js: -

import { Transmit } from '@adonisjs/transmit-client'

document.querySelector('#ask-review-form').addEventListener('submit', () => {
  document.querySelector('#error-section').innerHTML = ''
})

const transmit = new Transmit({
  baseUrl: 'http://localhost:3333',
  beforeSubscribe: (request) => {
    console.log(request, '<<<beforesub')
  },
})

transmit.on('connected', (event) => {
  console.log('connected to the server', event)
})

transmit.on('disconnected', () => {
  console.log('disconnected')
})

transmit.on('initializing', (event) => {
  console.log('initializing the server', event)
})

transmit.on('error', (error) => {
  console.log(error)
})

const subscription = transmit.subscription('review')
console.log('subscription creating...')

await subscription.create().then((event) => {
  console.log('subscription created', event)
})

console.log('starting to listen for messages...')

subscription.onMessage((message) => {
  console.log(message, '<<< came here')
})

shield.ts:-

...
  csrf: {
    enabled: false,
    exceptRoutes: [],
    enableXsrfCookie: false,
    methods: ['POST', 'PUT', 'PATCH', 'DELETE'],
  },
...

The connection is created successfully as I can see it connecting in the network tab. There are no messages for 'came here' though. I confirmed from server logs that the for loop is being executed. All the browser console logs suggest that subscription is being created. Whats wrong here?

[RomainLanz]

Hey @kartik-madhak! 👋🏻

I tried to reproduce your issue using a new installation of AdonisJS and I wasn't able to.
It seems to work all fine on my side.

Could you please tell me what's the status of the subscribe request from your frontend?
It would be even better if you can share a repository with the minimum amount of code to reproduce the issue.

[kartik-madhak]

Hey appreciate looking into this issue. 🙏

While recreating this issue from scratch I figured out what the problem was. I was using html native form action to submit the form which redirects the app to the url and thus causes the websocket to break somehow (still not sure why it didnt work before).

I updated it now to submit form through pure javascript and now it works!
Thanks for the help.