基于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 节点操作 以及DOMDocument属性和方法
Dec 06 Javascript
javaScript NameSpace 简单说明介绍
Jul 18 Javascript
php析构函数的具体用法小结
Mar 11 Javascript
吐槽一下我所了解的Node.js
Oct 08 Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
Aug 07 Javascript
JavaScript对象学习小结
Sep 02 Javascript
JavaScript的instanceof运算符学习教程
Jun 08 Javascript
Angularjs 实现一个幻灯片示例代码
Sep 08 Javascript
vue将时间戳转换成自定义时间格式的方法
Mar 02 Javascript
微信小程序实现发送验证码按钮效果
Dec 20 Javascript
JavaScript之解构赋值的理解
Jan 30 Javascript
Vue 实现显示/隐藏层的思路(加全局点击事件)
Dec 31 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 Undefined index的问题
2009/06/01 PHP
Fatal error: session_start(): Failed to initialize storage module: files问题解决方法
2014/05/04 PHP
CodeIgniter实现更改view文件夹路径的方法
2014/07/04 PHP
linux下编译安装memcached服务
2014/08/03 PHP
11个PHPer必须要了解的编程规范
2014/09/22 PHP
PHP实现的简单mock json脚本分享
2015/02/10 PHP
Centos 6.5系统下编译安装PHP 7.0.13的方法
2016/12/19 PHP
Laravel框架FormRequest中重写错误处理的方法
2019/02/18 PHP
JavaScript中判断整字类型最简洁的实现方法
2014/11/08 Javascript
Angularjs中三种数据的绑定策略(“@”,“=”,“&amp;”)
2016/12/23 Javascript
javascript设计模式之中介者模式学习笔记
2017/02/15 Javascript
ES6新特性二:Iterator(遍历器)和for-of循环详解
2017/04/20 Javascript
关于Vue单页面骨架屏实践记录
2017/12/13 Javascript
自己动手封装一个React Native多级联动
2018/09/19 Javascript
js中对象与对象创建方法的各种方法
2019/02/27 Javascript
react koa rematch 如何打造一套服务端渲染架子
2019/06/26 Javascript
简述vue-cli中chainWebpack的使用方法
2019/07/30 Javascript
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
2019/09/10 Javascript
BootstrapValidator验证用户名已存在(ajax)
2019/11/08 Javascript
[01:30]DOTA2上海特锦赛现场采访 Loda倾情献唱
2016/03/25 DOTA
Python Web框架Flask中使用新浪SAE云存储实例
2015/02/08 Python
python使用socket向客户端发送数据的方法
2015/04/29 Python
浅谈用Python实现一个大数据搜索引擎
2017/11/28 Python
Python中logging.NullHandler 的使用教程
2018/11/29 Python
利用python脚本如何简化jar操作命令
2019/02/24 Python
python3访问字典里的值实例方法
2020/11/18 Python
Spartoo葡萄牙鞋类网站:线上销售鞋履与时尚配饰
2017/01/11 全球购物
爱国演讲稿400字
2014/05/07 职场文书
领导四风问题整改措施思想汇报
2014/10/13 职场文书
通知的格式范文
2015/04/27 职场文书
2015年秋季校长开学典礼致辞
2015/07/29 职场文书
母亲节感言
2015/08/03 职场文书
酒店员工管理制度
2015/08/05 职场文书
高中诗歌鉴赏教学反思
2016/02/16 职场文书
基于Python绘制子图及子图刻度的变换等的问题
2021/05/23 Python
centos8安装MongoDB的详细过程
2021/10/24 MongoDB