Как Angular управляет URL-адресами с помощью Golang и веб-сокетов? - PullRequest
0 голосов
/ 03 января 2019

Я новичок в Golang, Angular (7.1.4) и веб-розетках. Я строго следую этому уроку , чтобы выучить их, и все идет как положено. Однако я не понимаю, как Angular обслуживает страницу чата на localhost: 4200 / *, где * может быть что угодно, что я наберу.

Редактировать: мой основной вопрос: как это происходит, учитывая, что единственное место, где я вообще затронул URL, похоже, находится в этой строке this.socket = new WebSocket("ws://localhost:12345/ws") в socket.service.ts в проекте Angular. Я думаю, это означает, что страница должна загружать только на локальный хост: 4200, если угодно.

Я прочитал некоторую документацию Angular, и ближе всего я пришел к ответу на его странице по маршрутизации , где написано: «** путь в последнем маршруте является подстановочным знаком. Маршрутизатор выберет этот маршрут, если запрошенный URL не совпадает ни с одним путем для маршрутов, определенных ранее в конфигурации. " Но я нигде не использовал **. На самом деле, я не использовал маршрутизацию вообще после учебника.

Вот полный файл socket.service.ts:

import { Injectable } from "@angular/core";
import { EventEmitter } from "@angular/core";

@Injectable({
  providedIn: "root"
})
export class SocketService {
  private socket: WebSocket;
  private listener: EventEmitter<any> = new EventEmitter();

  public constructor() {

    # I think only this line is used to manage the URL.
    this.socket = new WebSocket("ws://localhost:12345/ws");
    this.socket.onopen = event => {
      this.listener.emit({ type: "open", data: event });
    };
    this.socket.onclose = event => {
      this.listener.emit({ type: "close", data: event });
    };
    this.socket.onmessage = event => {
      this.listener.emit({ type: "message", data: JSON.parse(event.data) });
    };
  }

  public send(data: string) {
    this.socket.send(data);
  }

  public close() {
    this.socket.close();
  }

  public getEventListener() {
    return this.listener;
  }
}

В main.go на Голанге только две строки, и в первую очередь http.HandleFunc("/ws", wsPage), относятся к URL-адресу чата. Исходя из этого, я предположил, что страница также может загружаться на локальный хост: 12345 / ws. Но переход туда выдает "Bad Request 404 page not found" Вот код, который я считаю актуальным для main.go:

func wsPage(res http.ResponseWriter, req *http.Request) {
    conn, error := (&websocket.Upgrader{CheckOrigin: func(r *http.Request) bool { return true }}).Upgrade(res, req, nil)
    if error != nil {
        http.NotFound(res, req)
        return
    }
    client := &Client{id: uuid.NewV4().String(), socket: conn, send: make(chan []byte)}
    manager.register <- client

    go client.read()
    go client.write()
}

func main() {
    go manager.start()

    # Only these two lines relate to the URL.
    http.HandleFunc("/ws", wsPage)
    http.ListenAndServe(":12345", nil)
}

Может ли кто-нибудь объяснить, как Angular управляет URL-адресами в этом случае и как его URL имеет приоритет над Golang? Или укажите мне правильную документацию / материалы для чтения? Спасибо.

1 Ответ

0 голосов
/ 04 января 2019

Веб-сокет открывается из кода, который запускается в вашего браузера, а не из браузера напрямую (т. Е. Веб-адрес, который будет возвращать файл, HTML-документ или что-то подобное).

Другой ключевой момент, на который следует обратить внимание, это протокол:

"ws://localhost:12345/ws"

ws:// - это протокол веб-сокета, который Angular-код использует для связи с сервером.Вы не можете получить доступ к веб-сокету напрямую через адресную строку вашего браузера, потому что он не знает, как обрабатывать подключение к веб-сокету самостоятельно (только http или https, например, подключения).

Веб-сокет находится в процессе«обслуживается» приложением Go, а приложение Angular обслуживается либо Node (если вы запускаете его локально, используя ng serve), либо через статическую среду размещения (например, AWS или Google Cloud).Когда вы получаете доступ к URL-адресу, по которому обслуживается приложение Angular, код Angular загружается в ваш браузер, и система маршрутизации получает контроль.В случае приложения Angular по умолчанию, как вы упомянули, существует подстановочный маршрут, который будет направлять любые и все пути (материал после имени хоста и порт после косой черты) в корневой компонент (который обычно является основным AppComponent).

Вы можете настроить различные схемы маршрутизации с разными путями и множеством маршрутов, однако вам придется провести некоторое исследование, чтобы выяснить, что будет работать для вашего приложения / дизайна.Вы можете посмотреть здесь для получения дополнительной информации .

TL; DR

Вам необходимо разделить понятия двух программ в своем уме: одна - это угловое приложениеработает в вашем браузере, а другое приложение Go работает на сервере (или на вашем локальном компьютере).Следовательно, причина, по которой вы ссылаетесь на два разных порта на вашем локальном компьютере: порт 12345 - это то место, где сервер чата Golang принимает входящие соединения (через протокол веб-сокета ws://), а порт 4200 - это то место, где находится узел.js прослушивает входящие соединения для обслуживания пакета Angular HTML / CSS / JS.

...