angular SocketIoConfig подключение к веб-сокету на героку

Question

В настоящее время у меня есть простое соединение WebSocket в моем приложении angular с использованием socket.io. Когда я запускаю свой код через ng serve, он работает нормально, однако после развертывания в приложении Heroku появляется ошибка 'net :: ERR_NAME_NOT_RESOLVED'. Похоже, что где-то после установки моего SocketIoConfig имя хоста меняется на null, но это происходит только в Heroku.

Журнал консоли в моем app.module.ts отображается на:

1. нг подачи правильно сформировано как 'http://localhost: 4444 '
2. Heroku правильно сформировано как 'https://app-name.herokuapp.com '

Однако при работе на Heroku моя консольная ошибка:

GET https://null/socket.io/?EIO=3&transport=polling&t=N1tbO9M net :: ERR_NAME_NOT_RESOLVED

Почему имя хоста меняется на ноль? Чего мне не хватает?

app.enter code heremodule.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { ChartsModule } from 'ng2-charts';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';

import { FlexLayoutModule } from '@angular/flex-layout';
import { PlayerStatsComponent } from './player-stats/player-stats.component';
import { playerName, filterByRole, orderHeroBy, greaterThan10m, replace } from './custom.pipe';
import { HomePageComponent } from './home-page/home-page.component';
import { WinrateComponent } from './winrate/winrate.component';
import { FormsModule } from '@angular/forms';

import { SocketIoModule, SocketIoConfig } from 'ngx-socket-io';

let port = ( window.location.hostname === 'localhost' ) ? ':8080' : '';
let url = `${window.location.protocol}//${window.location.hostname}${port}`;
const config: SocketIoConfig = { url: url, options: {} };
console.log( config );

@NgModule({
    declarations: [
        AppComponent,
        HeaderComponent,
        PlayerStatsComponent,
        playerName,
        filterByRole,
        greaterThan10m,
        orderHeroBy,
        HomePageComponent,
        WinrateComponent,
        replace
    ],
    imports: [
        HttpClientModule,
        BrowserModule,
        AppRoutingModule,
        ChartsModule,
        FlexLayoutModule,
        FormsModule,
        SocketIoModule.forRoot(config)
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

server. js file

//Install express server
const express = require( 'express' );
const path = require( 'path' );

const http = require('http');
const https = require('https');

// webserver
const app = express();
app.use( express.static( __dirname + '/dist/statwatchII' ) );
app.get( '/*', function( req, res ) {
    res.sendFile( path.join( __dirname+'/dist/statwatchII/index.html' ) );
});

// socketserver
const port = process.env.PORT || 8080;
const server = http.Server(app);
const io = require( 'socket.io' )( server );

io.on( "connection", ws => {
    console.log( 'connected' );
} )

server.listen( port, () => { console.log( `listening on port: ${port}`) } );

Answer 1

Ваше приложение не развертывается правильно.

1. ng подача правильно сформирована как 'http://localhost: 4444 '
2. Heroku правильно формируется как 'https://app-name.herokuapp.com: 4444 '

Это не так. При развертывании веб-приложения на Heroku вы больше не добавляете номер порта после имени хоста. DNS Heroku автоматически переводит имя хоста в IP-адрес + номер порта.
Кроме того, вы не можете решить, каким будет номер порта.

app.listen( process.env.PORT || 8080 );

С помощью этой строки вы создаете свою веб-страницу. доступно в http://localhost:8080/ на локальном хосте (при условии, что вы не установили переменную окружения $PORT). На Heroku ваша веб-страница будет доступна по адресу https://app-name.herokuapp.com/

server.listen(4444);

Эта строка будет работать на localhost. Но это не сработает в Heroku, поскольку вы не можете точно определить, какой порт работает в вашем веб-приложении.

На самом деле вам не нужны два порта, поскольку вы можете комбинировать http и ws. Вы можете сделать что-то вроде этого.

const app = require('express')();
const server = require('http').createServer(app);
const io = require('socket.io')(server);
io.on('connection', () => { /* … */ });
server.listen( process.env.PORT || 8080 );

Я развернул d-зону на Heroku с аналогичной тактикой c. Здесь вы можете найти соответствующий исходный код:
https://github.com/vegeta897/d-zone/blob/63730fd7f44d2716a31fcae55990d83c84d5ffea/script/websock.js
Вот ссылка на развертывание: https://heroku.com/deploy?template=https: //github.com/vegeta897/d-zone/tree / Heroku

Answer 2

Чтобы подключить клиент WebSocket в развертывании Heroku, мне нужно было сделать две вещи:

Удалить жесткое кодирование номера порта сервера веб-сокетов (как предложено выше Тин Нгуеном). Теперь это означает, что порт жестко задан только для localhost.

const port = process.env.PORT || 8080;
const server = http.Server(app);
const io = require( 'socket.io' )( server );
server.listen( port, () => { console.log( `listening on port: ${port}`) } );

Я также обновил конфигурацию clientide socket.io, чтобы задать URL-адрес неопределенным, если имя хоста не является localhost. В socket.io, если URL не определен, он устанавливает его вручную из исходного имени хоста.

let hostname = window.location.hostname;
let url = ( hostname === 'localhost' ) ? `${window.location.protocol}//${hostname}:8080` : undefined;
const config: SocketIoConfig = { url: url, options: {} };