websoket - 技术栈

WebSockets 是一种先进的技术。它可以在用户的浏览器和服务器之间打开交互式通信会话。你可以向服务器发送消息并接收事件驱动的响应，而无需通过轮询服务器的方式以获得响应，比较典型的应用场景就是即时通讯（聊天）系统。

复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WebSocket 示例</title>
  </head>
  <body>
    <script>
      // 实例化 socket
      const ws = new WebSocket('wss://socketsbay.com/wss/v2/1/demo/')
      // 监听连接的建立
      ws.onopen = function (ev) {
        console.log('建立连接...')
        ws.send('Hello WebSockets!')
      }
      // 监听连接的断开
      ws.onclose = function (ev) {
        console.log('断开连接...')
      }
      // 监听 socket 服务器消息
      ws.onmessage = function (ev) {
        console.log('收到消息: ' + ev.data)
      }
    </script>
  </body>
</html>

Socket.IO 是基于 WebSocket 进行的二次封装，封装了更多的业务层面的逻辑，如身份认证等、事件驱动等。

注：其实 Socket.IO 不仅仅是封装了 WebSocket，还有基于 Ajax 的长轮询机制，在不支持 WebSocket 的环境中会自动降级为基于 Ajax 的长轮询机制。

长轮询机制可以粗暴的理解为在一个定时器中不断的重复发 Ajax 请求，以实现与服务器实时通信的功能。

客户端代码

复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>socket.io 示例</title>
</head>

<body>
  <button id="myButton">点击</button>
  <!-- <script src="node_modules/socket.io/client-dist/socket.io.js"></script> -->
  <script src="https://cdn.socket.io/4.4.1/socket.io.min.js"></script>
  <script>
    // 实例化
    const socket = io('http://localhost:3000', {
      transports: ['websocket'],
    })

    socket.on('connect', () => {
      console.log('建立连接...')
    })

    socket.on('disconnect', () => {
      console.log('断开连接...')
    })

    socket.on('sendToClient', (msg) => {
      console.log('收到来自服务器数据: ' + msg)
    })

    var myButton = document.getElementById('myButton');
    myButton.addEventListener('click', function () {
      socket.emit('sendToServer', '的花花世界是江苏省靖江市就是')
    });
  </script>
</body>

</html>

服务端代码

复制代码

// server.js
import { createServer } from 'http'
import { Server } from 'socket.io'
import path from 'path'

const server = createServer()
const io = new Server(server)

// websocket
io.on('connection', (client) => {
  console.log('建立连接...')

  // 消息发送
  client.on('sendToServer', (msg) => {
    console.log('收到了客户端的数据: ' + msg)

    // 随机返回一条消息
    const messages = ['你好!', '我在写代码', '快下课了吧？']
    // 0 ~ 2 随机数据
    const index = Math.floor(Math.random() * 3)

    // 向客户端回复消息
    io.emit('sendToClient', messages[index])
  })

  // 断开连接
  client.on('disconnect', () => {
    console.log('断开连接...')
  })
})

server.listen(3000, () => {
  console.log('server start')
})