来源：链接
说明
介绍： 聊天室，功能主要：实时对话 + 实时在线人数 + 查看历史记录 + 心跳检测。技术栈：
前端： 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)}
项目地址：链接
