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

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

ただいまの
回答率

89.09%

Socket.ioがwebsocketのハンドシェイクに失敗する

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 3,088

namaza

score 14

こちらのURLを参考にして、
socket.ioを使うためにApacheでNode.jsをリバースプロキシしています。
サーバはVirtualBox上のCentOS7です。

しかし、接続してもポーリングは行えているようなのですが、websocketになりません。

失敗するのはwsスキーマのURLであるため、
websocketのApacheのリバースプロキシの設定がおかしいのではないかと考えています。

chromeのコンソールの出力

VM1053:35 WebSocket connection to 'ws://192.168.1.23/nodejs/socket.io/?EIO=3&transport=websocket&sid=MVaFdCm29VdTj4fTAAAB' failed: Error during WebSocket handshake: Unexpected response code: 400

httpd.conf(リバースプロキシの設定は最下部にあります。)

ServerRoot "/etc/httpd"

Listen 80

Include conf.modules.d/*.conf

User apache
Group apache

ServerAdmin root@localhost

<Directory />
</Directory>

DocumentRoot "/var/www/html"

<Directory "/var/www">
    AllowOverride None
    Require all granted
</Directory>

<Directory "/var/www/html">
    Options Indexes FollowSymLinks
    AllowOverride All
    Require all granted
    Options +ExecCGI
    AddHandler cgi-script .cgi .pl
</Directory>

<IfModule dir_module>
    DirectoryIndex index.html index.cgi index.php
</IfModule>

<Files ".ht*">
    Require all denied
</Files>

ErrorLog "logs/error_log"

LogLevel warn

<IfModule log_config_module>
    LogFormat "%h %l %u %t \"%r\" %>s %b \"%{Referer}i\" \"%{User-Agent}i\"" combined
    LogFormat "%h %l %u %t \"%r\" %>s %b" common

    <IfModule logio_module>
      LogFormat "%h %l %u %t \"%r\" %>s %b \"%{Referer}i\" \"%{User-Agent}i\" %I %O" combinedio
    </IfModule>

    CustomLog "logs/access_log" combined
</IfModule>

<IfModule alias_module>
    ScriptAlias /cgi-bin/ "/var/www/cgi-bin/"

</IfModule>

<Directory "/var/www/cgi-bin">
    AllowOverride None
    Options None
    Require all granted
</Directory>

<IfModule mime_module>
    TypesConfig /etc/mime.types

    AddType application/x-compress .Z
AddType application/x-gzip .gz .tgz

    AddType text/html .shtml
    AddOutputFilter INCLUDES .shtml
</IfModule>

AddDefaultCharset UTF-8

<IfModule mime_magic_module>
    MIMEMagicFile conf/magic
</IfModule>

EnableSendfile on

IncludeOptional conf.d/*.conf

ServerTokens Prod

KeepAlive On

LoadModule proxy_module lib64/httpd/modules/mod_proxy.so
LoadModule proxy_http_module lib64/httpd/modules/mod_proxy_http.so
LoadModule proxy_wstunnel_module lib64/httpd/modules/mod_proxy_wstunnel.so

 RewriteEngine On
  RewriteCond %{REQUEST_URI}  ^/nodejs/socket.io            [NC]
  RewriteCond %{QUERY_STRING} transport=websocket    [NC]
  RewriteRule ^/nodejs(.*)    ws://192.168.1.23:3000/$1 [P,L]

ProxyRequests Off
ProxyPass /nodejs http://192.168.1.23:3000 retry=0 timeout=600 keepalive=On
#ProxyPassReverse /nodejs ws://192.168.1.23:3000
ProxyPassReverse /nodejs http://192.168.1.23:3000

サーバ側

/*jshint esversion: 6 */
const http = require( 'http' ); // HTTPモジュール読み込み
const fs = require( 'fs' ); // ファイル入出力モジュール読み込み
const server = http.createServer( function( req, res ){
                fs.readFile( __dirname + '/index.html', function ( err, data ) {
                if ( err ) {
                        res.writeHead( 500 );
                        return res.end( 'Failed to load index.html' );
                }
                res.writeHead( 200 );
                res.end();
        } );
} ).listen( 3000);
var sock = require('socket.io')
io = sock.listen(server);
io.sockets.on('connection', function(socket) {
    console.log("connection");
    socket.on('message', function(data) {
        console.log('message');
        io.sockets.emit('message', {value: data.value});
    });
    socket.on('disconnect', function() {
        console.log('disconnect');
    });
});

クライアント側

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button onclick="sendMessage()" id="buttt" value="bun">bd</button>
<div id="receivedMessage"></div>
<script src="nodejs/socket.io/socket.io.js"></script>
<script type="text/javascript">
        var socket = io.connect('http://192.168.1.23', {path:'/nodejs/socket.io'});
        socket.on('connect', function(msg) {
                console.log("connect");
        });
        socket.on('message', function(msg) {
                document.getElementById("receivedMessage").innerHTML = msg.value;
        });
        function sendMessage() {
                var msg = document.getElementById("buttt").value;
                socket.emit('message', {value: msg});
        }
        function disconnect() {
                socket.disconnect();
        }
</script>
</body>
</html>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

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

  • ただいまの回答率 89.09%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る