基于node+websocket+html实现腾讯课堂聊天室聊天功能
受疫情影响很多中小学选择线上教程，大多数学校采用腾讯课堂直播，那么今天小编给大家分享一段代码关于基于node+websocket+html实现腾讯课堂聊天室聊天功能。
前端部分用到的知识：websocket,h5,contenteditable属性服务端部分：node, websocket部分效果：
功能细节需要注意的地方
前端部分：
（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聊天室内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
使用Java和WebSocket实现网页聊天室实例代码
在没介绍正文之前,先给大家介绍下websocket的背景和原理: 背景 在浏览器中通过http仅能实现单向的通信,comet可以一定程度上模拟双向通信,但效率较低,并需要服务器有较好的支持; flash中的socket和xmlsocket可以实现真正的双向通信,通过 flex ajax bridge,可以在javascript中使用这两项功能. 可以预见,如果websocket一旦在浏览器中得到实现,将会替代上面两项技术,得到广泛的使用.面对这种状况,HTML5定义了WebSocket协议,能更
-
golang基于websocket实现的简易聊天室程序
本文实例讲述了golang基于websocket实现的简易聊天室.分享给大家供大家参考,具体如下: 先说点无关的,最近忙于工作没有更新博客,今天休息顺便把golang websocket研究了一下,挺好玩的,写了一个聊天室,分享给大家. websocket包 : code.google.com/p/go.net/websocket 文档 : http://go.pkgdoc.org/code.google.com/p/go.net/websocket 首先安装websocket包 复制代码 代码
-
微信小程序websocket聊天室的实现示例代码
背景 最近做了一个微信小程序的即时通讯功能,之前我也做过node.js的websocket服务,不过是在web端应用的socket.io服务.小程序本身对http.websocket等连接均有诸多限制,所以这次项目选择了node.js自带的ws模块. 服务端 初始化一个node.js项目,引入ws模块 const webSocket = require('ws'); 创建websocket实例,并设置监听端口 const wss = new webSocket.Server({ port: 30
-
php基于websocket搭建简易聊天室实践
本文实例讲述了php基于websocket搭建简易聊天室实践.分享给大家供大家参考.具体如下: 1.前言 公司游戏里面有个简单的聊天室,了解了之后才知道是node+websocket做的,想想php也来做个简单的聊天室.于是搜集各种资料看文档.找实例自己也写了个简单的聊天室. http连接分为短连接和长连接.短连接一般可以用ajax实现,长连接就是websocket.短连接实现起来比较简单,但是太过于消耗资源.websocket高效不过兼容存在点问题.websocket是html5的资源 2.前
-
用java WebSocket做一个聊天室
最近一个项目中,需要用到Java的websocket新特性,于是就学了一下,感觉这技术还挺好玩的,瞬间知道网页上面的那些在线客服是怎么做的了. 先看图: 实现了多客户机进行实时通讯. 下面看代码项目结构图:很简单,就1个类,1个页面 然后看具体代码 先看后端代码 package com.main; import java.io.IOException; import java.util.concurrent.CopyOnWriteArraySet; import javax.websocket.
-
使用WebSocket实现即时通讯(一个群聊的聊天室)
随着互联网的发展,传统的HTTP协议已经很难满足Web应用日益复杂的需求了.近年来,随着HTML5的诞生,WebSocket协议被提出,它实现了浏览器与服务器的全双工通信,扩展了浏览器与服务端的通信功能,使服务端也能主动向客户端发送数据. 传统的HTTP协议是无状态的,每次请求(request)都要由客户端(如浏览器)主动发起,服务端进行处理后返回response结果,而服务端很难主动向客户端发送数据:这种客户端是主动方,服务端是被动方的传统Web模式对于信息变化不频繁的Web应用来说造成的麻烦
-
基于Swoole实现PHP与websocket聊天室
websocket Websocket只是一个网络通信协议 就像 http.ftp等都是网络通信的协议:不要多想: 相对于HTTP这种非持久的协议来说,Websocket是一个持久化网络通信的协议: WebSocket和HTTP的关系 有交集,但是并不是全部. Websocket只是借用了HTTP的一部分协议来完成一次握手.(HTTP的三次握手,此处只完成一次) http和websocket 请求头对比: HTTP: 原来的时候,客户端通过http(骑马)带着信请求服务器,服务器处理请求(写回信
-
基于node+websocket+html实现腾讯课堂聊天室聊天功能
受疫情影响很多中小学选择线上教程,大多数学校采用腾讯课堂直播,那么今天小编给大家分享一段代码关于基于node+websocket+html实现腾讯课堂聊天室聊天功能. 前端部分用到的知识:websocket,h5,contenteditable属性服务端部分:node, websocket部分效果: 功能细节需要注意的地方 前端部分: (1)输入框要可以输入表情图片( 不能用textarea,要用contenteditable='true'来实现) (2)消息数量的显示限制,比如我最多只显示最新
-
Node.js利用Net模块实现多人命令行聊天室的方法
这篇文章介绍的是Node.js利用Net模块实现命令行式的多人聊天室,下面话不多说,来看看详细的介绍吧. 1.net模块基本API 要使用Node.js的net模块实现一个命令行聊天室,就必须先了解NET模块的API使用.NET模块API分为两大类: Server和Socket类.工厂方法. Server类如下图所示: net.Server类可以用来创建一个TCP或本地服务器,继承了EventEmitter. Socket类如下: net.Socket类一般用创建一个socket客户端或者是ne
-
QT基于TCP实现网络聊天室程序
本文实例为大家分享了QT学习:基于TCP的网络聊天室程序,供大家参考,具体内容如下 TCP与UDP的差别如图: 一.TCP工作原理 如下图所示,TCP能够为应用程序提供可靠的通信连接,使一台计算机发出的字节流无差错 地送达网络上的其他计算机.因此,对可靠性要求高的数据通信系统往往使用TCP传输数据,但在正式收发数据前,通信双方必须首先建立连接. 二.TCP编程模型 下面介绍基于TCP的经典编程模型,TCP客户端与服务器间的交互时序如下图所示: 三.TCP服务器端编程实例 TCP服务器端的具体实现
-
基于Node.js的WebSocket通信实现
node的依赖包 node中实现Websocket的依赖包有很多,websocket.ws均可,本文选取ws来实现,首先安装依赖 npm install ws 聊天室实例 假如A,B,C,D用户均通过客户端连接到Websocket服务,其中每个人发的消息都需要将其通过Websocket转发给其他人,此场景类似于服务端将A的消息广播给组内其他用户. 服务端实现 首先来看服务端程序,具体的工作流程分以下几步: 创建一个WebSocketServer的服务,同时监听8080端口的连接请求. 每当有新的
-
基于Node.js + WebSocket打造即时聊天程序嗨聊
前端一直是一块充满惊喜的土地,不仅是那些富有创造性的页面,还有那些惊赞的效果及不断推出的新技术.像node.js这样的后端开拓者直接将前端人员的能力扩大到了后端.瞬间就有了一统天下的感觉,来往穿梭于前后端之间代码敲得飞起,从此由前端晋升为'前后端'. 本文将使用Node.js加web socket协议打造一个网页即时聊天程序,取名为HiChat,中文翻过来就是'嗨聊',听中文名有点像是专为寂寞单身男女打造的~ 其中将会使用到express和socket.io两个包模块,下面会有介绍. 源码 源码
-
Node.js websocket使用socket.io库实现实时聊天室
认识websocket WebSocket protocol 是HTML5一种新的协议.它实现了浏览器与服务器全双工通信(full-duple).一开始的握手需要借助HTTP请求完成. 其实websocket 并不是很依赖Http协议,它也拥有自己的一套协议机制,但在这里我们需要利用的socket.io 需要依赖到http . 之前用java jsp写过一个聊天,其实实现逻辑并不难,只是大部分时间都用在UI的设计上,其实现原理就是一个基于websocket的通信,要想做一个好的聊天室,我觉得大部
-
基于Tomcat7、Java、WebSocket的服务器推送聊天室实例
前言 HTML5 WebSocket实现了服务器与浏览器的双向通讯,双向通讯使服务器消息推送开发更加简单,最常见的就是即时通讯和对信息实时性要求比较高的应用.以前的服务器消息推送大部分采用的都是"轮询"和"长连接"技术,这两中技术都会对服务器产生相当大的开销,而且实时性不是特别高.WebSocket技术对只会产生很小的开销,并且实时性特别高.下面就开始讲解如何利用WebSocket技术开发聊天室.在这个实例中,采用的是Tomcat7服务器,每个服务器对于WebSoc