WebSocketChannelException: HandshakeException - Flutter app with Laravel Websockets on custom server Cerificated with Cpanel

Question

I have Laravel web application includes live chat relying on Laravel Websockets https://docs.beyondco.de/laravel-websockets/

For now i am making Flutter app for same service and i am facing problem Connecting to websocket i already made on wss (I have this code)

var channel = IOWebSocketChannel.connect("wss://site.com:6001/app/123456789");

channel.sink.add(json.encode({
  "event": "pusher:subscribe",
  "data": {"channel": "channel-name"}
}));

channel.stream.listen((_data) {
  print(_data.toString());
}, onError: (error) {
  print("Socket: error => " + error.toString());
}, onDone: () {
  print("Socket: done");
});

I am getting this problem : CERTIFICATE_VERIFY_FAILED which i searched about it a lot and nothing helped - one of the things i tried is to make a SecureSocket

SecureSocket secureSocket = await SecureSocket.connect(
    'www.site.com', 6001,
    onBadCertificate : (X509Certificate cert) => true).then((SecureSocket secureSocket) {

  secureSocket.listen((List<int> event) {
    print(utf8.decode(event));
  });

}).catchError((error) {
  print(error);
});

This code returns no error but it didn't connecting at all.

Note: same code working on ios simualtors but not on android

Also i tested my ssl certificate and it shows this result : https://ibb.co/chyFPtX

Please can anyone help me fixing this problem?

Answer 1

The laravel websockets connection support a pusher driver, try using a pusher client instead that already has the protocol built-in.

Answer 2

For anyone who is new to the issue

Laravel Websocket here

Flutter

import 'package:web_socket_channel/io.dart';

final _channel = IOWebSocketChannel.connect(
    Uri.parse(
        'ws://127.0.0.1:6001/app/aap-key'),
  );

  @override
  void initState() {
    _channel.sink.add(json.encode({
      "event": "pusher:subscribe",
      "data": {"channel": "test-channel1"}
    }));

    _channel.stream.listen((_data) {
      print(_data.toString());
    }, onError: (error) {
      print("Socket: error => " + error.toString());
    }, onDone: () {
      print("Socket: done");
    });
    super.initState();
  }

  @override
  void dispose() {
    _channel.sink.close();
  }

Laravel Event

<?php

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;

class TestEvent implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct()
    {
        //
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        return new Channel('test-channel1');
    }

    public function broadcastWith()
    {
        return ['data' => 'testing channel, testing message'];
    }
}