聊天室 nodeJs + websocket + mysql 实操

来源：链接

说明

介绍： 聊天室，功能主要：实时对话 + 实时在线人数 + 查看历史记录 + 心跳检测。技术栈：

前端： 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)
}

 

 

项目地址：链接