前提・実現したいこと
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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/11/20 13:07