HerokuのWebSocketに接続できません

Question

私はWebSocketに接続するためにRedisとNode.JSを使用しているPHP Laravelアプリケーションを開発しています。

私はポート3000でノードサーバーを稼動しようとしていますが、herokuは動的にポートを割り当てています。

このため、クライアント側で正しいポート番号を取得できません。

私はそれを修正するために何をすべきですか？

クライアント側の設定：下図のように

var socket = io.connect('http://app-around.herokuapp.com:3000'); 
    Note: Host Name is app-around.herokuapp.com 

バックエンドがファインを実行している：

C:\xampp\htdocs\around-us>heroku run node socket.jsRunning node 
    socket.js on app-around... up, run.5567 (Free) 
    // Randomly generated port number it is.. 

    Message Recieved: {"event":"App\\Events\\NewMessage","data":{"data": 
    {"message":"Question Posted"}},"socket":null} 

ので、イベントがサーバー側で生成されますが、クライアント側でそれらを受けることができないです得ています。フロントエンドにいくつかのことを試してみましたが、それらのどれもが作業していない：

Eg: 1) var socket = io.connect(); 
     2) var socket = io.connect(window.location.hostname); 

ノードServerコード：

 var app = require('express')(); 
var http = require('http').Server(app); 
var io = require('socket.io')(http); 
var Redis = require('ioredis'); 
var redis = require('redis').createClient(process.env.REDIS_URL); 

redis.subscribe('test-channel', function(err, count) { 

}); 

redis.on('message', function(channel, message) { 
    console.log('Message Recieved: ' + message); 

    message = JSON.parse(message); 

    io.emit(channel + ':' + message.event, message.data); 

    var temp = "data"; 
    io.emit("time", temp); 

}); 

var port = process.env.PORT || 3000; 

http.listen(port, function(){ 
    console.log('Listening on Port 23000'); 
}); 

JSコードをフロントエンド側の角度のアプリのために：

var socket = io(); 

    socket.on("time",function(data){ 
      alert(data); 
    }); 

Answer 1

ノードでは、env varsからポートを取得する必要があります。

server.listen(+process.env.PORT || 3000,() => { 
    Logger.info(`Listening on port ${process.env.PORT || 3000}...`); 
}); 

とあなたのIOクライアントにポート番号を指定する必要はありません：アンドレスで述べたように

io.connect('http://app-around.herokuapp.com')

Answer 2

を、サーバーが環境からポートを収集する必要があります。

開発環境にはPORTという変数がないため、デフォルトのポートを追加します（これは一般的なもので、3000を使用しています）。

process.env.PORT || 3000 

クライアント - と私はブラウザを想定しています - 自動的にHTTPのURLアドレスを使用してターゲットサーバを識別し、正しいのWebSocket URLとポートに接続することができるはずです。

私は既製のライブラリ（ライブラリは、多くの場合、独自のURLスキームを持っている）を使用しないとき、私は次のコードのバリエーションを使用し

：

// websocket connects to root ("/") 
var ws_url = 
    document.location.origin.replace(/^http/i, "ws"); 
// OR web socket connects to full URL path (i.e. "/my/path") 
var ws_url = 
    document.location.href.replace(/^http/i, "ws"); 

Answer 3

を私は問題がクライアント側 VARにあると思いますソケット= io.connect（ 'http://app-around.herokuapp.com'）; これを試すか var socket = io.connect（）;