在收到角度的握手响应之前连接已关闭

Posted 2023-02-16

【中文标题】在收到角度的握手响应之前连接已关闭

【英文标题】：Connection closed before receiving a handshake response in angular

【发布时间】：2018-11-12 12:21:20

【问题描述】：

我正在尝试进行套接字连接。但我收到上述错误。我正在尝试使用不同的端点实现https://tutorialedge.net/typescript/angular/angular-websockets-tutorial/。

socket.service.ts

import  Injectable  from '@angular/core';
import * as Rx from 'rxjs/Rx';

@Injectable(
providedIn: 'root'
)
export class SocketService 

constructor()  

private subject: Rx.Subject<MessageEvent>;

public connect(url): Rx.Subject<MessageEvent> 
if (!this.subject) 
  this.subject = this.create(url);
  console.log("Successfully connected: " + url);
   
  return this.subject;
  

  private create(url): Rx.Subject<MessageEvent> 
  let ws = new WebSocket(url);

  let observable = Rx.Observable.create(
  (obs: Rx.Observer<MessageEvent>) => 
    ws.onmessage = obs.next.bind(obs);
    ws.onerror = obs.error.bind(obs);
    ws.onclose = obs.complete.bind(obs);
    return ws.close.bind(ws);
   )
 let observer = 
    next: (data: Object) => 
        if (ws.readyState === WebSocket.OPEN) 
            ws.send(JSON.stringify(data));
        
    

return Rx.Subject.create(observer, observable);

chat.service.ts

import  Injectable  from '@angular/core';
import  Observable, Subject  from 'rxjs/Rx';
import SocketService from '../services/socket.service';

let ws_scheme = window.location.protocol == "https:" ? "wss" : "ws";
let ws_path = ws_scheme + '://' + window.location.host + 
"/api/chat/stream/";
const CHAT_URL = ws_path;

export interface Message 
author: string,
message: string


@Injectable(
providedIn: 'root'
)

export class UploadSocketService 

public messages: Subject<Message>;

constructor(wsService: SocketService)  
this.messages = <Subject<Message>>wsService
        .connect(CHAT_URL)
        .map((response: MessageEvent): Message => 
            let data = JSON.parse(response.data);
            return 
                author: data.author,
                message: data.message
            
        );

我在 socket.service.ts 中遇到错误，其中代码为 let ws = new WebSocket(url);

如何解决？

【问题讨论】：

您使用的是哪个版本的 Angular/RxJS？错误说明了什么？

Angular 版本是 6。Rxjs 版本是 6.3.3。错误显示“与 'ws://localhost:4200/api/chat/stream/' 的 WebSocket 连接失败：在收到握手响应之前连接已关闭”。我确实收到一条控制台消息，说明从我的 socket.service.ts 成功连接

我认为您不必在套接字服务器中将 * 作为 RX 导入，但这也可能不是您的问题。听起来您的 API 方面存在问题，而不是您的角度代码。

【参考方案1】：

如果您使用 Angular cli 代理来获取 /api/ 到您的后端，您需要将 ws: true 添加到代理配置中，否则它将无法创建 websocket 连接。

  "/api/": 
    "target": "http://localhost:8080",
    "secure": false
    "ws":true
  

【讨论】：

你救了我的命，过去两天我一直在努力解决这个问题。