websocket_sockJS:所有传输错误。在添加{transports:['；websocket'；]}

背景：

每当我打开WebSocket页面时 我有几个XHR_发送的？404-错误，但最终XHR_发送？获得成功响应并连接到WebSocket

所以为了避免这个404错误，我决定只使用WebSocket。所以我加了这个

：返回新的SockJS（connectionUrl，null，{transports:['websocket']}）

那么现在。。 XHR\u发送？已丢失，但它根本无法连接到服务器

+仅供参考：我有2台服务器…（我想因为这个原因，我之前收到了XHR_发送错误。）

下面的屏幕截图正在重复。但从未联系过

爪哇

角度7

import { Injectable, OnDestroy, Inject, Optional } from '@angular/core';
import * as SockJS from '../../../assets/lib/sockjs.min.js';
import { BehaviorSubject, Observable } from 'rxjs';
import { filter, first, switchMap } from 'rxjs/operators';
import { StompSubscription, Stomp, Client, Frame, Message, StompConfig, Versions } from '@stomp/stompjs';


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

  private client: Client;
  private state: BehaviorSubject<any>;
  private baseUrl: any = "/" + window.location.href.substr(0).split('/')[3] + "/";

  constructor() {
  }

  init() {
    let connectionUrl = this.baseUrl + "batch-socket";
    console.log("MY URL is " + connectionUrl);
    return new Promise((resolve, reject) => {
        let config = new StompConfig();
        config.heartbeatOutgoing = 10000;
        config.heartbeatIncoming = 10000;
        config.stompVersions = new Versions(['1.0', '1.1']);
        config.webSocketFactory = function () {
          return new SockJS(connectionUrl, null, { transports: ['websocket']});
          //PREVIOUS : return new SockJS(connectionUrl)
        }
        config.debug = function (str) {
          console.log("@socketDebug: " + str)
        }
      this.client = new Client();
      this.client.configure(config);

      console.log(this.client);
      console.log("@socketSvc: starting connection...");

      const _this = this;
      this.client.onConnect = function (frame) {
        console.log("@socketSvc: connection established.");
        console.log(frame);
        _this.state = new BehaviorSubject<any>(SocketClientState.ATTEMPTING);
        _this.state.next(SocketClientState.CONNECTED);
        resolve(frame.headers['user-name']);
      }

      this.client.onWebSocketClose = function (msg){
        console.log("@socketSvc: connection closed.");
        console.log(msg);
      }

      this.client.onWebSocketError = function(msg){
        console.log("@socketSvc: connection error.");
        console.log(msg);
      }

      this.client.onDisconnect = function(msg){
        console.log("@socketSvc: socket disconnected.");
        console.log(msg);
        //this.init();
      }

      this.client.onStompError = function(msg){
        console.log("@socketSvc: stomp error occurred.");
        console.log(msg);
      }

      this.client.activate();
    });

  }

  private connect(): Observable<Client> {
    return new Observable<Client>(observer => {
      this.state.pipe(filter(state => state === SocketClientState.CONNECTED)).subscribe(() => {
        observer.next(this.client);
      });
    });
  }

  onPlainMessageReceived(topic: string): Observable<string> {
    return this.onMessageReceived(topic, SocketService.textHandler);
  }

  onMessageReceived(topic: string, handler = SocketService.jsonHandler): Observable<any> {
    return this.connect().pipe(first(), switchMap(client => {
      return new Observable<any>(observer => {
        const subscription: StompSubscription = client.subscribe(topic, message => {
          observer.next(handler(message));
        });
        return () => client.unsubscribe(subscription.id);
      });
    }));
  }

  static jsonHandler(message: Message): any {
    return JSON.parse(message.body);
  }

  static textHandler(message: Message): string {
    return message.body;
  }


  disconnect() {
    this.connect().pipe(first()).subscribe(client => client.deactivate());
    this.client.deactivate();
  }
}

export enum SocketClientState {
  ATTEMPTING, CONNECTED
}

从'@angular/core'导入{Injectable，ondestory，injection，Optional}；
从“../../../assets/lib/SockJS.min.js”导入*作为SockJS；
从“rxjs”导入{BehaviorSubject，Observable}；
从“rxjs/operators”导入{filter，first，switchMap}；
从'@Stomp/stompjs'导入{StompSubscription，Stomp，Client，Frame，Message，StompConfig，Versions}；
@注射的({
providedIn:'根'
})
出口级SocketService{
私人客户：客户；
私人国家：行为主体；
private baseUrl:any=“/”+window.location.href.substr（0.split（“/”）[3]+“/”；
构造函数（）{
}
init（）{
让connectionUrl=this.baseUrl+“批处理套接字”；
log（“我的URL是”+connectionUrl）；
返回新承诺（（解决、拒绝）=>{
让config=new StompConfig（）；
config.heartbeatouting=10000；
config.heartbeatIncoming=10000；
config.stompVersions=新版本（['1.0'，'1.1']）；
config.webSocketFactory=函数（）{
返回新的SockJS（connectionUrl，null，{transports:['websocket']}）；
//上一个：返回新的SockJS（connectionUrl）
}
config.debug=函数（str）{
console.log（“@socketDebug:+str”）
}
this.client=新客户端（）；
this.client.configure（config）；
console.log（this.client）；
log（“@socketSvc:starting connection…”）；
常数this=这个；
this.client.onConnect=函数（帧）{
log（“@socketSvc:connection-builded.”）；
控制台日志（框架）；
_this.state=新的行为子对象（SocketClientState.testing）；
_this.state.next（SocketClientState.CONNECTED）；
解析（frame.headers['user-name']）；
}
this.client.onWebSocketClose=函数（msg）{
log（“@socketSvc:connection closed.”）；
控制台日志（msg）；
}
this.client.onWebSocketError=函数（msg）{
log（“@socketSvc:connection error.”）；
控制台日志（msg）；
}
this.client.onDisconnect=函数（msg）{
log（“@socketSvc:socketdisconnected.”）；
控制台日志（msg）；
//this.init（）；
}
this.client.onStompError=函数（msg）{
log（“@socketSvc:stomp错误发生”）；
控制台日志（msg）；
}
this.client.activate（）；
});
}
private connect（）：可观察{
返回新的可观察对象（观察者=>{
this.state.pipe（过滤器（state=>state===SocketClientState.CONNECTED））.subscribe（（）=>{
observer.next（本客户）；
});
});
}
onPlainMessageReceived（主题：字符串）：可观察{
返回此.onMessageReceived（主题，SocketService.textHandler）；
}
onMessageReceived（主题：string，handler=SocketService.jsonHandler）：可观察{
返回此.connect（）.pipe（first（），switchMap（client=>{
返回新的可观察对象（观察者=>{
const subscription:StompSubscription=client.subscripte（主题，消息=>{
下一步（处理程序（消息））；
});
return（）=>client.unsubscribe（subscription.id）；
});
}));
}
静态jsonHandler（message:message）：任意{
返回JSON.parse（message.body）；
}
静态文本处理程序（消息：消息）：字符串{
返回消息.body；
}
断开连接（）{
this.connect（）.pipe（first（））.subscribe（client=>client.deactivate（））；
this.client.deactivate（）；
}
}
导出枚举SocketClientState{
正在尝试，已连接
}

我找到了这个问题的原因。 我意识到我有两份战争档案。 因此，一个有我的代码（套接字连接），另一个没有代码（套接字连接）。 所以它抛出了错误

=>通过删除没有套接字连接的war文件解决

import { Injectable, OnDestroy, Inject, Optional } from '@angular/core';
import * as SockJS from '../../../assets/lib/sockjs.min.js';
import { BehaviorSubject, Observable } from 'rxjs';
import { filter, first, switchMap } from 'rxjs/operators';
import { StompSubscription, Stomp, Client, Frame, Message, StompConfig, Versions } from '@stomp/stompjs';


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

  private client: Client;
  private state: BehaviorSubject<any>;
  private baseUrl: any = "/" + window.location.href.substr(0).split('/')[3] + "/";

  constructor() {
  }

  init() {
    let connectionUrl = this.baseUrl + "batch-socket";
    console.log("MY URL is " + connectionUrl);
    return new Promise((resolve, reject) => {
        let config = new StompConfig();
        config.heartbeatOutgoing = 10000;
        config.heartbeatIncoming = 10000;
        config.stompVersions = new Versions(['1.0', '1.1']);
        config.webSocketFactory = function () {
          return new SockJS(connectionUrl, null, { transports: ['websocket']});
          //PREVIOUS : return new SockJS(connectionUrl)
        }
        config.debug = function (str) {
          console.log("@socketDebug: " + str)
        }
      this.client = new Client();
      this.client.configure(config);

      console.log(this.client);
      console.log("@socketSvc: starting connection...");

      const _this = this;
      this.client.onConnect = function (frame) {
        console.log("@socketSvc: connection established.");
        console.log(frame);
        _this.state = new BehaviorSubject<any>(SocketClientState.ATTEMPTING);
        _this.state.next(SocketClientState.CONNECTED);
        resolve(frame.headers['user-name']);
      }

      this.client.onWebSocketClose = function (msg){
        console.log("@socketSvc: connection closed.");
        console.log(msg);
      }

      this.client.onWebSocketError = function(msg){
        console.log("@socketSvc: connection error.");
        console.log(msg);
      }

      this.client.onDisconnect = function(msg){
        console.log("@socketSvc: socket disconnected.");
        console.log(msg);
        //this.init();
      }

      this.client.onStompError = function(msg){
        console.log("@socketSvc: stomp error occurred.");
        console.log(msg);
      }

      this.client.activate();
    });

  }

  private connect(): Observable<Client> {
    return new Observable<Client>(observer => {
      this.state.pipe(filter(state => state === SocketClientState.CONNECTED)).subscribe(() => {
        observer.next(this.client);
      });
    });
  }

  onPlainMessageReceived(topic: string): Observable<string> {
    return this.onMessageReceived(topic, SocketService.textHandler);
  }

  onMessageReceived(topic: string, handler = SocketService.jsonHandler): Observable<any> {
    return this.connect().pipe(first(), switchMap(client => {
      return new Observable<any>(observer => {
        const subscription: StompSubscription = client.subscribe(topic, message => {
          observer.next(handler(message));
        });
        return () => client.unsubscribe(subscription.id);
      });
    }));
  }

  static jsonHandler(message: Message): any {
    return JSON.parse(message.body);
  }

  static textHandler(message: Message): string {
    return message.body;
  }


  disconnect() {
    this.connect().pipe(first()).subscribe(client => client.deactivate());
    this.client.deactivate();
  }
}

export enum SocketClientState {
  ATTEMPTING, CONNECTED
}