Блог

Я искал здесь похожие темы, но до сих пор не решил свою проблему. Может быть, кто-нибудь сможет мне в этом помочь.

Моя цель-отобразить журналы из различных служб. Для этого я использую SignalR с vuejs в качестве клиента. Я хочу подключиться к группе служб по нажатию кнопки и получить журналы. Когда я нажимаю на другую кнопку, я хочу покинуть группу и присоединиться к другой.

 selectItem(name) {
  this.groups.push(name)
  document.getElementById('messageList').innerHTML = ''
      
  const connection = new signalR.HubConnectionBuilder()
  .withUrl("http://localhost:5000/logs")
  .configureLogging(signalR.LogLevel.Information)
  .build()

  if (this.groups.length > 1) {
    let previousGroup = this.groups[this.groups.length - 2]
    connection.invoke("LeaveGroup", previousGroup)
    console.log('leaving group:', previousGroup)
  }

  connection.on("PushEventLog", (message) => {
    const div = document.createElement('div')
    div.textContent = message
    document.getElementById('messageList').appendChild(div)
  })

  connection.start().then(() => {
    connection.invoke("JoinGroup", name)
    console.log('joining group: ', name)
  })
}
 

При моем первом присоединении к группе все работает нормально, но когда я покидаю группу и хочу присоединиться к другой, я получаю сообщение об ошибке:

Какая-нибудь помощь?

Вы создаете новое соединение каждый раз selectItem при запуске. Вы должны где-то хранить объект подключения и использовать его только после его запуска.

Добавил пару комментариев к вашему коду, чтобы указать, что вы делаете неправильно.

 // new connection object
const connection = new signalR.HubConnectionBuilder()
  .withUrl("http://localhost:5000/logs")
  .configureLogging(signalR.LogLevel.Information)
  .build()

  if (this.groups.length > 1) {
    let previousGroup = this.groups[this.groups.length - 2]
    // using new connection that hasn't started yet
    connection.invoke("LeaveGroup", previousGroup)
    console.log('leaving group:', previousGroup)
  }
 

Я нашел решение — я переместил соединение и журналы в созданный крюк. Рабочий код ниже.

 methods: {
  selectItem(name, i) {
    this.groups.push(name)
    document.getElementById('messageList').innerHTML = ''

    if (this.groups.length > 1) {
      let previousGroup = this.groups[this.groups.length - 2]
      this.connection.invoke("LeaveGroup", previousGroup)
    } else {
      this.connection.invoke("JoinGroup", name)
    }
  }
}
created() {
  this.connection = new signalR.HubConnectionBuilder()
  .withUrl("http://localhost:5000/logs")
  .build()

  this.connection.start()

  this.connection.on("PushEventLog", (message) => {
    const div = document.createElement('div')
    div.textContent = message
    document.getElementById('messageList').appendChild(div)
  })
}