发送消息时,Socket.io聊天重新加载页面
Socket.io chat reload page when message is sent
我正在尝试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,它就很有魅力。有人能看到问题出在哪里吗?
使用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();
});
我只想在这里抛出这个问题,因为我在使用jquery时遇到了类似的问题,并且它正在重新加载。
问题是我在head标签中有Jquery的东西,而不是在body中。
将事件发射脚本移动到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>
发生这种情况是因为您正在使用
<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
});
相关文章:
- 创建新数据和加载现有数据需要单独的视图吗
- 钛 - HTTPClient:打开新的控制器加载
- 保持 JavaScript 在浏览器控制台中运行,即使在新的页面加载之后也是如此
- 路由到新页面时加载不起作用
- 如何在新窗口完成加载后执行某些内容
- 使用新标题重新加载 html 页面
- Primefaces在打开新页面时加载数据消息
- Wordpress音频播放器和平滑状态.在新页面重新加载播放器时调用什么回调函数
- 用新数据重新加载renderer3d
- 文本不被渲染后,新的页面加载- JQuery移动
- 需要在新标签中加载pdf/doc文件,而不是下载,只是想在浏览器中阅读
- 用新参数重新加载页面
- Js和CSS不检测新页面何时加载
- 在新页面上加载一个flash视频,它在上一页上的位置
- 在新窗口中加载代码编写器视图
- 在控制台中使用新脚本重新加载页面
- 如何在加载新页面后加载AJAX数据
- 如何使用jQuery在新窗口中加载页面,然后关闭它们
- Jquery没有看到新的HTML加载到对话框中
- 无法用新值重新加载JGrid