403订阅WebSocket时发生RXJS错误|Angular

z9ju0rcb 于 2022-11-11 发布在 Angular

关注(0)|答案(2)|浏览(182)

我试图找到一个解决这个问题的方法，而不升级Angular 或依赖关系，因为它可能会影响其余的代码库

package.json

{
  "name": "angular4",
  "version": "1.0.0",
  "description": "QuickStart package.json from the documentation for visual studio 2017 & WebApi",
  "scripts": {
    "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
    "lint": "tslint ./app/**/*.ts -t verbose",
    "lite": "lite-server",
    "pree2e": "webdriver-manager update",
    "test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"",
    "test-once": "tsc && karma start karma.conf.js --single-run",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "gulp": "gulp",
    "rimraf": "rimraf",
    "build": "gulp build",
    "dev-build": "gulp dev-build"
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "dependencies": {
    "@angular/animations": "5.0.2",
    "@angular/common": "5.0.2",
    "@angular/compiler": "5.0.2",
    "@angular/core": "5.0.2",
    "@angular/forms": "5.0.2",
    "@angular/http": "5.0.2",
    "@angular/platform-browser": "5.0.2",
    "@angular/platform-browser-dynamic": "5.0.2",
    "@angular/router": "5.0.2",
    "@ng-bootstrap/ng-bootstrap": "1.0.0",
    "@progress/kendo-angular-buttons": "4.0.0",
    "@progress/kendo-angular-dateinputs": "3.7.2",
    "@progress/kendo-angular-dialog": "3.4.0",
    "@progress/kendo-angular-dropdowns": "3.5.3",
    "@progress/kendo-angular-excel-export": "^2.3.0",
    "@progress/kendo-angular-grid": "3.14.0",
    "@progress/kendo-angular-inputs": "4.2.1",
    "@progress/kendo-angular-intl": "1.7.0",
    "@progress/kendo-angular-l10n": "^1.4.0",
    "@progress/kendo-angular-layout": "3.1.1",
    "@progress/kendo-angular-notification": "^1.2.0",
    "@progress/kendo-angular-popup": "2.5.0",
    "@progress/kendo-angular-resize-sensor": "3.0.0",
    "@progress/kendo-angular-tooltip": "1.2.0",
    "@progress/kendo-data-query": "1.5.1",
    "@progress/kendo-drawing": "1.5.11",
    "@progress/kendo-popup-common": "1.6.0",
    "@progress/kendo-schematics": "0.2.5",
    "@progress/kendo-theme-default": "2.46.0",
    "core-js": "^2.4.1",
    "moment": "^2.20.1",
    "rxjs": "5.5.6",
    "systemjs": "0.19.40",
    "zone.js": "^0.7.4",
    "jszip": "3.2.2"
  },
  "devDependencies": {
    "@types/jasmine": "2.5.36",
    "browserify": "^16.2.3",
    "canonical-path": "0.0.2",
    "concurrently": "^3.2.0",
    "gulp": "^3.9.1",
    "gulp-cache-bust": "^1.4.0",
    "gulp-clean": "^0.3.2",
    "gulp-concat": "^2.6.1",
    "gulp-inline-ng2-template": "2.0.1",
    "gulp-minify": "0.0.15",
    "gulp-minify-css": "^1.2.4",
    "gulp-typescript": "3.2.4",
    "gulp-uglify": "^3.0.1",
    "jasmine-core": "~2.4.1",
    "karma": "^1.3.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "lite-server": "^2.2.2",
    "protractor": "~4.0.14",
    "rimraf": "^2.5.4",
    "systemjs-builder": "^0.15.16",
    "tslint": "^3.15.1",
    "typescript": "^3.0.3",
    "vinyl-source-stream": "^2.0.0"
  },
  "repository": {}
}

search.component.ts

import { Subject, Subscription } from "rxjs";
import { WebSocketSubject } from "rxjs/observable/dom/WebSocketSubject";
import { webSocket } from "rxjs/observable/dom/webSocket";
   public openWebSocket = async (uniqueId: string) => {
    const url: string = this.commonService.wssurl + '/api/ABCWebSocket/' + uniqueId;
    let socket: WebSocketSubject<any> = webSocket(url);
    console.log('socketsub = ' + WebSocketSubject.webSocket);
    console.log('url ' + url);

    let onWebSocketResponse = new Subject<any>();
    onWebSocketResponse.subscribe(async (socketRes) => {
        if (socketRes !== "NULL") {
            console.log("message received with :" + uniqueId);
        } else {

        }
    });

    this.subscribeToWebSocket(
        socket,
        uniqueId,
        onWebSocketResponse
    );
  };

导致错误的代码片段-猜测Subscribe部分抛出错误，因为当注解掉它时，它工作正常

后端是一个.Net项目顺便说一句。在一些论坛上经历了一些答案，但没有得到我所期望的，因为我不试图更新包

websocket

来源：https://stackoverflow.com/questions/73775174/403-rxjs-error-when-trying-to-subscribe-to-websocket-angular

2条答案

按热度按时间

xe55xuns1#

如果没有约束要求您使用RxJs围绕websockets创建自己的 Package 器，则RxJs有自己的websockets的本机解决方案。此 Package 器支持：
1-聆听
2-推动
3-多工
下面是一个监听服务器的RxJs WebSocket示例

import { webSocket } from 'rxjs/webSocket';

const subject = webSocket('ws://localhost:8081');

subject.subscribe({
  next: msg => console.log('message received: ' + msg), // Called whenever there is a message from the server.
  error: err => console.log(err), // Called if at any point WebSocket API signals some kind of error.
  complete: () => console.log('complete') // Called when connection is closed (for whatever reason).
 });

赞(0）回复(0）举报 2022-11-11

ljo96ir52#

更新... -因为我认为它可能会帮助一些人，这个问题是由于旧的Angular 5使用和方式，我试图订阅的WebSocket不支持.下面是通过可观察订阅的方式

this.url = this.commonVariables.wssurl + '/api/AbcApi/' + id;
    this.wsService.createObservableSocket(this.url)
        .subscribe(
            data => {
                //TODO After received Response
                console.log('message from server with id: ' + data);
                this.UpdateUi(data);
            },
            err => console.log(err),
            () => console.log('The observable stream is complete')
    );

和WebSocket.service类中使用。

import { Observable } from "rxjs/Rx";

导出类Web套接字服务{ ws：WebSocket;

createObservableSocket(url: string): Observable<string> {
    console.log('created observable socket');
    this.ws = new WebSocket(url);
    return new Observable(observer => {
        this.ws.onmessage = (event) => observer.next(event.data);
        this.ws.onerror = (event) => observer.error(event);
        this.ws.onclose = (event) => observer.complete();
    });
}
sendMessage(message: any) {
    this.ws.send(message);
}

}

赞(0）回复(0）举报 2022-11-11

我来回答

403订阅WebSocket时发生RXJS错误|Angular

2条答案

相关问题

热门标签

最新问答