微客导航 » 文章资讯 » 基于node+websocket+html实现腾讯课堂聊天室聊天功能

基于node+websocket+html实现腾讯课堂聊天室聊天功能

2023-07-29 19:38:04 153

受疫情影响很多中小学选择线上教程，大多数学校采用腾讯课堂直播，那么今天小编给大家分享一段代码关于基于node+websocket+html实现腾讯课堂聊天室聊天功能。

前端部分用到的知识：websocket,h5,contenteditable属性服务端部分：node,websocket部分效果：

功能细节需要注意的地方

前端部分：

（1）输入框要可以输入表情图片( 不能用textarea,要用contenteditable='true'来实现)

（2）消息数量的显示限制，比如我最多只显示最新的30条消息(通过对dom节点的长度判断和移除实现)

(3) 最新消息要始终显示在底部（通过scrollTop来实现）

（4）对信息分类进行区分，是用户进入，离开，普通消息，还是送花进行划分

服务端部分:

websocket相关知识的运用

代码：









聊天室




不充钱你觉得你会变得更强吗！！！

讨论

成员

发送 server.js: varws=require("nodejs-websocket") varport=8001; varclientCount=0; varnicknameArr=[]; varserver=ws.createServer(function(conn){ clientCount++; conn.nickname='user'+clientCount; nicknameArr.push(conn.nickname) varmes={type:'enter',data:'欢迎'+conn.nickname+'进入聊天',nickname:conn.nickname,client:nicknameArr} broadcast(JSON.stringify(mes)) conn.on("text",function(str){//监听客户端发送过来的消息 varzstr=JSON.parse(str) varmes={type:zstr.type,data:zstr.data,nickname:conn.nickname,client:nicknameArr} broadcast(JSON.stringify(mes)) }) conn.on("close",function(code,reason){ clientCount--; for(vari=nicknameArr.length-1;i>=0;i--){//删除退出的用户 if(conn.nickname==nicknameArr[i]){ nicknameArr.splice(i,1) } } varmes={type:'leave',data:conn.nickname+'离开聊天',nickname:conn.nickname,client:nicknameArr} broadcast(JSON.stringify(mes)) }); conn.on('error',function(err){ console.log('handleerr') }) }).listen(port) functionbroadcast(str){//获取客户端连接的人数并返回消息 server.connections.forEach(function(connection){ connection.sendText(str) }) }

总结

到此这篇关于基于node+websocket+html实现腾讯课堂聊天室聊天功能的文章就介绍到这了,更多相关node+websocket+html聊天室内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

基于node+websocket+html实现腾讯课堂聊天室聊天功能

热门推荐

随机推荐