Error during web socket handshake; websocket connection failed, using autobahn.js - websocket

Question

I am trying to create a websocket server using Ratchet, React and Autobahn. When trying to connect I get this error in console
autobahn.min.js:196 WebSocket connection to 'ws://localhost:8090/'
failed: Error during WebSocket handshake: Unexpected response code:
426
During some digging in Google I found out that Ratchet supports only WAMP1, but that information was 2014. Is this still relevant?
This is the JS
var connection = new autobahn.Connection({
transports: [{
type: 'websocket',
port: 8090,
host: 'localhost',
url: 'ws://localhost:8090'
}],
realm: 'realm1'
});
connection.open();
This is the WebsocketController class
<?php
namespace App\Http\Controllers;
use Ratchet\MessageComponentInterface;
use Ratchet\ConnectionInterface;
use Ratchet\Wamp\WampServerInterface;
class WebSocketController extends Controller implements WampServerInterface{
private $connections = [];
protected $subscribedTopics = array();
public function onSubscribe(ConnectionInterface $conn, $topic) {
$this->subscribedTopics[$topic->getId()] = $topic;
}
public function onUnSubscribe(ConnectionInterface $conn, $topic) {
}
public function onOpen(ConnectionInterface $conn) {
$this->connections->attach($conn);
echo "New connection! ({$conn->resourceId})\n";
}
public function onClose(ConnectionInterface $conn) {
}
public function onCall(ConnectionInterface $conn, $id, $topic, array $params) {
// In this application if clients send data it's because the user hacked around in console
$conn->callError($id, $topic, 'You are not allowed to make calls')->close();
}
public function onPublish(ConnectionInterface $conn, $topic, $event, array $exclude, array $eligible) {
// In this application if clients send data it's because the user hacked around in console
$conn->close();
}
public function onError(ConnectionInterface $conn, \Exception $e) {
echo "New error!".$e;
}
/**
* #param string JSON'ified string we'll receive from ZeroMQ
*/
public function onBlogEntry($entry) {
$entryData = json_decode($entry, true);
// If the lookup topic object isn't set there is no one to publish to
if (!array_key_exists($entryData['category'], $this->subscribedTopics)) {
return;
}
$topic = $this->subscribedTopics[$entryData['category']];
// re-send the data to all the clients subscribed to that category
$topic->broadcast($entryData);
}
}
This is the server:
$loop = Factory::create();
$pusher = new WebsocketController;
// Listen for the web server to make a ZeroMQ push after an ajax request
$context = new Context($loop);
$pull = $context->getSocket(\ZMQ::SOCKET_PULL);
$pull->bind('tcp://127.0.0.1:5555'); // Binding to 127.0.0.1 means the only client that can connect is itself
$pull->on('message', array($pusher, 'onBlogEntry'));
// Set up our WebSocket server for clients wanting real-time updates
$webSock = new \React\Socket\Server('0.0.0.0:8090', $loop); // Binding to 0.0.0.0 means remotes can connect
$webServer = new \Ratchet\Server\IoServer(
new \Ratchet\Http\HttpServer(
new \Ratchet\WebSocket\WsServer(
new \Ratchet\Wamp\WampServer(
$pusher
)
)
),
$webSock
);
$loop->run();
Headers
Request URL:ws://localhost:8090/
Request Method:GET
Status Code:426 No Sec-WebSocket-Protocols requested supported
Response Headers
view source
Connection:Upgrade
Sec-WebSocket-Protocol:0
Sec-WebSocket-Version:13
Transfer-Encoding:chunked
Upgrade:websocket
X-Powered-By:Ratchet/0.4
Request Headers
view source
Accept-Encoding:gzip, deflate, br
Accept-Language:en-US,en;q=0.9,et;q=0.8
Cache-Control:no-cache
Connection:Upgrade
Host:localhost:8090
Origin:http://ermp.ee:8000
Pragma:no-cache
Sec-WebSocket-Extensions:permessage-deflate; client_max_window_bits
Sec-WebSocket-Key:GbJ7qf3lzKDE2hmh3mxJpQ==
Sec-WebSocket-Protocol:wamp.2.json, wamp.2.msgpack
Sec-WebSocket-Version:13
Upgrade:websocket
User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36
What am I doing wrong here?

Answer 1

I was making something similar to your program when I encountered with this problem. I realized that I was running localhost on the wrong port AND I had processes like Skype running in background on my desired selected port.
Local host runs on port 8000.
Change your code above to this and try as this worked for me in one of my projects
var connection = new autobahn.Connection({
transports: [{
type: 'websocket',
port: 8000,
host: 'localhost',
url: 'ws://localhost:8000'
}],
realm: 'realm1'
});
connection.open();
Also check on your computer if there is already an application running on port 8000, if it is end the program/process to solve the problem.
In Server:
$webSock = new \React\Socket\Server('0.0.0.0:8000', $loop); // Binding to 0.0.0.0 means remotes can connect
In Headers:
Host:localhost:8000
And you right ratchet does support only wamp1
Maybe you can switch ratchet to thruway which may solve problem

Answer 2

I switched from Ratchet to ThruwayPHP and it started working immediately if somebody else has the same issue.