正在输入
关于防抖与节流的应用方案
防抖：一段时间完成一个 *** 作；节流：定时完成 *** 作。
应用场景：
防抖：
1、seach搜索联想，用户在不断输入输入值时，用防抖来节约请求资源。
2、windows触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发这一次。
3、防止重复提交。
节流：
1、鼠标不断点击触发，mousedown(单位时间内只触发一次)。
2、监听滚动事件，比如是否滑到底部自动加载更多，用throttle。
var sensitivity = "草|日";//配置脏话
var sen_arr = sensitivitysplit("|");
for(var i=0; i<sen_arrlength; i++){
inputvalue = inputvaluereplace(sen_arr[i],"");
}
初始工作
安装express, 用这个来托管socketio,以及静态页面,命令npm install express --save,--save可以使包添加到packagejson文件里
安装socketio,命令npm install socketio --save
编写服务端代码
首先我们通过express来托管网站，并附加到socketio实例里，因为socketio初次连接需要>var express = require('express'),
io = require('socketio');var app = express();appuse(expressstatic(__dirname));var server = applisten(8888);var ws = iolisten(server);
添加服务器连接事件，当客户端连接成功之后，发公告告诉所有在线用户，并且，当用户发送消息时，发广播通知其它用户
wson('connection', function(client){consolelog('\033[96msomeone is connect\033[39m \n');
clienton('join', function(msg){
// 检查是否有重复
if(checkNickname(msg)){
clientemit('nickname', '昵称有重复!');
}else{
clientnickname = msg;
wssocketsemit('announcement', '系统', msg + ' 加入了聊天室!');
}
});
// 监听发送消息
clienton('sendmessage', function(msg){
clientbroadcastemit('sendmessage',clientnickname, msg);
});
// 断开连接时，通知其它用户
clienton('disconnect', function(){
if(clientnickname){
clientbroadcastemit('sendmessage','系统', clientnickname + '离开聊天室!');
}
})})
由于客户端是通过昵称来标识的，所以服务端需要一个检测昵称重复的函数
// 检查昵称是否重复var checkNickname = function(name){for(var k in wssocketssockets){
if(wssocketssocketshasOwnProperty(k)){
if(wssocketssockets[k] && wssocketssockets[k]nickname == name){
return true;
}
}
}
return false;}
编写客服端代码
由于服务端采用第三方websokcet框架，所以前端页面需要单独引用socketio客户端代码，源文件可以从socketio模块里找，windows下路径为node_modules\socketio\node_modules\socketio-client\dist,这里有开发版和压缩版的，默认引用开发版就行
前端主要处理输入昵称检查，消息处理，完整代码如下
<!DOCTYPE html><html><head><title>socketio 聊天室例子</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/resetcss"/>
<link rel="stylesheet" href="css/bootstrapcss"/>
<link rel="stylesheet" href="css/appcss"/></head><body>
<div class="wrapper">
<div class="content" id="chat">
<ul id="chat_conatiner">
</ul>
</div>
<div class="action">
<textarea ></textarea>
<button class="btn btn-success" id="clear">清屏</button>
<button class="btn btn-success" id="send">发送</button>
</div>
</div>
<script type="text/javascript" src="js/socketiojs"></script>
<script type="text/javascript">
var ws = ioconnect('');
var sendMsg = function(msg){
wsemit('sendmessage', msg);
}
var addMessage = function(from, msg){
var li = documentcreateElement('li');
liinnerHTML = '<span>' + from + '</span>' + ' : ' + msg;
documentquerySelector('#chat_conatiner')appendChild(li);
// 设置内容区的滚动条到底部
documentquerySelector('#chat')scrollTop = documentquerySelector('#chat')scrollHeight;
// 并设置焦点
documentquerySelector('textarea')focus();
}
var send = function(){
var ele_msg = documentquerySelector('textarea');
var msg = ele_msgvaluereplace('\r\n', '')trim();
consolelog(msg);
if(!msg) return;
sendMsg(msg);
// 添加消息到自己的内容区
addMessage('你', msg);
ele_msgvalue = '';
}
wson('connect', function(){
var nickname = windowprompt('输入你的昵称!');
while(!nickname){
nickname = windowprompt('昵称不能为空，请重新输入!')
}
wsemit('join', nickname);
});
// 昵称有重复
wson('nickname', function(){
var nickname = windowprompt('昵称有重复，请重新输入!');
while(!nickname){
nickname = windowprompt('昵称不能为空，请重新输入!')
}
wsemit('join', nickname);
});
wson('sendmessage', function(from, msg){
addMessage(from, msg);
});
wson('announcement', function(from, msg){
addMessage(from, msg);
});
documentquerySelector('textarea')addEventListener('keypress', function(event){
if(eventwhich == 13){
send();
}
});
documentquerySelector('textarea')addEventListener('keydown', function(event){
if(eventwhich == 13){
send();
}
});
documentquerySelector('#send')addEventListener('click', function(){
send();
});
documentquerySelector('#clear')addEventListener('click', function(){
documentquerySelector('#chat_conatiner')innerHTML = '';
});
</script></body></html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）