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


Posted in Javascript onMarch 04, 2020

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

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

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

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

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

功能细节需要注意的地方

前端部分:

(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>
   <div id="emojiBox" class="clearfix"></div>
  </div>
  </div>
  <div class="r_item" style="display: none">
   <ul class="personWrap"></ul>
  </div>
 </div>
 </div>
</body>
 
<script src="../jquery.js"></script>
<script>
 $(".right_top .item").click(function () {
 $(this).siblings().removeClass('ac_border')
 $(this).addClass('ac_border')
 $('.r_item').css('display','none').eq($(this).index()).css('display','block')
 })
 
 function checkValue() {
 
 $(".emoji").off('click').click(function (e) {
  $("#emojiBox").css('display', 'block')
  var ev = e || window.event;
  ev.stopPropagation();
 })
 $(".container").off('click').click(function () {
  $("#emojiBox").css('display', 'none')
 })
 
 
 }
 checkValue();
 
 //生成表情
 var emojiHtml = '';
 var emojiBox = document.getElementById('emojiBox');
 for (var i = 0; i < 7; i++) {
 for (var j = 0; j < 15; j++) {
  var dom = document.createElement('div');
  dom.className = 'emojiItem';
  dom.style.backgroundPositionX = -24 * j + 'px';
  dom.style.backgroundPositionY = -29 * i + 'px';
  emojiBox.appendChild(dom)
  chooseEmoji(i, j, dom)
 }
 
 }
 
 function chooseEmoji(i, j, dom) {
 dom.onclick = function (e) {
  const src = 'img/icon' + (i * 15 + j) + '.gif';
  var img = $('<img class="emojiImg" src=' + src + '>')
  $('.inputMeg').append(img)
  $("#emojiBox").css('display', 'none')
  var ev = e || window.event;
  ev.stopPropagation();
 }
 }
 
 var userName=''; //当前登录的用户
 //websocket
 var websocket = new WebSocket(
 'ws://localhost:8001/'); //连接的地址,是ws协议,不是http协议(本地地址localhost:8001,要想手机也能访问到,改成本地ip192.168.0.107:8001)
 websocket.onopen = function () { //监听建立连接
 $('.send_btn').off('click').click(function () {
  var text = $('.inputMeg').html()
  if (text != '' && text != '请输入文字') {
  websocket.send(JSON.stringify({data:text,type:'message'})) //发送消息
  $('.inputMeg').html('')
  }
 });
 
 $('.flower').off('click').click(function(){ //送花
  var dom= '<span>"'+userName+'"</span>送给<br> "春哥" 一朵小花<i class="flowIcon"></i>'
  
  websocket.send(JSON.stringify({data:dom,type:'flower'})) //发送消息
 })
 
 }
 websocket.onmessage = function (e) {
 var res = JSON.parse(e.data);
 message(res)
 }
 
 
 function message(res) {
 var dom = document.createElement('li');
 switch (res.type) {
  case 'enter':
  dom.innerHTML = res.data;
  dom.style.color = 'green';
  userName=res.nickname;
  person(res);
  break;
  case 'leave':
  dom.innerHTML = res.data;
  dom.style.color = 'red';
  person(res)
  break;
  case 'message':
  name.innerHTML = res.nickname + ': ';
  dom.innerHTML = "<span class='nickName'>" + res.nickname + ": </span> " + res.data + ""
  break;
  case 'flower':
  dom.className='flowerLi';
  dom.innerHTML=res.data;
  break;
  default:
  break;
 }
 document.getElementById('messageWrap').appendChild(dom);
 limitLength(30)
 scrollBottom();
 
 //成员显示
 
 }
 
 function scrollBottom() { //显示最新消息在底部
 var h1 = document.getElementsByClassName('right_cont')[0].offsetHeight;
 var h2 = document.getElementById('messageWrap').offsetHeight;
 if (h2 > h1) {
  $('.right_cont').scrollTop(h2 - h1);
 }
 }
 
 function limitLength(num) { //限制聊天室最多能显示几条消息
 var li = $('#messageWrap li')
 if (li.length > num) {
  li.eq(0).remove();
 }
 }
 
 function person(res){ //成员显示
 var html=''
 for(var i=0;i<res.client.length;i++){
  html+= '<li><span class="nickname">'+res.client[i]+'</span></li>'
 }
 $('.personWrap').html(html);
 
 $('#person').html('成员('+res.client.length+')')
 
 }
</script>
 
</html>
 
 
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聊天室内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
用方法封装javascript的new操作符(一)
Dec 25 Javascript
js原型继承的两种方法对比介绍
Mar 30 Javascript
JSON相关知识汇总
Jul 03 Javascript
10个很棒的jQuery代码片段
Sep 24 Javascript
JQuery validate插件Remote用法大全
May 15 Javascript
jQuery新窗口打开外链接
Jul 21 Javascript
详解如何在vue项目中使用lodop打印插件
Sep 27 Javascript
微信小程序实现锚点功能
Nov 20 Javascript
Electron实现应用打包、自动升级过程解析
Jul 07 Javascript
Vue点击切换Class变化,实现Active当前样式操作
Jul 17 Javascript
在Uni中使用Vue的EventBus总线机制操作
Jul 31 Javascript
VSCode插件安装完成后的配置(常用配置)
Aug 24 Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
Mar 04 #Javascript
微信小程序如何加载数据库真实数据的实现
Mar 04 #Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
Mar 04 #Javascript
微信小程序云函数添加数据到数据库的方法
Mar 04 #Javascript
jquery实现垂直手风琴菜单
Mar 04 #jQuery
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
Mar 04 #Javascript
微信浏览器左上角返回按钮监听的实现
Mar 04 #Javascript
You might like
PHP开发文件系统实例讲解
2006/10/09 PHP
php 三维饼图的实现代码
2008/09/28 PHP
深入php 正则表达式的学习探讨
2013/06/06 PHP
PHP图片裁剪与缩放示例(无损裁剪图片)
2017/02/08 PHP
微信第三方登录(原生)demo【必看篇】
2017/05/26 PHP
php代码调试利器firephp安装与使用方法分析
2018/08/21 PHP
IE中直接运行显示当前网页中的图片 推荐
2006/08/31 Javascript
JQuery Tips(2) 关于$()包装集你不知道的
2009/12/14 Javascript
利用JS延迟加载百度分享代码,提高网页速度
2013/07/01 Javascript
js中Math之random,round,ceil,floor的用法总结
2013/12/26 Javascript
angularJS 中input示例分享
2015/02/09 Javascript
C#中使用迭代器处理等待任务
2015/07/13 Javascript
JavaScript实现向右伸出的多级网页菜单效果
2015/08/25 Javascript
Bootstrap每天必学之标签与徽章
2015/11/27 Javascript
JavaScript中匿名函数的用法及优缺点详解
2016/06/01 Javascript
JSON 对象未定义错误的解决方法
2016/09/29 Javascript
通过button将form表单的数据提交到action层的实例
2017/09/08 Javascript
微信小程序实现多个按钮的颜色状态转换
2019/02/15 Javascript
Vue中key的作用示例代码详解
2020/06/10 Javascript
pycharm 使用心得(六)进行简单的数据库管理
2014/06/06 Python
Python3实现发送QQ邮件功能(html)
2017/12/15 Python
Python通过属性手段实现只允许调用一次的示例讲解
2018/04/21 Python
Python之列表的插入&amp;替换修改方法
2018/06/28 Python
python使用 zip 同时迭代多个序列示例
2019/07/06 Python
Python Selenium截图功能实现代码
2020/04/26 Python
Python Pandas 对列/行进行选择,增加,删除操作
2020/05/17 Python
Python unittest生成测试报告过程解析
2020/09/08 Python
HTML5不支持frameset的两种解决方法
2016/11/14 HTML / CSS
单身旅行者的单身假期:Just You
2018/04/08 全球购物
请问如下代码执行后a和b的值分别是什么
2016/05/05 面试题
运动会广播稿300字
2014/01/10 职场文书
就业推荐表自我鉴定
2014/03/21 职场文书
运动会加油口号
2014/06/07 职场文书
班主任先进事迹材料
2014/12/17 职场文书
2021年国产动漫公司排行前十名,玄机科技上榜,第二推出过铠甲勇士
2022/03/18 杂记
我国拿下天问一号火星着陆区附近 22 个地理实体命名:平乐、西柏坡、古田、漠河等
2022/04/29 数码科技