Страница перезагрузки чата Socket.io при отправке сообщения

Question

У меня есть с учебником socket.io на http://socket.io/get-started/chat/, но моя проблема в том, что когда я отправляю сообщение, страница перезагружается, а не сохраняется.

Единственная разница в том, что я использовал чистую DOM вместо использования jquery, как в учебнике. Это исходный код:

<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script> 
    <script src="http://code.jquery.com/jquery-1.11.1.js"></script> 
    <script> 
     var socket = io(); 
     $('form').submit(function(){ 
     socket.emit('chat message', $('#m').val()); 
     $('#m').val(''); 
     return false; 
     }); 
     socket.on('chat message', function(msg){ 
     $('#messages').append($('<li>').text(msg)); 
     }); 
    </script> 

И это мое:

<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script> 
    <script> 
     var socket = io(); 
     document.querySelector('form') 
     .addEventListener('submit', function() { 
     socket.emit('chat message', 
     document.querySelector('#m').value); 
     document.querySelector('#m').value = ''; 
     return false; 
     }); 

     socket.on('chat message', function (msg) { 
     var li = document.createElement('li'); 
     document.querySelector('#messages').appendChild(li); 
     li.innerText = msg; 
     }); 
    </script> 

Если я заменить мину с JQuery один, он работает как шарм. Может ли кто-нибудь увидеть, где проблема?

Answer 1

Использование preventDefault, return false не работает addEventListener

document.querySelector('form').addEventListener('submit', function (e) { 
    socket.emit('chat message', document.querySelector('#m').value); 
    document.querySelector('#m').value = ''; 
    e.preventDefault(); 
}); 

Answer 2

Я просто хочу, чтобы бросить это здесь, потому что я приземлился на этой странице, когда с аналогичной проблемой, когда я использую JQuery, и это было перезагрузки.

Проблема была в том, что у меня были предметы JQuery в заголовках, а не в теле.

Answer 3

Переместить сценарий испускания события ниже метки form.

<form> 
    <input id="m" /> 
    <button>Send</button> 
</form> 
<script> 
    var socket = io(); 
    $('form').submit(function(){ 
    socket.emit('chat message', $('#m').val()); 
    $('#m').val(''); 
     return false; 
    }); 
    // more code.. 
</script> 

Answer 4

Это происходит потому, что вы используете

<form> 
<input id="m" /> 
<button>Send</button> 
</form> 

и вы отправляете его с помощью JQuery. Отправка формы приведет к обновлению страницы.

Вместо использования

Вы можете пойти с:

<div id="sendbottom"> 
    <input type="text" id="msg"> 
    <input type="button" id="send" value="send"> 
</div> 

И для отправки использовать сообщение JQuery следующим образом:

$('#send').on('click',function() { 
    var msg2send = document.getElementById('msg').value; 
    document.getElementById('msg').value = ''; 
    var iHTML = document.getElementById('messaging').innerHTML; 
    var newiHTML = iHTML + '<br> <b>You</b> : '+ msg2send; 
    document.getElementById('messaging').innerHTML = newiHTML; 
    //Your Code Here 
});