Home>

We are trying to realize WebSocket under "Sakura's VPS" environment using Ratchet "PHP library".

Under my local (XAMPP) environment, I was able to confirm,
Deploy under "Sakura's VPS" environment and set the request destination in JS
When changing from "localhost" to "VPS IP Address"
Could not connect to WS. (See below for console error messages)

Is it because the Apache settings are not correct?
I am not familiar with the server and Apache, so I would appreciate it if you could teach me.

Development environment (Sakura's VPS: LAMP installation)
#OS:
$cat/etc/redhat-release
CentOS Linux release 7.8.2003 (Core)
#Apache
$httpd -v
Server version: Apache/2.4.6 (CentOS)
Server built: Apr 2 2020 13:13:23
#PHP
$php -v
PHP 7.3.24 (cli) (built: Oct 27 2020 11:01:59) (NTS)
Copyright (c) 1997-2018 The PHP Group
Zend Engine v3.3.24, Copyright (c) 1998-2018 Zend Technologies
Directory structure
Ratchet (root directory)
├ bin
| └server.php
├ src
| └ chat
| └chat.php
├ vendor
├ composer.json
├ composer.lock
└ index.php
The console error message that is occurring

The IP address of Sakura VPS is entered in [IP Address].

WebSocket connection to'ws: // [IP Address]: 8888' failed: Error in connection establishment: net :: ERR_CONNECTION_TIMED_OUT
composer.json
{
    "autoload": {
        "psr-0": {
            "chat": "src"
        }
    },


    "require": {
        "cboden/ratchet": "^ 0.4.0"
    }
}
src/chat/chat.php
<? php
namespace Chat;
use Ratchet \ MessageComponentInterface;
use Ratchet \ ConnectionInterface;
class Chat implements MessageComponentInterface {
    protected $clients;
    public function __construct () {
        $this->clients = new \ SplObjectStorage ();
    }
    public function onOpen (ConnectionInterface $conn) {
        // Store the new connection to send messages to later
        $this->clients->attach ($conn);
        echo "New connection! ({$conn->resourceId}) \ n";
    }
    public function onMessage (ConnectionInterface $from, $msg) {
        $numRecv = count ($this->clients) --1;
        echo sprintf ('Connection% d sending message "% s" to% d other connection% s'. "\ n", $from->resourceId, $msg, $numRecv, $numRecv == 1?'':'s ');
        foreach ($this->clients as $client) {
            if ($from! == $client) {
                // The sender is not the receiver, send to each client connected
                $client->send ($msg);
            }
        }
    }
    public function onClose (ConnectionInterface $conn) {
        // The connection is closed, remove it, as we can no longer send it messages
        $this->clients->detach ($conn);
        echo "Connection {$conn->resourceId} has disconnected \ n";
    }
    public function onError (ConnectionInterface $conn, \ Exception $e) {
        echo "An error has occurred: {$e->getMessage ()} \ n";
        $conn->close ();
    }
}
bin/server.php
<? php
use Ratchet \ Server \ IoServer;
use chat \ Chat;use Ratchet \ Http \ HttpServer;
use Ratchet \ WebSocket \ WsServer;
require dirname (__DIR__).'/vendor/autoload.php';
$server = IoServer :: factory (new HttpServer (new WsServer (new Chat ())), 8888);
$server->run ();
index.php
<! DOCTYPE html><html><meta charset = "utf-8"><title>Chat</title><style>.container {
    width: 600px;
}
.box {
    overflow: hidden;
}
.left {
    background-color: # D3D3D3;
    padding: 20px;
    margin: 5px;
    width: 300px;
    float: left;
}
.right {
    background-color: # ADFF2F;
    padding: 20px;
    margin: 5px;
    width: 300px;
    float: right;
}</style><script src = "http://code.jquery.com/jquery-2.2.4.js"></script><script>var requestUrl ='ws: // [IP ADDRESS]: 8888';
(function ($) {
  var settings = {};
  var methods = {
    init: function (options) {
      settings = $.extend ({{
        'uri': requestUrl,
        'conn': null,
        'message':'#message',
        'display':'#display'
      },

 options);
      // $(settings ['message']). keypress (methods ['checkEvent']);
      $('# send_message'). on ('click', function () {
        var message = $(settings ['message']). val ();
        if (message&&settings ['conn']) {
          settings ['conn']. Send (message +'');
          $(this) .chat ('drawText', message,'right');
          $(settings ['message']). val ('');
        }
      })
      $(this) .chat ('connect');
    },


    checkEvent: function (event) {
      console.log (event);
      if (event&&event.which == 13) {
        var message = $(settings ['message']). val ();
        if (message&&settings ['conn']) {
          settings ['conn']. Send (message +'');
          $(this) .chat ('drawText', message,'right');
          $(settings ['message']). val ('');
        }
      }
    },


    connect: function () {
      if (settings ['conn'] == null) {
        settings ['conn'] = new WebSocket (settings ['uri']);
        settings ['conn']. onopen = methods ['onOpen'];
        settings ['conn']. onmessage = methods ['onMessage'];
        settings ['conn']. onclose = methods ['onClose'];
        settings ['conn']. onerror = methods ['onError'];
      }
    },


    onOpen: function (event) {
      $(this) .chat ('drawText','Connect to server','left');
    },onMessage: function (event) {
      if (event&&event.data) {
        $(this) .chat ('drawText', event.data,'left');
      }
    },


    onError: function (event) {
      $(this) .chat ('drawText','Error occurred!','left');
    },


    onClose: function (event) {
      $(this) .chat ('drawText','Disconnect with server','left');
      settings ['conn'] = null;
      setTimeout (methods ['connect'],

 1000);
    },


    drawText: function (message, align ='left') {
      if (align ==='left') {
        var inner = $(' '). text (message);
      } else {
        var inner = $(' '). text (message);
      }
      var box = $(' '). html (inner);
      $('# chat'). Prepend (box);
    },


  };// end of methods
  $.fn.chat = function (method) {
    if (methods [method]) {
      return methods [method] .apply (this, Array.prototype.slice.call (arguments, 1));
    } else if (typeof method ==='object' ||! method) {
      return methods.init.apply (this, arguments);
    } else {
      $.error ('Method' + method +'does not exist');
    }
  } // end of function
}) (jQuery);
$(function () {
  $(this) .chat ({{
    'uri': requestUrl,
    'message':'#message',
    'display':'# chat'
  });
});</script><style type = "text/css">#send_btn, #send_message {
    cursor: pointer;
  }</style></head><body><input type = "text" size = "50" /><label for = "send_message">SEND MESSAGE:</label><input type = "button" name = "send_message" value = "SEND MESSAGE"></body></html>
What I tried with Apache editing
  • Add ProxyPass to the last line
ProxyPass "/ ws2 /" "ws: // [IP Adress]: 8888"
ProxyPass "/ wss2 /" "wss: // [IP Adress]: 8888"
  • Listen added
# 42 line
Listen 8888
Supplementary information

In order to always start the WebSocket server, start server.php with "supervisor"
Reference URL: http://socketo.me/docs/deploy

Other reference sites

Construction procedure until apache 2.4 series websocket passes
Linux beginners deploy Supervisor
Reverse proxy WebSockets in Apache 2.4
Apache Module mod_proxy_wstunnel

  • Answer # 1

    Does the VPS firewall allow 8888/tcp connections?
    If you allow it, we recommend that you limit the source IP.

  • Answer # 2

    In Sakura's VPS, "packet filter" is set by default. Is the setting such as "permitted port setting" implemented?

    How to use the packet filter

  • Answer # 3

    Listen 8888
    By deleting the description of, it was able to start safely.
    Thank you everyone for your cooperation.