SignalR在启动连接时显示“WebSocket is not in the OPEN state“

按照教程写的SignalR长连接,但是有错 WebSocket is not in the OPEN state。百度提供的解决办法是 引入的库冲突了,把引入的其他js库删掉。

显然试过之后没有解决，还是报这个错误 HubConnection failed to start successfully because of error 'WebSocket is not in the OPEN state'

重新创建了一个vue项目发现居然没有问题，那么问题来了一样的代码 为啥新项目可以连接成功，显示如下

想到以前安装过其他版本的SignalR 所以去吧其他依赖全部删除了，但是还是不行，未修改之前代码如下

<template>
  <div class="content">
    <p>webscoket 是否链接</p>
    <p>收到的消息：</p>
  </div>
</template>

<script>
  import * as signalR from '@microsoft/signalr'
  export default {
    data() {
      return {
        title: 'Hello',
        connection: null,
        connected: false,
        msg: '',
      }
    },
    mounted() {
      // 建立连接
      let connection = new signalR.HubConnectionBuilder()
        .withUrl('http://192.168.2.8:7005/Communication', {})
        .configureLogging(signalR.LogLevel.Debug)
        .build() // 此处填服务器地址

      // 注册方法（给后端调用的，需要在methods中定义）
      connection.on('ReceiveMessage', this.connected)

      // 开始连接
      connection.start().catch((err) => {
        console.log(err)
      })
    },
    methods: {
      /* eslint-disable */
      connected(msgInfo) {
        this.$ownerInstance.callMethod('revMsg', msgInfo)
        console.log(msgInfo)
      },
    },
  }
</script>

<style>
  .content {
    padding-left: 20rpx;
  }
</style>

后面发现一个解决办法 就是在withUrl()方法里面加参数

  // 建立连接
  let connection = new signalR.HubConnectionBuilder()
    .withUrl('http://192.168.2.8:7005/Communication', {
      transport: signalR.HttpTransportType.ServerSentEvents,
      logging: signalR.LogLevel.Trace,
    })
    .configureLogging(signalR.LogLevel.Debug)
    .build() // 此处填服务器地址

在此记录一下解决办法， 但是现在新的疑问来了 为什么加上 { transport: signalR.HttpTransportType.ServerSentEvents, logging: signalR.LogLevel.Trace, }参数之后连接就成功了呢，有空再看下微软的文档，如果有知道的大佬，希望大佬能够解释一下

优化封装一下

import * as signalR from '@microsoft/signalr';

function startConnect() {
  try {
    let connection = connectionSignalR();

    //先取消注册，再重新注册，防止重复注册 ReceiveTextMessageWithIdAsync
    connection.off('ReceiveTextMessageWithIdAsync', ReceiveBroadCastMessageHandler());

    //接收普通文本消息
    connection.on('ReceiveTextMessageWithIdAsync', ReceiveBroadCastMessageHandler());

    //接收广播消息
    // connection.on('ReceiveBroadCastMessageAsync', ReceiveBroadCastMessageHandler(message));

    connection.onreconnecting((error) => {
      let errorMessage = `连接丢失,原因为:"${error}"`.
      console.log(errorMessage, 111);
    });

    connection.onclose(async () => {
      connection.off('ReceiveTextMessageWithIdAsync', ReceiveTextMessageHandler());
      connection.stop();
    });

    //开始连接
    connection.start();
  } catch (err) {
    setTimeout(startConnect, 5000);
  }
};


/**
 * 连接signalr
 */
function connectionSignalR() {
  //process.env.VUE_APP_BASE_API
  const url = 'http://192.168.2.8:7005' + '/Communication';
  const connection = new signalR.HubConnectionBuilder()
    .withUrl(url, {
      transport: signalR.HttpTransportType.ServerSentEvents,
      logging: signalR.LogLevel.Trace,
    })
    .withAutomaticReconnect({
      nextRetryDelayInMilliseconds: (retryContext) => {
        //重连规则：重连次数<300：间隔1s;重试次数<3000:间隔5s;重试次数>3000:间隔30s
        let count = retryContext.previousRetryCount / 300;

        if (count < 1) {

          //重试次数<300,间隔1s
          return 1000;

        } else if (count < 10) {

          //重试次数>300:间隔5s
          return 1000 * 5;

        } //重试次数>3000:间隔30s
        else {
          return 1000 * 30;
        }
      },
    })
    .configureLogging(signalR.LogLevel.Debug)
    .build();

  return connection;
}

/**
 * 接收文本消息
 * @param message 消息体
 */
function ReceiveTextMessageHandler(message) {
  debugger
  console.log(message)
}

/**
 * 接收广播消息
 * @param message 消息体
 */
function ReceiveBroadCastMessageHandler(message) {
  console.log(message);
}

export async function useSignalR() {
  debugger

  /**
   * 开始连接SignalR
   */
  startConnect();
}