How to run WebSocket and HTTP Server on the same port using ReactPHP and Ratchet?

Question

I've the following code:

use Ratchet\Http\HttpServer;
use Ratchet\WebSocket\WsServer;

$loop = \React\EventLoop\Factory::create();

$socketServer = new \React\Socket\Server('127.0.0.1:8080', $loop);

$httpServer = new \React\Http\Server(function(\Psr\Http\Message\ServerRequestInterface $request) {
  return new \React\Http\Response(200, [
      'Content-Type' => 'text/plain'
    ],
    'Hello, World'
  );
});

$httpServer->listen($socketServer);

$rrServer = new RRServer(); // Implements MessageComponentInterface

$webSocketServer = new IoServer(
  new HttpServer(
    new WsServer(
      $rrServer
    )
  ),
  $socketServer,
  $loop
);

$webSocketServer->run();

The code works, but I'm only able to access it using http://localhost:8080, and when I try to connect using WebSocket, the connection is opened, and then it immediately closes. Also, When I create a new socket with different port then I'm able to access both using http:// and ws://

What's wrong with my code? How can I run WebSocket and HTTP Server on the same port?

score 4 · Answer 1 · edited May 18 '21 at 13:23

Hey ReactPHP core team member here. In short you can listen with two servers on one port using so_reuseport on the socket server but that only sort of round robins connections to either of them. What you can do is try the suggestions cboden and I did here and lets us know if you had any issues with those: https://github.com/ratchetphp/Ratchet/issues/771#issuecomment-569439423

Which are namely:

Your code is trying to attach two SocketServer's to the same port. You need to attach a single SocketServer to one port, then re-route traffic based on a condition of your choosing (HTTP header, endpoint, or sub-domain for example). See https://github.com/ratchetphp/Ratchet/blob/master/src/Ratchet/App.php class or some of https://github.com/reactphp/http/blob/master/examples/82-server-upgrade-chat.php for some inspiration.
Take a look at: https://github.com/voryx/WebSocketMiddleware

Thanks for the answer. For now, I've created two sockets one for handling WebSocket and another for handling HTTP Requests. — Malik Naik, Dec 29 '19 at 15:36

ttrasn · Answer 2 · 2019-12-29T09:26:22.007

1

Actually you can not run multi websocket in same port. but you can join all websockets in one. and separate them with url query like this.

and in your code can get source of request by :

function onOpen( ConnectionInterface $conn ) {
    $querystring = $conn->WebSocket->request->getQuery()->toArray();
    if($querystring['source'] == 'socket_1'){
        // run socket 1 jobs
    else{
        // do socket 2
    }
    // and change
}

I didnt do it and i didnt test it. so ... :)

edited Dec 29 '19 at 09:26

answered Dec 29 '19 at 09:08

ttrasn

4,322
4
26
43

The thing I'm trying to do is to run the WebSocket and the HTTP Server on one Socket but it's not working. – Malik Naik Dec 29 '19 at 15:34

How to run WebSocket and HTTP Server on the same port using ReactPHP and Ratchet?

2 Answers2