来源：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) {    heartCount.value = 1    // 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