受疫情影响很多中小学选择线上教程，大多数学校采用腾讯课堂直播，那么今天小编给大家分享一段代码关于基于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="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" controls="controls"></video>
</div>
<div class="right">
<div class="right_top">
<div class="item ac_border">讨论</div>
<div class="item" id="person">成员</div>
</div>
<div class="r_item">
<div class="right_cont">
<ul id="messageWrap"></ul>
</div>
<div class="right_bot">
<div class="r_b_t clearfix">
<div class="emoji " title="选择标签"></div>
<div class="flower" title="献花"></div>
</div>
<div class="inputMeg_f">
<!--inputMeg外添加div inputMeg_f 的原因是为了自定义滚动条的手势是箭头，如果不加，改成inputMeg设置滚动条样式，那么滚动条的熟悉是输入手势-->
<div class="inputMeg" contenteditable="true" placeholder="请输入文字"></div>
</div>
<div class="send_btn">发送</div>
