angular - 连接在收到角度握手响应之前关闭
问题描述
我正在尝试进行套接字连接。但我收到上述错误。我正在尝试使用不同的端点来实现https://tutorialedge.net/typescript/angular/angular-websockets-tutorial/ 。
套接字服务.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);
}
}
聊天服务.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 cli 代理来获取 /api/ 到您的后端,您需要将 添加ws: true
到代理配置,否则它将无法创建 websocket 连接。
{
"/api/": {
"target": "http://localhost:8080",
"secure": false
"ws":true
}
}
推荐阅读
- intellij-idea - 如何在 Intellij 或其他 JetBrains IDE 中使用 ctags 生成的标签文件?
- here-api - 是否有任何 HERE API 可以为我提供施工区的限速信息?
- vue.js - 如何在 vue 应用中使用 Google Drive API?
- angular - 加载资源失败:服务器响应状态为 403
- javascript - 在反应组件中找不到模块
- hibernate - JPA Hibernate:批量插入不起作用
- python - 导入张量流时出现此错误“ImportError: DLL load failed: A dynamic link library (DLL) initialization routine failed”
- httpclient - .net core 3.1 和 .net 5 之间的 HttpClient 行为不同
- reactjs - 路由:将道具从一个页面传递到另一个页面
- typescript - 在 vuejs 中实现简单的 markdown 指令,反应性问题