基于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 相关文章推荐
循环 vs 递归浅谈
Feb 28 Javascript
网站接入QQ登录的两种方法
Jul 22 Javascript
javascript如何写热点图
Dec 08 Javascript
AngularJS进行性能调优的7个建议
Dec 28 Javascript
javascript表单事件处理方法详解
May 15 Javascript
ionic+AngularJs实现获取验证码倒计时按钮
Apr 22 Javascript
JavaScript数组的5种迭代方法
Sep 29 Javascript
node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能
Jan 12 Javascript
微信小程序 如何引入外部字体库iconfont的图标
Jan 31 Javascript
layui prompt 设置允许空白提交的方法
Sep 24 Javascript
js判断在哪个浏览器打开项目的方法
Jan 21 Javascript
VSCode Vue开发推荐插件和VSCode快捷键(小结)
Aug 08 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 远程关机实现代码
2009/11/10 PHP
PHP中的switch语句的用法实例详解
2015/10/21 PHP
浅谈PHP中foreach/in_array的使用
2015/11/02 PHP
PHP使用token防止表单重复提交的方法
2016/04/07 PHP
PHP获取客户端及服务器端IP的封装类
2016/07/21 PHP
php判断文件上传图片格式的实例详解
2017/09/30 PHP
php通过pecl方式安装扩展的实例讲解
2018/02/02 PHP
PHP常量DIRECTORY_SEPARATOR原理及用法解析
2020/11/10 PHP
js跨域和ajax 跨域问题的实现思路
2009/09/05 Javascript
jquery 多行文本框(textarea)高度变化
2013/07/03 Javascript
showModalDialog模态对话框的使用详解以及浏览器兼容
2014/01/11 Javascript
jQuery中removeData()方法用法实例
2014/12/27 Javascript
AngularJS+Node.js实现在线聊天室
2015/08/28 Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
2015/11/07 Javascript
javascript 数组的正态分布排序的问题
2016/07/31 Javascript
JavaScript实现大图轮播效果
2017/01/11 Javascript
详解用vue.js和laravel实现微信授权登陆
2017/06/23 Javascript
Vue精简版风格概述
2018/01/30 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
2018/04/19 Javascript
微信小程序动态生成二维码的实现代码
2018/07/25 Javascript
Vue中使用clipboard实现复制功能
2018/09/05 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
2019/05/17 Javascript
JS使用new操作符创建对象的方法分析
2019/05/30 Javascript
JS函数本身的作用域实例分析
2020/03/16 Javascript
[03:59]5分钟带你了解什么是DOTA2(第二期)
2017/02/07 DOTA
Python引用模块和查找模块路径
2016/03/17 Python
python中Matplotlib实现绘制3D图的示例代码
2017/09/04 Python
python实现教务管理系统
2018/03/12 Python
IE滤镜与CSS3效果(详细整理分享)
2013/01/25 HTML / CSS
SAZAC的动物连体衣和动物睡衣:Kigurumi Shop
2020/03/14 全球购物
小学教师个人先进事迹材料
2014/05/17 职场文书
学习型党组织建设经验材料
2014/05/26 职场文书
12.4法制宣传日活动总结
2014/08/26 职场文书
爱护公共设施演讲稿
2014/09/13 职场文书
JavaScript实现复选框全选功能
2021/04/11 Javascript
PyMongo 查询数据的实现
2021/06/28 Python