Socket.io가 JQuery없이 작동하지 않습니까?

나는 socket.io를 사용해 봤는데 분명히 채팅 앱으로 시작했다. 그들의 편에있는 클라이언트 측 코드는 다음과 같이 뭔가를해야만 같습니다Socket.io가 JQuery없이 작동하지 않습니까?

이제

<!doctype html> 
<html> 
    <head> 
    <title>Socket.IO chat</title> 
    <style> 
     * { margin: 0; padding: 0; box-sizing: border-box; } 
     body { font: 13px Helvetica, Arial; } 
     form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; } 
     form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; } 
     form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; } 
     #messages { list-style-type: none; margin: 0; padding: 0;} 
     #messages li { padding: 5px 10px; } 
     #messages li:nth-child(odd) { background: #eee; } 
    </style> 
    </head> 
    <body> 
    <ul id="messages"></ul> 
    <form action="" id = "frm"> 
     <input id="m" autocomplete="off" /><button id='b'>Send</button> 
    </form> 
    <script src="/socket.io/socket.io.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> 
    </body> 
</html>

, 내 문제를 내가 좋아하는 무언가로 socket.on 블록 내부의 콜백 함수 내부의 코드를 변경하려고하면 :

document.getElementById('messages').innerHTML += '<li>' + msg + '</li>';

li 요소가 0.5 초 동안 표시되고 innerHTML이 다시 설정되면 콜백 내부에서 DOM의 다른 부분을 수정하면 동일한 문제가 발생합니다.

내가 jQuery를 사용하지 않는하지만 상식은 내가

$('#messages').append($('<li>').text(msg))

을 가정했다; 위에 쓴 방식으로 innerHTML을 수정하는 것과 기본적으로 동일합니다. 내가 도대체 뭘 잘못하고있는 겁니까 ? socket.io는 콜백 (call backs) 내에서만 Jquery를 사용할 수있는 방식으로 만들어 졌는가? (나는 이것을 서버 브라우저에서 시도했다.)

출처

2016-06-19 Desperate

이에 대한 대답은 : "socket.io는 콜백 내에서만 Jquery를 사용할 수있는 방식으로 만들어 졌습니까?" 아니야. 귀하의 문제는 Socket.io와 아무 관련이 없습니다. – Gary

두 코드는 JSFiddle에서 똑같이 수행되므로 socket.io에서 작동하는 이유와 그렇지 않은 이유를 알 수는 없지만 관련 질문을 조회 할 때 사용하지 말 것을 제안하는 답변을 보았습니다 +=document.innerHTML. 이 문제가 minor security concern 이상의 문제를 일으키는 이유를 찾지 못했지만 대신 appendChild()을 사용하는 것이 좋습니다.

출처

2016-06-19 13:19:26

Socket.io가 JQuery없이 작동하지 않습니까?

답변

관련 문제