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

Question

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

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

我阅读了 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 的吗？或者给我指出正确的文档/阅读 Material ？谢谢。

Answer 1

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

这里要注意的另一个关键是协议(protocol):

"ws://localhost:12345/ws"

ws:// 是 Angular 代码用来与服务器通信的 websocket 协议(protocol)。您不能直接使用浏览器的 URL 栏访问 websocket，因为它不知道如何自己处理 websocket 连接(例如，仅 http 或 https，连接)。

Websocket 由 Go 应用程序“服务”，而 Angular 应用程序由任一节点(如果您在本地运行它，使用 ng serve)或通过静态托管环境提供服务(如 AWS 或谷歌云)。当您访问提供 Angular 应用程序的 URL 时，Angular 代码会下载到您的浏览器，路由系统会接管控制权。在默认的 Angular 应用程序的情况下，有一个通配符路由，如您所提到的，它将所有路径(主机名和斜杠后的端口之后的内容)定向到根组件(通常是主要的 AppComponent) .

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

长话短说

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