Socket.IO v3.0 support #290

promatik · 2020-11-11T18:46:51Z

Echo Version: 1.9.0
Laravel Version: 8.x
PHP Version: 7.4
NPM Version: 6.14.6
Node Version: 12.18.3

Description:

After updating Socket.IO to v3.0.1 there are constant erros of Bad handshake method.

{"code":2,"message":"Bad handshake method"}

The text was updated successfully, but these errors were encountered:

driesvints · 2020-11-12T09:23:06Z

It's only just released so this library isn't compatible yet. We'll look into this eventually but if anyone wants to get this done sooner you're free to send in a PR.

taylorotwell · 2020-11-12T13:23:17Z

Yeah, if you know how to update it please send in a PR.

juancho48 · 2020-11-17T21:11:19Z

I don't work with Echo, but seems like some people are saying it's a CORS error here socketio/socket.io-client#1140

xiCO2k · 2020-11-18T00:49:08Z

Got it working without any problems:

With this JS:

import Echo from "laravel-echo"

window.io = require('socket.io-client');

window.Echo = new Echo({
    broadcaster: 'socket.io',
    host: window.location.hostname + ':6001',
    withCredentials: true
});

For the server I cloned the laravel-echo-server repo, upgraded to the version 3.0.1 and just set this settings on the laravel-echo-server.json file:

"socketio": {
    "cors": {
        "origin": "http://localhost",
        "credentials": true
    }
}

All Worked well both public and private channel.

AbdullahFaqeir · 2020-11-18T21:28:42Z

Will try to submit a PR to solve this ASAP

AbdullahFaqeir · 2020-11-18T22:22:12Z

While setting up the environment to start working on this everything worked just perfect without any error, below are the versions my environment is on.

Laravel : v8.15
Laravel-Echo : v1.9.0
Php : v7.4.10
NPM : v6.14.8
NodeJS : v12.13.1
Socket.IO-Server : v3.0.2
Socket.IO-Client : v3.0.2

I've created a simple socket.io server with the following code

const app = require('express')();
const http = require('http').createServer(app);
const io = require('socket.io')(http);
io.on('connection', (socket) => {
    console.log('a user connected');
});
app.get('/', (req, res) => {
    res.send('<h1>Hello world</h1>');
});
http.listen(3000, () => {
    console.log('listening on *:3000');
});

import Echo from 'laravel-echo';

window.io = require('socket.io-client');

window.Echo = new Echo({
    broadcaster: 'socket.io',
    host: window.location.hostname, //I've already routed valet nginx file to reverse proxy the socket.io server
});

#Update
I've tried with Socket.IO v3.0.1 and it worked as well.

Am I missing anything??

xiCO2k · 2020-11-19T00:25:51Z

While setting up the environment to start working on this everything worked just perfect without any error, below are the versions my environment is on.

Laravel : v8.15

Laravel-Echo : v1.9.0

Php : v7.4.10

NPM : v6.14.8

NodeJS : v12.13.1

Socket.IO-Server : v3.0.2

Socket.IO-Client : v3.0.2

I've created a simple socket.io server with the following code
const app = require('express')();
const http = require('http').createServer(app);
const io = require('socket.io')(http);
io.on('connection', (socket) => {
    console.log('a user connected');
});
app.get('/', (req, res) => {
    res.send('<h1>Hello world</h1>');
});
http.listen(3000, () => {
    console.log('listening on *:3000');
});
import Echo from 'laravel-echo';

window.io = require('socket.io-client');

window.Echo = new Echo({
    broadcaster: 'socket.io',
    host: window.location.hostname, //I've already routed valet nginx file to reverse proxy the socket.io server
});
#Update
I've tried with Socket.IO v3.0.1 and it worked as well.

Am I missing anything??

does not look anything wrong with the 3.0.1

driesvints · 2020-11-19T09:23:23Z

So it seems that Socket.IO 3.0 is working properly with Echo? Is there anything we can do in the docs to make it more clear on how to get started with Socket.IO 3.0?

xiCO2k · 2020-11-19T15:37:06Z

@driesvints The only thing I see is the withCredentials and cors part on the server.

HDVinnie · 2020-11-24T05:44:06Z

When I update I get the same Bad Handshake Method so I had too rollback.

 socket.io           ^2.3.0  →    ^3.0.3     
 socket.io-client    ^2.3.1  →    ^3.0.3

anwarx4u · 2020-11-24T06:03:04Z

@xiCO2k

I am also getting "Bad Handshake Method"

Can you please share a demo sample repo so that we can check our mistakes?

Thanks in advance

xiCO2k · 2020-11-24T09:22:25Z

@anwardote dont have it on a repo, I can do that if needed, are you using a server also on the version 3? maybe is that case.

anwarx4u · 2020-11-24T10:52:55Z

@xiCO2k

package.json:

"devDependencies": {
        "@mdi/font": "^4.4.95",
        "axios": "^0.19",
        "cross-env": "^7.0",
        "laravel-mix": "^5.0.1",
        "lodash": "^4.17.19",
        "popper.js": "^1.12",
        "resolve-url-loader": "^3.1.0",
        "sass": "^1.15.2",
        "sass-loader": "^8.0.0",
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.6.11"
    },
    "dependencies": {
        "js-cookie": "^2.2.0",
        "laravel-echo": "^1.9.0",
        "moment": "^2.24.0",
        "moment-timezone": "^0.5.32",
        "resolve-url": "^0.2.1",
        "socket.io": "^3.0.3",
        "socket.io-client": "^3.0.3",
        "v-mask": "^2.0.2",
        "vue-ctk-date-time-picker": "^2.1.1",
        "vue-image-crop-upload": "^2.5.0",
        "vue-infinite-loading": "^2.4.5",
        "vue-native-notification": "^1.0.5",
        "vue-router": "^3.0.7",
        "vue2-editor": "^2.10.2",
        "vuedraggable": "^2.24.3",
        "vuetify": "^2.3.18",
        "vuex": "^3.1.1"
    }

laravel-echo-server.json

{
	"authHost": "https://web.test",
	"authEndpoint": "/broadcasting/auth",
	"clients": [
		{
			"appId": "df9a35b8db907703",
			"key": "7906d698d85547bbd27be689c1c29acd"
		}
	],
	"database": "redis",
	"databaseConfig": {
		"redis": {},
		"sqlite": {
			"databasePath": "/database/laravel-echo-server.sqlite"
		}
	},
	"devMode": true,
	"host": null,
	"port": "6001",
	"protocol": "https",
    "socketio": {
        "cors": {
            "origin": "https://web.test",
            "credentials": true
        }
    },
    "secureOptions": 67108864,
	"sslCertPath": "/Users/macbook/.config/valet/Certificates/web.test.crt",
	"sslKeyPath": "/Users/macbook/.config/valet/Certificates/web.test.key",
	"sslCertChainPath": "/Users/macbook/.config/valet/Certificates/web.test.csr",
	"sslPassphrase": "",
	"subscribers": {
		"http": true,
		"redis": true
	},
	"apiOriginAllow": {
		"allowCors": false,
		"allowOrigin": "",
		"allowMethods": "",
		"allowHeaders": "Origin, Content-Type, X-Auth-Token, X-Requested-With, Accept, Authorization, X-XSRF-TOKEN, X-Socket-Id"
	}
}

bootstrap.js

import Echo from 'laravel-echo';
window.io = require('socket.io-client');

    var lv_echo_port = process.env.MIX_LARAVEL_ECHO_PORT ? process.env.MIX_LARAVEL_ECHO_PORT: 6001;
    window.Echo = new Echo({
        broadcaster: "socket.io",
        host: window.location.hostname + ":"+ lv_echo_port,
        withCredentials: true
    });

Listening js

      window.Echo.private("employee.widget.update.attendance.list").listen(
        ".EmployeeWidgetUpdateAttendanceList",
        (data) => {
          console.log(data);
        }
      );

Channel.php Route:
Broadcast::routes(['middleware' => ['auth:sanctum']]);

Did you modify something manually in the "laravel-echo" repo?

something wrong there???

Noted that I am using Sanctum CSRF authentication

xiCO2k · 2020-11-25T07:49:24Z

@anwardote the only problem possible is yout laravel-echo-server is still on version 2, that maybe it

promatik · 2020-11-25T13:24:31Z

@xiCO2k can I force Laravel Echo to use socket.io-server version 3? I can't find how ...

anwarx4u · 2020-11-25T14:10:10Z

@xiCO2k Yes probably.

Can you share, how did you solve it? Or it would be more helpful if you could share a complete git repo for us.

xiCO2k · 2020-11-25T14:47:47Z

@anwardote I did fork it and upgrade that package, on my repo.

promatik · 2020-12-27T12:46:23Z

@xiCO2k I can't see any commits by you on your fork; https://github.com/xiCO2k/echo/commits/master
Can you be more clear on how to update socket.io-server on the repo?

rennokki · 2021-01-15T11:38:45Z

I have a fork of Laravel Echo Server that works with v3.0 and it's modified by a lot from the original fork, and it seems like the Bad Handshake error do not happen, however, I'm investigating the issue where the reconnection does not take place after abruptly losing the connection to the server: #295

driesvints · 2021-03-30T13:23:20Z

We've decided we won't be investing time anymore into Socket.io since we don't maintain the laravel-echo-server package. Instead we recommend to use something like https://github.com/beyondcode/laravel-websockets. Sorry for this and thank you for understanding.

LeGmask · 2021-05-07T12:27:36Z

Okay upadted larvel-echo-server with latest socket.io server since the vulnerability and it works perfectly :
see laravel-echo-server-updated, and use normaly like laravel-echo-server 😉

rennokki · 2021-05-07T17:14:37Z

@LeGmask You can also check this project as an maintained alternative of Laravel Echo Server: https://github.com/soketi/echo-server

LeGmask · 2021-05-07T19:21:05Z

@rennokki Oh that's nice, should be mentioned somewhere, since there nothing realiable to this !

rennokki · 2021-05-07T20:14:58Z

@LeGmask I have tried to make it known on the Laravel Discord channel and I have also created an issue on the Laravel Echo Server board. It was initially forked from that repository and eventually migrated to Pusher REST API and a separate branch from the laravel/echo since it dropped support to Socket.IO.

rrolla · 2021-10-24T13:20:14Z

Okay upadted larvel-echo-server with latest socket.io server since the vulnerability and it works perfectly : see laravel-echo-server-updated, and use normaly like laravel-echo-server wink

Use this package https://www.npmjs.com/package/laravel-echo-server-updated that is fork https://github.com/LeGmask/Laravel-Echo-Server and there is v4 socket.io server

if need to fix cors errors after using updated package, add to laravel-echo-server.json config

	"socketio": {
		"cors": {
			"origin": "http://localhost:39558",
			"methods": ["GET", "POST"],
			"allowedHeaders": ["Origin", "Content-Type", "X-Auth-Token", "X-Requested-With", "Accept", "Authorization", "X-CSRF-TOKEN", "X-Socket-Id"],
			"credentials": true
		}
	},

rennokki · 2021-10-24T13:40:01Z

Not sure what to say, but if Echo does not plan to support Socket IO v3, you can as well just switch and migrate to Soketi pWS which is a standalone app that's compatible with the Pusher protocol.

AndrewHnidets · 2023-11-01T19:32:15Z

Got it working without any problems:

With this JS:
import Echo from "laravel-echo"

window.io = require('socket.io-client');

window.Echo = new Echo({
    broadcaster: 'socket.io',
    host: window.location.hostname + ':6001',
    withCredentials: true
});
For the server I cloned the laravel-echo-server repo, upgraded to the version 3.0.1 and just set this settings on the laravel-echo-server.json file:
"socketio": {
    "cors": {
        "origin": "http://localhost",
        "credentials": true
    }
}
All Worked well both public and private channel.

cloned repo with 4 version, and can't get it working with private channels. this withCredentials: true - made it work, thank you!!!

stratboy · 2023-11-13T12:56:42Z

So does Echo support Socket.io v4?

hmellahi · 2023-11-27T15:23:39Z

hey @stratboy did it work for you?

stratboy · 2023-11-28T10:45:36Z

hey @stratboy did it work for you?

I didn't use it in the end. Anyway, I think Echo supports socket.io, but laravel echo server does not (package.json speaks)

I think that probably currently the best js approach would be using https://docs.soketi.app/

driesvints added the enhancement label Nov 12, 2020

rennokki mentioned this issue Jan 8, 2021

Socket.IO v3 refuses to reconnect after server fails and gets up again #295

Closed

driesvints closed this as completed Mar 30, 2021

This was referenced Oct 24, 2021

Unable to connect with laravel-echo-server with latest socket.io-client tlaverdure/laravel-echo-server#576

Open

socket.io-client v3 tlaverdure/laravel-echo-server#559

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Socket.IO v3.0 support #290

Socket.IO v3.0 support #290

promatik commented Nov 11, 2020

driesvints commented Nov 12, 2020

taylorotwell commented Nov 12, 2020

juancho48 commented Nov 17, 2020

xiCO2k commented Nov 18, 2020 •

edited

AbdullahFaqeir commented Nov 18, 2020

AbdullahFaqeir commented Nov 18, 2020 •

edited

xiCO2k commented Nov 19, 2020

driesvints commented Nov 19, 2020 •

edited

xiCO2k commented Nov 19, 2020

HDVinnie commented Nov 24, 2020

anwarx4u commented Nov 24, 2020

xiCO2k commented Nov 24, 2020

anwarx4u commented Nov 24, 2020

xiCO2k commented Nov 25, 2020

promatik commented Nov 25, 2020

anwarx4u commented Nov 25, 2020

xiCO2k commented Nov 25, 2020

promatik commented Dec 27, 2020

rennokki commented Jan 15, 2021 •

edited

driesvints commented Mar 30, 2021

LeGmask commented May 7, 2021

rennokki commented May 7, 2021

LeGmask commented May 7, 2021

rennokki commented May 7, 2021

rrolla commented Oct 24, 2021 •

edited

rennokki commented Oct 24, 2021

AndrewHnidets commented Nov 1, 2023

stratboy commented Nov 13, 2023

hmellahi commented Nov 27, 2023

stratboy commented Nov 28, 2023 •

edited

Socket.IO v3.0 support #290

Socket.IO v3.0 support #290

Comments

promatik commented Nov 11, 2020

Description:

driesvints commented Nov 12, 2020

taylorotwell commented Nov 12, 2020

juancho48 commented Nov 17, 2020

xiCO2k commented Nov 18, 2020 • edited

AbdullahFaqeir commented Nov 18, 2020

AbdullahFaqeir commented Nov 18, 2020 • edited

xiCO2k commented Nov 19, 2020

driesvints commented Nov 19, 2020 • edited

xiCO2k commented Nov 19, 2020

HDVinnie commented Nov 24, 2020

anwarx4u commented Nov 24, 2020

xiCO2k commented Nov 24, 2020

anwarx4u commented Nov 24, 2020

xiCO2k commented Nov 25, 2020

promatik commented Nov 25, 2020

anwarx4u commented Nov 25, 2020

xiCO2k commented Nov 25, 2020

promatik commented Dec 27, 2020

rennokki commented Jan 15, 2021 • edited

driesvints commented Mar 30, 2021

LeGmask commented May 7, 2021

rennokki commented May 7, 2021

LeGmask commented May 7, 2021

rennokki commented May 7, 2021

rrolla commented Oct 24, 2021 • edited

rennokki commented Oct 24, 2021

AndrewHnidets commented Nov 1, 2023

stratboy commented Nov 13, 2023

hmellahi commented Nov 27, 2023

stratboy commented Nov 28, 2023 • edited

xiCO2k commented Nov 18, 2020 •

edited

AbdullahFaqeir commented Nov 18, 2020 •

edited

driesvints commented Nov 19, 2020 •

edited

rennokki commented Jan 15, 2021 •

edited

rrolla commented Oct 24, 2021 •

edited

stratboy commented Nov 28, 2023 •

edited