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

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

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

功能细节需要注意的地方

前端部分：

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

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

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

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

服务端部分:

websocket相关知识的运用

代码：

 

 
 
 
 
 

 

 

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

  
 
 

  

  
讨论
  
成员
  
  

  

   

  
  

   

   

   

   
   

   
   

   
   
发送
   

  
  
  

   

  
 
 

 


 

 
 
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聊天室内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！