Почему сокет-соединение не работает внутри onsubmit-event? - PullRequest
0 голосов
/ 05 февраля 2020

Потратил много времени на размышления о том, почему соединение с websocket (операторы "var ..." и "socket.on ...") не работают, если поместить их в функцию, следующую за subsmit:

document.addEventListener('DOMContentLoaded', () => {

        document.querySelector('#display_name').innerHTML = localStorage.getItem('display_name');

        document.querySelector('#new_channel').onsubmit = () => {

          const new_channel_name = document.querySelector('#new_channel_name').value;
          console.log(`New channel name: ${new_channel_name}`);


          var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port);
          socket.on('connect', () => {
            console.log("THIS NEVER GETS EXECUTED");
          }); 

       };
   });

Когда вы перемещаете операторы соединения, соединение, кажется, работает:

document.addEventListener('DOMContentLoaded', () => {

        document.querySelector('#display_name').innerHTML = localStorage.getItem('display_name');

        var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port);
        socket.on('connect', () => {
          console.log(`Connected to SOCKET ID: ${socket.id}`);
            });

        document.querySelector('#new_channel').onsubmit = () => {

          const new_channel_name = document.querySelector('#new_channel_name').value;
          console.log(`New channel name: ${new_channel_name}`);

          };
      });

Похоже, что фундаментальное отсутствие понимания чего-то здесь, на моей стороне, но не удача найти объяснения, почему ... Любой может помогите мне понять, почему?

В конечном итоге моя цель - создать приложение для чата, использующее несколько каналов или пространств имен (с сервером Flask, использующим SocketIO), поэтому я хочу создавать соединение только один раз, когда пользователь отправляет форму нового канала, и не раньше, когда клиент не знает, к какому пути / каналу подключаться. И я знаю, что мне придется изменить инициализацию сокета, чтобы включить некоторый путь к каналу не по умолчанию (пока я просто пытаюсь подключить его). Кто-нибудь знает, как это обойти? Спасибо!

Ответы [ 2 ]

1 голос
/ 05 февраля 2020

Как отмечалось в другом ответе, вам нужно позвонить event.preventDefault(), чтобы предотвратить перезагрузку страницы.

Другая проблема - вы пытаетесь подключиться каждый раз, когда нажимаете кнопку отправки, но вы не отправляйте никакие параметры на сервер, который указывает канал, поэтому лучше всего отправить правильное имя канала на сервер.

Итак, лучшее решение:

  • add e.preventDefault()
  • сохраняет сокеты в глобальной переменной sockets и push к ней при каждом новом соединении вместе с именем канала
  • отправляет имя канала на сервер
  • если есть запрос на соединение, сначала проверьте, существует ли это имя канала в sockets
0 голосов
/ 05 февраля 2020

Если вы имеете в виду событие отправки, запускаемое формой, вам может потребоваться запрет по умолчанию для предотвращения перезагрузки страницы? Перезагрузка страницы прервет ваше сокетное соединение.

https://www.codexpedia.com/javascript/submitting-html-form-without-reload-the-page/

x.onsubmit = (e) => { e.preventDefault(); more code}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...