person(res)
break;
case 'message':
name.innerHTML = res.nickname + ': ';
dom.innerHTML = "<span class='nickName'>" + res.nickname + ": </span> " + res.data + ""
break;
case 'flower':
dom.className='flowerLi';
dom.innerHTML=res.data;
break;
default:
break;
}
document.getElementById('messageWrap').appendChild(dom);
limitLength(30)
scrollBottom();
//成员显示
}
function scrollBottom() { //显示最新消息在底部
var h1 = document.getElementsByClassName('right_cont')[0].offsetHeight;
var h2 = document.getElementById('messageWrap').offsetHeight;
if (h2 > h1) {
$('.right_cont').scrollTop(h2 - h1);
}
}
function limitLength(num) { //限制聊天室最多能显示几条消息
var li = $('#messageWrap li')
if (li.length > num) {
li.eq(0).remove();
}
}
function person(res){ //成员显示
var html=''
for(var i=0;i<res.client.length;i++){
html+= '<li><span class="nickname">'+res.client[i]+'</span></li>'
}
$('.personWrap').html(html);
$('#person').html('成员('+res.client.length+')')
}
</script>
</html>
server.js:
var ws = require("nodejs-websocket")
var port=8001;
var clientCount=0;
var nicknameArr=[];
var server = ws.createServer(function (conn) {
clientCount++;
conn.nickname='user'+clientCount;
nicknameArr.push(conn.nickname)
var mes={type:'enter',data:'欢迎 '+conn.nickname+' 进入聊天',nickname:conn.nickname,client:nicknameArr}
broadcast(JSON.stringify(mes))
conn.on("text", function (str) { //监听客户端发送过来的消息
var zstr=JSON.parse(str)
var mes={type:zstr.type,data:zstr.data,nickname:conn.nickname,client:nicknameArr}
broadcast(JSON.stringify(mes))
})
conn.on("close", function (code, reason) {
clientCount--;
for(var i=nicknameArr.length-1;i>=0;i--){ //删除退出的用户
if(conn.nickname==nicknameArr[i]){
nicknameArr.splice(i,1)
}
}
var mes={type:'leave',data:conn.nickname+' 离开聊天',nickname:conn.nickname,client:nicknameArr}
broadcast(JSON.stringify(mes))
});
conn.on('error',function(err){
console.log('handle err')
})
}).listen(port)
function broadcast(str){ //获取客户端连接的人数并返回消息
server.connections.forEach(function(connection){
connection.sendText(str)
})
}
总结
到此这篇关于基于node+websocket+html实现腾讯课堂聊天室聊天功能的文章就介绍到这了,更多相关node+websocket+html聊天室内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网！
