Adonis websocket auth withJwtToken error


#1

I am working on a project with chat (reactjs). without auth it working fine, but i using auth Middleware getting error. Please please help me…
In reactjs page
import React from ‘react’
import “babel-polyfill”;
import Ws from ‘@adonisjs/websocket-client’

class GroupItem extends React.Component {

constructor(props) {
    super(props);
    const room = 'chat:'+this.props.name;
    this.state = {
        message:[],
        room:room
    }
    this.ws = Ws('ws://127.0.0.1:3332', { reconnectionAttempts: 200 });
    this.IsConnected = false;
    
}


Connect(token) {
	if (this.IsConnected) return;
	console.log('Websocket - Connect');
	this.ws.withJwtToken(token).connect();
	this.ws.on('open', () => this.BindEvents());
	this.ws.on('error', error => console.log('WebSocket Error', error));
	this.ws.on('close', () => {
		console.log('Websocket - Close');
		this.IsConnected = false;
	});
}

BindEvents(){
    this.userChannel = this.ws.subscribe(this.state.room)
	this.userChannel.on('ready', () => {
		console.log('Websocket - Ready');
		this.IsConnected = true;
	});

    this.userChannel.on('message', (data) => {
        this.setState(prevState => ({
            message: [...prevState.message, data]
        }))
    })

    setTimeout(() => {
        this.userChannel.emit('message', this.props.name)
    }, 3000);


}
componentDidMount = () => {
    const token = 'bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOjEsImlhdCI6MTU0OTIyNDgzN30.Q_WV8H_CQEyfF5V4WSkMqLRSv4veH4_HFjnaOv5iW1U'
    this.Connect(token);
}

_handleKeyPress = (e) => {
    if (e.key === 'Enter') {
        this.userChannel.emit('message',  e.target.value)
        e.target.value = ''
        //chat.emit('message', e.target.value)
    }
  }

render() {
    const { message } = this.state
    return(
        <div>
            Hello {this.props.name}
            <h2>Message</h2>
            <ul>
            {message.map(function(data, index){
                return <li>{data}</li>
            })}
            </ul>
            <input type="text"  onKeyPress={this._handleKeyPress} />
        </div>
    )
}

}
export default GroupItem

Error


#2

adonis Code
shoket.js
const Ws = use(‘Ws’)
Ws.channel(‘chat:*’, ‘ChatController’)
.middleware([‘auth’]);

wsKernel.js
const globalMiddleware = [
‘Adonis/Middleware/Session’,
‘Adonis/Middleware/AuthInit’
]
const namedMiddleware = {
auth: ‘Adonis/Middleware/Auth’
}

ChatController.js
‘use strict’

class ChatController {
constructor ({ socket, request, auth }) {
this.socket = socket
this.request = request
}

onMessage (data) {
this.socket.broadcastToAll(‘message’, data)
}
}

module.exports = ChatController


#3

Hi your channel isnt set correct - ternary way isnt necessary. And server code must have chat:* format.

const room = 'channel:topic'
const channel = (const ch = ws.getSubscribtion(room)) ? ch : ws.subscribe(room)

#4

Sir,
same error,
It saying "adonis:websocket join error packet "

My code
if(this.ws.getSubscription(this.state.room)){
this.userChannel = this.ws.getSubscription(this.state.room);
}
else{
this.userChannel = this.ws.subscribe(this.state.room)
}


#5

Can you share a part of the repository?
Possibly check this.ws = Ws.(...).connect()