Uncaught SyntaxError: Unexpected token 'if'
Uncaught SyntaxError: ClearSubmit is not defined
Uncaught SyntaxError: sendMsg is not defined
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta charset="UTF-8">
<title>聊天室</title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
</head>
<body>
<script type="text/javascript" src="lib.js"></script>
<style type="text/css">
</style>
<div >
<div id='user' class="text-center" ></div>
<form style lang="scss scoped">
<label></label>
<div class="col-xs-12 col-md-12">
<div id="textarea"style="width:1500px;height:600px;border:3px solid #000;overflow-y:scroll; overflow-x:scroll;" ></div>
</div> <!--div显示框,overflow实现了滚动条的功能-->
<div >
<div class="col-xs-12 col-md-12 center-block">
<input id="text1" type="text" value="" style="width:100%;height:30px;" onkeydown="return ClearSubmit(event)"/>
</div><!--这里的input由于是在表单标签内,在输入时直接按回车会自动提交表单并刷新,ClearSubmit函数监听回车键,并屏蔽掉-->
<div class="col-xs-12 col-md-12 center-block">
<button type="button" onclick="sendMsg();" style="width:100%;height:30px;"class="btn btn-primary "><i class="fa fa-paper-plane">send<i></button></div>
</div>
</form>
</div>
<script src="/socket.io/socket.io.js"></script><!--socket.io模块-->
<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> <!--jQuery文件,使用bootstrap框架要用到,并且需要放在Bootstrap文件上面-->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script><!--bootstrap文件,相关使用教程可百度-->
<script type="text/javascript">
var socket = io(); //获取socket对象
var userid=false; //userid 用于识别用户
var div = document.getElementById('textarea');
div.scrollTop = div.scrollHeight;实现页面初始化滚动条自动跑到底部的效果
socket.on('sendMsg',function(msg){ //监听服务器发送消息事件,这里的sendMsg是可以自定义的,只要有相关的事件触发器和监听器就可以
console.log(msg)//浏览器控制台输出服务器发来的消息
})
socket.on('id',function (id) { //监听服务器发送用户id
userid=id;
})
socket.on('user',function (user) { //监听服务器发送用户的在线人数,这里的在线人数只是简单的客户端数,但一个ip可以同时打开多个客户端,真正的在线人数应当是ip数,当然考虑到局域网下用户公用同一个ip问题,可以做一个注册页面来解决这些问题
document.getElementById('user').innerHTML="<h3 >本聊天室在线人数:"+user+'</h3>';//原生js改变DOM的内容
})
function sendMsg () {//发送消息按钮会触发该函数
var msg=document.getElementById('text1');
var date=new Date();
socket.emit('sendMsg','('+date.getHours()+':'+date.getMinutes()+':'+date.getSeconds()+')'+"用户"+userid+'>>> '+msg.value)
}//触发sendMsg事件,将消息发送到服务器端
var flag=false
socket.on('init',function(msg){ //该事件在用户打开页面时将已有消息发送到客户
var tem=$('<div>').text(msg);//以msg为内容创建一个div标签
$('#textarea').append(tem);//将该div标签插入到id=textaread的容器中
tem[0].innerHTML=msg;//改变该div标签的内容
console.log(tem[0].innerHTML);
});
socket.on('sendMsg', function(msg){ //监听服务器发送来的消息
var tem=$('<div>').text(msg);
tem.addClass('msgs')
$('#textarea').append(tem);
var div = document.getElementById('textarea');
div.scrollTop = div.scrollHeight;//实现发送消息滚动条自动跑到底部的效果
});
function ClearSubmit(e)
if(e.keyCode==13){
return false;
}
</script>
</body>
</html>