Ratchet「Web Socket」（さくらのVPS環境下で）実装のためのサーバー設定方法

前提・実現したいこと

Ratchet「PHPライブラリ」を使用し、「さくらのVPS」環境下に、WebSocketを実現しようとしております。

私のローカル（XAMPP）環境下では、確認が行えましたが、
「さくらのVPS」環境下デプロイし、JSにおけるリクエスト先設定を
「localhost」→「VPS IP Address」に変更した際に、
WSとの接続が行えませんでした。（コンソールエラーメッセージは下記参照ください）

Apacheの設定が正しく行えていないことが原因でしょうか？
サーバーやApacheについての知識不足のため、ご教示いただけますと幸いです。

開発環境（さくらのVPS：LAMPインストール）

ssh
1# OS:
2$cat /etc/redhat-release
3CentOS Linux release 7.8.2003 (Core)
4
5# Apache
6$httpd -v
7Server version: Apache/2.4.6 (CentOS)
8Server built:   Apr  2 2020 13:13:23
9
10# PHP 
11$php -v
12PHP 7.3.24 (cli) (built: Oct 27 2020 11:01:59) ( NTS )
13Copyright (c) 1997-2018 The PHP Group
14Zend Engine v3.3.24, Copyright (c) 1998-2018 Zend Technologies

ディレクトリ構成

Ratchet(root directory)
├bin
|└server.php
├src
|└chat
| └chat.php
├vendor
├composer.json
├composer.lock
└index.php

発生しているコンソールエラーメッセージ

[IP Address]内には、さくらVPSのIPアドレスをいれております。

WebSocket connection to 'ws://[IP Address]:8888' failed: Error in connection establishment: net::ERR_CONNECTION_TIMED_OUT

composer.json

json
1{
2    "autoload": {
3        "psr-0": {
4            "chat": "src"
5        }
6    },
7    "require": {
8        "cboden/ratchet": "^0.4.0"
9    }
10}

src/chat/chat.php

PHP
1<?php
2
3namespace Chat;
4
5use Ratchet\MessageComponentInterface;
6use Ratchet\ConnectionInterface;
7
8class Chat implements MessageComponentInterface {
9	protected $clients;
10	
11	public function __construct() {
12		$this->clients = new \SplObjectStorage ();
13	}
14	
15	public function onOpen(ConnectionInterface $conn) {
16		// Store the new connection to send messages to later
17		$this->clients->attach ( $conn );
18		echo "New connection! ({$conn->resourceId})\n";
19	}
20	
21	public function onMessage(ConnectionInterface $from, $msg) {
22		$numRecv = count ( $this->clients ) - 1;
23		echo sprintf ( 'Connection %d sending message "%s" to %d other connection%s' . "\n", $from->resourceId, $msg, $numRecv, $numRecv == 1 ? '' : 's' );
24		
25		foreach ( $this->clients as $client ) {
26			if ($from !== $client) {
27				// The sender is not the receiver, send to each client connected
28				$client->send ( $msg );
29			}
30		}
31	}
32	public function onClose(ConnectionInterface $conn) {
33		// The connection is closed, remove it, as we can no longer send it messages
34		$this->clients->detach ( $conn );
35		
36		echo "Connection {$conn->resourceId} has disconnected\n";
37	}
38	public function onError(ConnectionInterface $conn, \Exception $e) {
39		echo "An error has occurred: {$e->getMessage()}\n";
40		
41		$conn->close ();
42	}
43}

bin/server.php

PHP
1<?php
2use Ratchet\Server\IoServer;
3use chat\Chat;
4use Ratchet\Http\HttpServer;
5use Ratchet\WebSocket\WsServer;
6
7require dirname ( __DIR__ ) . '/vendor/autoload.php';
8
9$server = IoServer::factory ( new HttpServer( new WsServer( new Chat () ) ), 8888 );
10
11$server->run ();

index.php

PHP
1<!DOCTYPE html>
2<html lang="ja">
3<meta charset="utf-8">
4<title>Chat</title>
5<style>
6.container {
7    width: 600px;
8}
9.box{
10    overflow:hidden;
11}
12.left {
13    background-color: #D3D3D3;
14    padding: 20px;
15    margin: 5px;
16    width: 300px;
17    float:left;
18}
19.right {
20    background-color: #ADFF2F;
21    padding: 20px;
22    margin: 5px;
23    width: 300px;
24    float:right;
25
26}
27</style>
28<script src="http://code.jquery.com/jquery-2.2.4.js"></script>
29<script>
30var requestUrl = 'ws://[IP ADDRESS]:8888';
31(function($){
32  var settings = {};
33  var methods = {
34    init : function( options ) {
35      settings = $.extend({
36        'uri'   : requestUrl,
37        'conn'  : null,
38        'message' : '#message',
39        'display' : '#display'
40      }, options);
41      // $(settings['message']).keypress( methods['checkEvent'] );
42      $('#send_message').on('click', function(){
43        var message = $(settings['message']).val();
44        if (message && settings['conn']) {
45          settings['conn'].send(message + '');
46          $(this).chat('drawText',message,'right');
47          $(settings['message']).val('');
48        }
49      })
50      $(this).chat('connect');
51    },
52    checkEvent : function ( event ) {
53      console.log(event);
54      if (event && event.which == 13) {
55        var message = $(settings['message']).val();
56        if (message && settings['conn']) {
57          settings['conn'].send(message + '');
58          $(this).chat('drawText',message,'right');
59          $(settings['message']).val('');
60        }
61      }
62    },
63    connect : function () {
64      if (settings['conn'] == null) {
65        settings['conn'] = new WebSocket(settings['uri']);
66        settings['conn'].onopen = methods['onOpen'];
67        settings['conn'].onmessage = methods['onMessage'];
68        settings['conn'].onclose = methods['onClose'];
69        settings['conn'].onerror = methods['onError'];
70      }
71    },
72    onOpen : function ( event ) {
73      $(this).chat('drawText','サーバに接続','left');
74    },
75    onMessage : function (event) {
76      if (event && event.data) {
77        $(this).chat('drawText',event.data,'left');
78      }
79    },
80    onError : function(event) {
81      $(this).chat('drawText','エラー発生!','left');
82    },
83    onClose : function(event) {
84      $(this).chat('drawText','サーバと切断','left');
85      settings['conn'] = null;
86      setTimeout(methods['connect'], 1000);
87    },
88    drawText : function (message, align='left') {
89      if ( align === 'left' ) {
90        var inner = $('<div class="left"></div>').text(message);
91      } else {
92        var inner = $('<div class="right"></div>').text(message);
93      }
94      var box = $('<div class="box"></div>').html(inner);
95      $('#chat').prepend(box);
96    },
97  }; // end of methods
98
99  $.fn.chat = function( method ) {
100    if ( methods[method] ) {
101      return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
102    } else if ( typeof method === 'object' || ! method ) {
103      return methods.init.apply( this, arguments );
104    } else {
105      $.error( 'Method ' +  method + ' does not exist' );
106    }
107  } // end of function
108})( jQuery );
109
110$(function() {
111  $(this).chat({
112    'uri' : requestUrl,
113    'message' : '#message',
114    'display' : '#chat'
115  });
116});
117</script>
118<style type="text/css">
119  #send_btn, #send_message{
120    cursor: pointer;
121  }
122</style>
123</head>
124<body>
125  <input type="text" id="message" size="50" />
126  <label id="send_btn" for="send_message">SEND MESSAGE : </label>
127  <input type="button" name="send_message" id="send_message" value="SEND MESSAGE">
128  <div id="chat" class="container"></div>
129</body>
130</html>

Apacheの編集で試したこと

最終行にProxyPassを追記

conf
1ProxyPass "/ws2/" "ws://[IP Adress]:8888"
2ProxyPass "/wss2/" "wss://[IP Adress]:8888"

Listen追加

# 42行目あたり
Listen 8888

補足情報

WebSocketサーバーを常時起動させるために、「supervisor」にて、server.phpを起動設定
参考URL:http://socketo.me/docs/deploy

その他参考サイト

apache 2.4系のwebsocketが通るまでの構築手順
 Linux初心者がSupervisorを導入する
 Apache 2.4 で WebSocket もリバースプロキシする
 Apache Module mod_proxy_wstunnel

行動規範の内容に同意します

回答3件

さくらの VPS では、デフォルトで「パケットフィルタ」が設定されていますが、「許可ポート設定」等の設定は実施されていますか？

パケットフィルタの利用方法

投稿2020/11/14 22:32

CHERRY

総合スコア25171

fenjapa

2020/11/20 13:07

ご回答ありがとうございます。パケットフィルタの設定はいったんすべて外して対応しております。

行動規範の内容に同意します

VPSのfirewallで8888/tcpの接続は許可していますか？
許可する場合、送信元IPを制限しておくことをおススメします。

投稿2020/11/14 05:22

sukekeke0

総合スコア331

fenjapa

2020/11/20 13:09

ご回答ありがとうございます。 firewallのポート開放を firewall-cmd --add-port=8888/tcp --zone=public --permanent で接続許可をしております。

行動規範の内容に同意します

自己解決

Listen 8888
の記述を削除することで、無事起動できました。
皆様、ご協力いただきありがとうございました。

投稿2020/11/20 13:09

fenjapa

総合スコア8

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！