Error during WebSocket handshake: Unexpected respo

问题:

While connecting to REACT based WebSocket client to Java Jetty based Web Socket server, I am getting the error below -

WebSocket connection to 'ws://localhost:2319/ws' failed: Error during WebSocket handshake: Unexpected response code: 302

This error doesn't exist while connecting through Chrome's Smart Web Socket client.

I am trying to develop Web Socket Client based on REACT. Client code is -

var connection = new WebSocket('ws://localhost:2319/ws');
     connection.onopen = function () {
     // connection is opened and ready to use
    };

WebSocket Server has been based on Jetty. Server code is -

server = new Server();
    ServerConnector connector = new ServerConnector(server);
    connector.setPort(SSConstants.WWBSOCKET_PORT);
    server.addConnector(connector);

    // Setup the basic application "context" for this application at "/"
    // This is also known as the handler tree (in jetty speak)
    ServletContextHandler context = new ServletContextHandler(ServletContextHandler.SESSIONS);
    context.setContextPath("/ws"); // Set to "/ws" for future integration with the main jetty server.
    server.setHandler(context);

    try {
        // Initialize javax.websocket layer
        ServerContainer wsContainer = WebSocketServerContainerInitializer.configureContext(context);

        // Add WebSocket endpoint to javax.websocket layer
        wsContainer.addEndpoint(WebsocketListener.class);
        server.start();           
    }
    catch (Throwable t) {
        ssLogger.logInfo("Websocket Server start exp : ");
        t.printStackTrace(System.err);
    }

Output -

WebSocket connection to 'ws://localhost:2319/ws' failed: Error during WebSocket handshake: Unexpected response code: 302

Request URL:ws://localhost:2319/ws
Request Method:GET
Status Code:302 Found

Response Headers
view source
Content-Length:0
Date:Fri, 11 Aug 2017 18:51:42 GMT
Location:http://localhost:2319/ws/
Server:Jetty(9.3.8.v20160314)

Request Headers
view source
Accept-Encoding:gzip, deflate, br
Accept-Language:en-US,en;q=0.8
Cache-Control:no-cache
Connection:Upgrade
Host:localhost:2319
Origin:https://localhost:1338
Pragma:no-cache
Sec-WebSocket-Extensions:permessage-deflate; client_max_window_bits
Sec-WebSocket-Key:2OZooIjOX7G6kgNpPOz9Fw==
Sec-WebSocket-Version:13
Upgrade:websocket
User-Agent:Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.90 Safari/537.36
Name

回答1:

ws://localhost:2319/ws is not the valid endpoint URL/URI, it wants to redirect to the correct one for your declared contextPath of /ws

That's what the 302 redirect is telling you ...

Location: http://localhost:2319/ws/

Lets say your WebsocketListener is declared as @ServerEndpoint("/ws"), and we use your ServletContext at contextPath of "/ws" that would mean your URL/URI to access that websocket endpoint is ...

ws://localhost:2319/ws/ws

Or said in a different way ...

ws://<host>:<port>/<contextPath>/<endpointPath>

回答2:

I recently faced the same issue and this is how I was able to resolve mine.

I changed the port number for my websocket server from 8080 to 8335 which was the same is the same port for my Apache server.

<?php
use Ratchet\Server\IoServer;
use Ratchet\Http\HttpServer;
use Ratchet\WebSocket\WsServer;
use MyApp\Chat;

require dirname(__DIR__) . '/vendor/autoload.php';

$server = IoServer::factory(
    new HttpServer(
        new WsServer(
            new Chat()
        )
    ),
    8335
);

$server->run();

And also made the same changes in my javascript code for the actual connection

let conn = new WebSocket('ws://localhost:8335');
conn.onopen = function(e) {
    console.log("Connection established!");

    conn.send('Hello Everyone');
};

conn.onmessage = function(e) {
    console.log(e.data);
    $("#msg").append('<br>'+e.data);
};

You can also lookup for free ports in the Apache controller by following the images below. Thanks

click on Netstart on the Xampp Controller

enter image description here

Click to refresh to view Active Socket, New Sockets and Old Sockets

Select any of the ports that falls in the burgundy section

Thank you