受疫情影响很多中小学选择线上教程,大多数学校采用腾讯课堂直播,那么今天小编给大家分享一段代码关于基于节点+ websocket + html实现腾讯课堂聊天室聊天功能。
<强>前端部分用到的知识:websocket,类推,contenteditable属性 <强>服务端部分:节点,websocket 部分效果:
前端部分:
(1)输入框要可以输入表情图片(,不能用文本区域,要用<代码> contenteditable=罢媸怠?/代码>来实现)
(2)消息数量的显示限制,比如我最多只显示最新的30条消息(通过对dom节点的长度判断和移除实现)
,(3),最新消息要始终显示在底部(通过scrollTop来实现)
,(4)对信息分类进行区分,是用户进入,离开,普通消息,还是送花进行划分
服务端部分:
websocket相关知识的运用
代码:
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt;元name=笆哟啊蹦谌?翱矶?设备宽度,初始=1.0”比;
& lt;元http-equiv=癤-UA-Compatible”内容=癷e=边缘”比;
& lt;链接rel="样式表" type=" text/css " href=" https://www.yisu.com/zixun/css/style.css " rel=巴獠縩ofollow”/比;
& lt; title>聊天室& lt;/title>
& lt;/head>
& lt; body>
& lt; div类="容器"比;
& lt; header>不充钱你觉得你会变得更强吗! ! ! & lt;/header>
& lt; div类=白狻北?
& lt;视频src=" http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4 "控制=翱刂啤弊４? lt;/video>
& lt;/div>
& lt; div类=罢贰北?
& lt; div类=皉ight_top”比;
& lt; div类="项ac_border "祝辞讨论& lt;/div>
& lt; div类="项目" id=叭恕痹诔稍? lt;/div>
& lt;/div>
& lt; div类=皉_item”比;
& lt; div类=皉ight_cont”比;
& lt; ul id=" messageWrap "祝辞& lt;/ul>
& lt;/div>
& lt; div类=皉ight_bot”比;
& lt; div class=" r_b_t clearfix”比;
& lt; div类=" emoji " title=把≡癖昵白４? lt;/div>
& lt; div类="花" title=跋住被ㄔ? lt;/div>
& lt;/div>
& lt; div类=癷nputMeg_f”比;
& lt; !——inputMeg外添加div inputMeg_f的原因是为了自定义滚动条的手势是箭头,如果不加,改成inputMeg设置滚动条样式,那么滚动条的熟悉是输入手势——比;
& lt; div类=" inputMeg " contenteditable=" true "占位符=扒胧淙胛淖帧白４? lt;/div>
& lt;/div>
& lt; div类=" send_btn "祝辞发送& lt;/div>
& lt; div id=癳mojiBox”class=癱learfix”祝辞& lt;/div>
& lt;/div>
& lt;/div>
& lt; div类=皉_item”比;
& lt; ul类=" personWrap "祝辞& lt;/ul>
& lt;/div>
& lt;/div>
& lt;/div>
& lt;/body>
& lt;脚本src=" https://www.yisu.com/jquery.js "祝辞& lt;/script>
& lt; script>
$("。right_top .item”)。点击(函数(){
(美元).siblings () .removeClass (“ac_border”)
(美元).addClass (“ac_border”)
$ (' .r_item ') . css(“显示”,“没有一个”).eq($(这).index ()) . css(“显示”、“块”)
}）
函数checkValue () {
$ (" .emoji ") .off(“点击”)。点击(函数(e) {
$ (" # emojiBox”)。css(“显示”、“块”)
var ev=e | | window.event;
ev.stopPropagation ();
}）
$ (" .container ") .off(“点击”)。点击(函数(){
$ (" # emojiBox”)。css(“显示”,“没有一个”)
}）
｝
checkValue ();//生成表情
var emojiHtml=";
var emojiBox=. getelementbyid (“emojiBox”);
(var=0;我& lt;7;我+ +){
(var j=0;j & lt;15;j + +) {
dom var=document.createElement (div);
dom。className=癳mojiItem”;
dom.style。backgroundPositionX=-24 * j +“px”;
dom.style。backgroundPositionY=-29 * i +“px”;
emojiBox.appendChild (dom)
dom chooseEmoji (i, j)
｝
｝
函数chooseEmoji (i, j, dom) {
dom。onclick=function (e) {
const src=" https://www.yisu.com/zixun/img/icon " +(我* 15 + j) +“gif”;
var img=$ (' & lt; img类=" emojiImg " src=' https://www.yisu.com/zixun/+ src + '在')
$ (' .inputMeg ') .append (img)
$ (" # emojiBox”)。css(“显示”,“没有一个”)
var ev=e | | window.event;
ev.stopPropagation ();
｝
｝
var用户名=";//当前登录的用户//websocket
var websocket=new websocket (
“ws://localhost: 8001/?;//连接的地址,是ws协议,不是http协议(本地地址localhost: 8001年,要想手机也能访问到,改成本地ip192.168.0.107:8001)
websocket。onopen=function(){//监听建立连接
$ (' .send_btn ') .off(“点击”)。点击(函数(){
var文本=$ (' .inputMeg ') . html ()
如果(文本!=",,文本!='请输入文字的){
websocket.send (JSON.stringify({数据:文本类型:‘消息’}))//发送消息
$ (' .inputMeg ') . html (")
｝
}）;
$(“菌核病”).off(“点击”).click(函数(){//送的花
dom var=' & lt; span>“+用户名+”& lt;/span>送给& lt; br>“春哥”一朵小花& lt;我类=癴lowIcon祝辞& lt;/i>
websocket.send (JSON.stringify({数据:dom,类型:‘花’}))//发送消息
}）
｝
websocket。onmessage函数=(e) {
var res=JSON.parse (e.data);
消息(res)
｝
函数消息(res) {
dom var=document.createElement(‘李’);
开关(res.type) {
例“输入”:
dom。innerHTML=res.data;
dom.style。颜色=奥躺?
用户名=res.nickname;
人(res);
打破;
例“离开”:
dom。innerHTML=res.data;
dom.style。颜色=昂焐?
人(res)
打破;
例“消息”:
的名字。innerHTML=res.nickname +‘:’;
dom。innerHTML=" & lt;跨类=瓣浅啤痹凇? res.nickname +”: & lt;/span>“+ res.data +”“
打破;
例“花”:
dom.className=癴lowerLi”;
dom.innerHTML=res.data;
打破;
默认值:
打破;
｝
. getelementbyid (messageWrap) .appendChild (dom);
limitLength (30)
scrollBottom ();//成员显示
｝
函数scrollBottom(){//显示最新消息在底部
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
