Область видимости при запуске из функции Javascript

Здравствуйте уважаемые участники ресурса. У меня есть скрипт который запускает Websocket. Получается я могу открыть соединение передать данные на сервер но не могу отрисовать. Вот код.

var ws = ""

$("#author").on('click', function(e){
    if(ws){
      ws.close()
    }
    else{
      ws = new WebSocket('ws://' + window.location.host + '/ws/')

});

$('#send').on('click', function(e){
   let message = $('#input-message').value
   ws.send(
      JSON.stringify({
         'message': message,
      })
});

ws.onmessage = function(e){
      const data = JSON.parse(e.data);
      message.innerHTML += '<li class="msg">' + data.message +'</li>'
}

ws.onmessage не работает. Подскажите как истравить. Не очень силён в javascript

Объект WebSocket создается только внутри обработчика события.

До вызова обработчика в переменной хранится пустая строка. Поэтому фактически

ws.onmessage = function(e){

добавляется строке и полностью переписывается при присваивании нового значения

ws = new WebSocket('ws://' + window.location.host + '/ws/')

Для решения достаточно перенести добавление обработчика в место, где создается WebSocket

var ws = ""

$("#author").on('click', function(e){
    if(ws){
      ws.close()
    }
    else{
      ws = new WebSocket('ws://' + window.location.host + '/ws/')
      ws.onmessage = function(e){
          const data = JSON.parse(e.data);
          message.innerHTML += '<li class="msg">' + data.message +'</li>'
      }    
    }
});

$('#send').on('click', function(e){
   let message = $('#input-message').value
   ws.send(
      JSON.stringify({
         'message': message,
      })
});
Вернуться на верх