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

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?

I’m not sure if I’m correct but doesn’t local host run on port 8080 or what has been specified in your computer. — omkaartg
@Omkaar.K you can make localhost run which ever port you want. Mine is running at 8000 — z0mbieKale
I had the same problem because I had copied the code form the internet. Then I noticed that my localhost is running on some other port — omkaartg

omkaartg omkaartg · Accepted Answer · 2017-12-04T19:52:18

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

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

2 Answers