受疫情影响很多中小学选择线上教程,大多数学校采用腾讯课堂直播,那么今天小编给大家分享一段代码关于基于node+websocket+html实现腾讯课堂聊天室聊天功能。
前端部分用到的知识:websocket,h5,contenteditable属性服务端部分:node, websocket部分效果:
功能细节需要注意的地方
前端部分:
(1)输入框要可以输入表情图片( 不能用textarea,要用contenteditable='true'
来实现)
(2)消息数量的显示限制,比如我最多只显示最新的30条消息 (通过对dom节点的长度判断和移除实现)
(3) 最新消息要始终显示在底部(通过scrollTop来实现)
(4)对信息分类进行区分,是用户进入,离开,普通消息,还是送花进行划分
服务端部分:
websocket相关知识的运用
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" type="text/css" href="css/style.css" rel="external nofollow" /> <title>聊天室</title> </head> <body> <div class="container"> <header>不充钱你觉得你会变得更强吗!!!</header> <div class="cont"> <video src="/UploadFiles/2021-04-02/big_buck_bunny.mp4">总结