来源：LoongPanda说明介绍：聊天室，功能主要：实时对话+实时在线人数+查看历史记录+心跳检测。技术栈：前端：vue3+vite+typescript+vue-router4后端：nodeJs+express+mysql+nginx+阿里云websocketAPI//连接constwsUrl:string=ref("")
来源：Loong Panda
说明
介绍： 聊天室，功能主要：实时对话 + 实时在线人数 + 查看历史记录 + 心跳检测。技术栈：
前端： vue3+ vite + typescript + vue-router4
后端：nodeJs + express + mysql + nginx + 阿里云
websocket API
// 连接
const wsUrl: string = ref("")
ws.value = new WebSocket(wsUrl.value)
// 监听服务端的消息
ws.value.onmessage = function (res: any) {
// to do something
const resData = JSON.parse(res.data)
}
// 连接事件
ws.value.onopen = function(res: any) {
// ElMessage({ "message": "连接成功，open", "type": "success" })
}
// 错误事件
ws.value.onerror = function(res: any) {
// ElMessage({ "message": "连接出错了", "type": "error" })
}
// 连接端开事件
ws.value.onclose = function(res: any) {
// ElMessage({ "message": "连接断开", "type": "warning" })
}
示例：
const token: string = ref("")
const ws: any = ref(null)
const reConnectCountRange: number = ref(50) // 允许重连的次数
const reConnectCount: number = ref(1) // 重连计数
const heartCountRange: number = ref(3) // 允许心跳次数范围，超出时重连
const heartCount: number = ref(1) // 心跳计数
const heartTimer: any = ref(null)
const wsUrl: string = ref("")
function connectWs () {
pageIndex.value = 1
showLoading.value = false
wsUrl.value = `ws://xxxx:888/ws?token=${token.value}`;
if (!token.value) {
return false
}
ws.value = new WebSocket(wsUrl.value)
ws.value.onmessage = function (res: any) {
// console.log("message", JSON.parse(res.data))
const resData = JSON.parse(res.data)
reConnectCount.value = 1
if (resData.code === 200) {
if (resData.isCone === 0) {
pageTotal.value = resData.data.count
onlineCount.value = resData.userCount
chatList.value = resData.data.map((x: any) => {
x.createTime = formatLately(x.createTime)
return x
})
} else if (resData.isCone === 1) {
const x: any = resData.data
x.createTime = formatLately(x.createTime)
chatList.value.push(x)
}
scrollBottom()
} else if (resData.code === 100) {
heartCount.value = 1
} else if (resData.code === 500) {
onlineCount.value = resData.userCount
} else if (resData.code === 400) {
onlineCount.value = resData.userCount
}
}
// 心跳
heartMethod()
ws.value.onopen = function(res: any) {
// ElMessage({ "message": "连接成功，open", "type": "success" })
}
ws.value.onerror = function(res: any) {
// ElMessage({ "message": "连接出错了", "type": "error" })
}
ws.value.onclose = function(res: any) {
// ElMessage({ "message": "连接断开", "type": "warning" })
}
}
// 心跳检测
function heartMethod() {
heartTimer.value = setInterval(() => {
if (heartCount.value < heartCountRange.value) {
if (ws.value) {
ws.value.send(JSON.stringify({ "code": 100, "msg": "前端的心跳请求" }))
heartCount.value++
}
} else {
ElMessage({ "message": "超出心跳次数, 准备重连！", "type": "warning" })
clearInterval(heartTimer.value)
if (ws.value) {
ws.value.close()
ws.value = null
}
heartCount.value = 1
// 限制重连次数
if (reConnectCount.value <= reConnectCountRange.value) {
connectWs()
reConnectCount.value++
} else {
ElMessageBox.Confirm(
"超出重连次数",
"",
{ "showconfirmButton": true, "showCancelButton": true, "confirmButtonText": "重连", "cancelButtonText": "取消", "type": "success" })
.then(() => {
reConnectCount.value = 1
connectWs()
})
}
}
}, 1000)
}
项目地址：Loong Panda
原创文章，作者：admin，如若转载，请注明出处：https://www.cshaobangshou.cn/126682.html
相关推荐
-
Python（python保留字）
作者：俊欣来源：关于数据分析与可视化今天小编总结归纳了若干个常用的可视化图表，并且通过调用plotly、matplotlib、altair、bokeh和seaborn等模块来分别绘制这些常用的可视化图表，最后无论是绘制可视化的代码，还是会指出来的结果都会通过调用streamlit模块展
-
梦到打架，梦到打架是什么意思周公解梦
我的梦记2022年： 一、梦记3月1日：1.梦到像是在我村半路平田这里，看像是以前同村6南和他儿子昌走去像村委员楼报打疫情什么的，像我大伯他也出现；还出现几个人，有一个像我老巴他和…
-
看什么视频赚钱快又多？看什么视频赚钱快又多提现快
转眼十月份了，你今年挣了多少钱？ 我妈常跟我说：要存钱，学会储蓄；但我爸偏要反着来，他跟我说：钱不是存出来的，会花钱才能挣钱……所以，到底怎样能既省钱、又挣钱？ 搜罗全网看过之后，…
-
cad标注样式设置（cad标注快捷键）
点击上方【大水牛测绘】关注我们CAD是一款常用的绘图软件，掌握CAD的绘图技巧可以有效提高我们的绘图效率，在使用CAD进行图纸绘制时，我们常常要对图形的尺寸等进行标注，相信大家都对CAD中的标注功能有一定的了解，今天小编要给大家介绍的是CAD中线性标注的详细设置方法，大家可以参考以下的方法调整线性标注。1.首先，打开CAD软件，任意绘制一个图
-
中国传统文化有哪些主要内容，中国传统文化有哪些主要内容英语
什么是文化？著名作家余秋雨讲了一个故事： 在法国的一个雨天，他和他的司机在一条只能停一辆车的狭窄道路上行驶。前面有一辆车开得太慢了，他们无法快速前行。余秋雨和司机很生气，司机不停地…
-
服装打版培训学费（服装打版培训学院）
社会在不断地发展，人们的审美也越来越高，尤其是?????要紧跟上时代的潮流人们在吃穿上也很注重，这个时候对服装设计师要求还是很大的。南通哪里有好的服装设计培训机构？今天南通上元服装…
-
solidworks螺纹配合怎么做?solidworks螺纹配合怎么消除干涉
solidworks螺纹配合怎么做? 在SolidWorks中，您可以使用配合特征来创建螺纹配合。以下是具体步骤： 创建两个带有螺纹的零件，一个作为外螺纹，一个作为内螺纹。 在外螺…
-
cad2020注册机下载（cad2019注册机下载链接）
1、傻瓜式安装，右键以管理员身份运行安装文件。2、附安装说明。3、附安装教程。软件包有CAD2006~CAD2014、CAD2020、CAD2021等软件，32位系统和64位系统均有，大家可以下载安装，附安装教程。还有许多CAD的学习资料，CAD是一款功
-
nginx反向代理三种模式（nginx反向代理缓存）
我们都知道Nginx是常用的反向代理服务器。但是什么是正向代理，什么是反向代理有时候概念好像不太好理解。我们画了一个不好看的图来解释代理和反向代理代理的理解我们的简单理解就是这个代理是正向还是反向与代理服务器设置的位置有关。这个代理服务器可能就是你计算机或者服务器上的进程。正向代理举例来说就是如果代
-
solidworks管道流体仿真，solidworks管道流体分析
solidworks管道流体仿真 在SolidWorks中，进行管道流体仿真的一般步骤如下： 创建几何模型：使用SolidWorks中的几何建模工具创建或导入管道几何模型。 创建流…
