Angular 如何使用 Golang 和 websockets 管理 URL？

Question

我是 Golang、Angular (7.1.4) 和 websockets 的新手。我严格按照tutorial 来学习它们，一切都按预期运行。但是，我不明白 Angular 如何在 localhost:4200/* 上为聊天室页面提供服务，其中 * 可以是我输入的任何内容。

编辑：我的主要问题是，考虑到我影响 URL 的唯一地方似乎在 Angular 项目的 socket.service.ts 中的这一行 this.socket = new WebSocket("ws://localhost:12345/ws") 中，这是怎么发生的。我认为这意味着页面应该在 localhost:4200 上加载only，如果有的话。

我阅读了一些 Angular 的文档，我得到的最接近答案的答案是在 routing 的页面上，上面写着“最后一条路由中的 ** 路径是通配符。路由器将选择这个如果请求的 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;
  }
}

在 Golang 的 main.go 中，只有两行，主要是 http.HandleFunc("/ws", wsPage)，与聊天室 URL 相关。基于此，我假设页面也可以加载到 localhost:12345/ws 上。但是去那里会产生“找不到错误的请求 404 页面”。这是我认为与 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 的吗？或者指出我正确的文档/阅读材料？谢谢。

Answer 1

websocket 是通过在您的浏览器中运行的代码打开的，而不是直接从浏览器打开（即返回文件、html 文档或类似内容的网址）。

这里要注意的另一个关键是协议：

"ws://localhost:12345/ws"

ws:// 是 Angular 代码用来与服务器通信的 websocket 协议。您无法通过浏览器的 URL 栏直接访问 websocket，因为它不知道如何自行处理 websocket 连接（仅http 或https，例如连接）。

Websocket 由 Go 应用程序“服务”，Angular 应用程序由 Node（如果您在本地运行，使用 ng serve）或静态托管环境（如 AWS 或 Google Cloud）提供服务)。当您访问提供 Angular 应用程序的 URL 时，Angular 代码会下载到您的浏览器并由路由系统控制。在默认 Angular 应用程序的情况下，有一个通配符路由，正如您所提到的，它将引导所有路径（主机名和斜杠后的端口）到根组件（通常是主 AppComponent） .

您可以使用不同的路径和许多路由设置不同的路由方案，但是，您必须进行一些研究以发现适合您的应用程序/设计的方法。你可以看看here for more info。

TL;DR

你需要在脑海中区分这两个程序的概念：一个是运行在浏览器中的 Angular App，另一个是运行在服务器（或本地机器）上的 Go App。因此，您引用本地计算机上两个不同端口的原因：12345 端口是 Golang 聊天服务器接受传入连接的位置（通过 ws:// websocket 协议），4200 端口是 Node.js 的位置。 Node.js 正在侦听传入连接以服务 Angular HTML/CSS/JS 包。