代码之家  ›  专栏  ›  技术社区  ›  nusantara

Angular如何使用golang和websockets管理URL?

  •  1
  • nusantara  · 技术社区  · 7 年前

    我刚接触过Golang、Angular(7.1.4)和WebSockets。我在跟踪这个 tutorial 严格学习,一切按预期运行。但是,我不理解Angular如何为本地主机的聊天室页面提供服务:4200/*,其中*可以是我键入的任何内容。

    编辑:我的主要问题是,如果我影响URL的唯一地方似乎在这行中,这是如何发生的? this.socket = new WebSocket("ws://localhost:12345/ws") 在角度项目的socket.service.ts中。我认为这意味着页面应该加载 只有 在本地主机上: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的URL吗?或者给我指出正确的文件/阅读材料?谢谢。

    1 回复  |  直到 7 年前
        1
  •  1
  •   Tim Klein    7 年前

    从运行的代码打开WebSocket 在里面 您的浏览器,而不是直接从浏览器(即返回文件、HTML文档或类似内容的网址)返回。

    这里需要注意的另一个关键问题是协议:

    "ws://localhost:12345/ws"
    

    这个 ws:// 是Angular代码用于与服务器通信的WebSocket协议。不能直接使用浏览器的URL栏访问WebSocket,因为它不知道如何单独处理WebSocket连接(仅限 http https ,例如连接)。

    websocket正由go应用程序“服务”,而angular应用程序正由任一节点(如果您在本地运行它,请使用 ng serve )或者通过静态托管环境(如AWS或谷歌云)。当您访问正在服务Angular应用程序的URL时,Angular代码将下载到您的浏览器中,并且路由系统将进行控制。在默认角度应用程序的情况下,如您所提到的,有一个通配符路由,它将把任何和所有路径(主机名后面的内容和斜杠后面的端口)指向根组件(通常是主AppComponent)。

    您可以使用不同的路径和许多路由设置不同的路由方案,但是,您必须进行一些研究,以发现什么对您的应用程序/设计有效。你可以看看 here for more info .

    DR

    你需要将这两个程序的概念分开:一个是在你的浏览器中运行的角型应用程序,另一个是在服务器(或你的本地机器)上运行的Go应用程序。因此,您引用本地计算机上两个不同端口的原因是: 12345 端口是golang聊天服务器接受传入连接的位置(通过 WS:// WebSocket协议),以及 4200 port是node.js监听传入连接以服务angular html/css/js包的地方。

    推荐文章