socket.io使用--- theme: geek-black --- > `server.js` ```js con

server.js

const http = require('http')
const { Server } = require('socket.io')

// 创建http服务器
const sever = http.createServer()
const io = new Server(sever, {
  cors: true, // 允许跨域
})

// socket.io是事件驱动模型
io.on('connection', (socket) => {
  console.log('连接成功')
  // 服务端接收客户端的消息
  socket.on('login', (data) => {
    // 第一个参数login是监听的事件名称，第二个参数data是接收的消息
    console.log(data)
  })
  let num = 0
  setInterval(() => {
    num++
    // 服务端给客户端发送消息
    socket.emit('data', `你有新的数据${num}`) // 第一个参数是事件名称，后面的参数是要发送的消息作为参数传递
  }, 1000)

  socket.timeout(5000).emit('hello', 'world', (err, response) => {
    if (err) {
      console.log('客户端没给心跳-->')
      // 另一方未在给定延迟内确认事件
    } else {
      console.log(response) // "got it"
    }
  })
})

sever.listen(8089, () => {
  console.log('8089 port is running')
})

客户端

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>聊天室</title>
  </head>

  <body></body>
  <!-- 通过CSDN引入socket.io -->
  <script type="module">
    import { io } from 'https://cdn.socket.io/4.7.5/socket.io.esm.min.js'

    const socket = io('ws://localhost:8089') // ws连接的地址
    console.log(socket)
    // 监听事件
    socket.on('connect', () => {
      console.log('连接成功')
      // 客户端给服务端发送消息
      // socket.emit('login', '123456') // 第一个参数是事件名称，后面都是需要发送的消息作为参数传递
      // 客户端接收服务端的消息
      socket.on('data', (data) => {
        // 第一个参数data是监听的事件名称，第二个参数data是接收的消息
        console.log(' 客户端接收服务端的消息', data)
        document.body.innerHTML = data
      })
    })
    socket.on('disconnect', (reason) => {
      console.log('断开连接时触发-->', reason)
    })
    socket.on('connect_error', () => {
      socket.connect()
      console.log('尝试重连-->')
    })

    socket.on('hello', (arg, callback) => {
      console.log(arg) // "world"
      callback('got it!')
    })
  </script>
</html>