基于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 相关文章推荐
IE 条件注释详解总结(附实例代码)
Aug 29 Javascript
js控制淡入淡出示例代码
Nov 12 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
Dec 14 Javascript
简单方法判断JavaScript对象为null或者属性为空
Sep 26 Javascript
js实现编辑div节点名称的方法
Dec 17 Javascript
js实现倒计时效果(小于10补零)
Mar 08 Javascript
利用Node.js检测端口是否被占用的方法
Dec 07 Javascript
JS实现多物体运动的方法详解
Jan 23 Javascript
使用Node.js实现一个多人游戏服务器引擎
Mar 13 Javascript
3分钟了解vue数据劫持的原理实现
May 01 Javascript
vue axios请求成功却进入catch的原因分析
Sep 08 Javascript
vue 使用vant插件做tabs切换和无限加载功能的实现
Nov 04 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&amp;mysql(四)
2006/10/09 PHP
php 传值赋值与引用赋值的区别
2010/12/29 PHP
php获取URL中带#号等特殊符号参数的解决方法
2014/09/02 PHP
初识laravel5
2015/03/02 PHP
深入浅出php socket编程
2015/05/13 PHP
PHP书写格式详解(必看)
2016/05/23 PHP
ThinkPHP 3.2.3实现加减乘除图片验证码
2018/12/05 PHP
JS 页面自动加载函数(兼容多浏览器)
2009/05/18 Javascript
神奇的7个jQuery 3D插件整理
2011/01/06 Javascript
基于jQuery的图片左右无缝滚动插件
2012/05/23 Javascript
jquery无刷新验证邮箱地址实现实例
2014/02/19 Javascript
AngularJS入门教程之REST和定制服务详解
2016/08/19 Javascript
JavaScript定义全局对象的方法示例
2017/01/12 Javascript
JavaScript反射与依赖注入实例详解
2018/05/29 Javascript
Nuxt默认模板、默认布局和自定义错误页面的实现
2020/05/11 Javascript
[02:50]【扭转乾坤,只此一招】DOTA2全新版本永雾林渊开启新篇章
2020/12/24 DOTA
pymongo为mongodb数据库添加索引的方法
2015/05/11 Python
Python读取网页内容的方法
2015/07/30 Python
尝试使用Python多线程抓取代理服务器IP地址的示例
2015/11/09 Python
Django 使用logging打印日志的实例
2018/04/28 Python
Python2包含中文报错的解决方法
2018/07/09 Python
Python实现栈的方法详解【基于数组和单链表两种方法】
2020/02/22 Python
浅谈Keras中shuffle和validation_split的顺序
2020/06/19 Python
Python生成pdf目录书签的实例方法
2020/10/29 Python
用python 绘制茎叶图和复合饼图
2021/02/26 Python
Made in Design英国:设计家具、照明、家庭装饰和花园家具
2019/09/24 全球购物
英国在线定做百叶窗网站:Make My Blinds
2020/08/17 全球购物
医学实习生自我鉴定
2013/12/12 职场文书
优秀求职信范文分享
2013/12/19 职场文书
秘书行业自我鉴定范文
2013/12/30 职场文书
公安交警个人对照检查材料思想汇报
2014/10/01 职场文书
2015年消费者权益日活动总结
2015/02/09 职场文书
前台岗位职责范本
2015/04/16 职场文书
考勤制度通知
2015/04/25 职场文书
Pygame如何使用精灵和碰撞检测
2021/11/17 Python
世界十大动漫制作公司排行榜,迪士尼上榜,第二是美国代表性文化符
2022/03/18 欧美动漫