Учебник Nodejs 19: WebSocket One: создание приложения WebSocket с использованием Socket.io

Node.js

Чтобы прочитать больше статей из этой серии, пожалуйста, посетите мойБлог GitHub, пример кода, пожалуйста, посетитездесь.

Преимущества веб-сокетов

  1. Высокая производительность.

    В зависимости от данных тестовой среды он будет примерно в 2-10 раз выше, чем обычные Ajax-запросы. HTTP — это текстовый протокол, и объем данных относительно велик.

    WebSocket — это бинарный протокол, хотя при установлении соединения используются текстовые данные, все бинарные данные передаются позже, поэтому производительность выше, чем у Ajax-запросов.

  2. Двусторонняя связь.

    Если это обычный запрос Ajax, данные необходимо получать в режиме реального времени, а запрос можно отправлять только регулярно с таймером, что приведет к трате ресурсов сервера и трафика.

    С помощью WebSocket сервер может активно отправлять информацию внешнему интерфейсу.

  3. Строгий режим

    Из-за позднего появления WebSocket, по сравнению с протоколом HTTP, безопасность рассматривается более полно.

Затем попытайтесь установить двустороннюю связь на основе WebSocket с Socket.io.

Socket.io

Socket.io является распространенным использованием библиотеки WebSocket, он определяется автоматически с помощью браузеров WebSocket, поддерживающих WebSocket, другие браузеры, такие как flash и т. д., будут использоваться для завершения связи.

  1. легко использовать
  2. Совместимость с младшими браузерами, такими как IE6
  3. Автоматизируйте анализ данных
  4. Автоматическое переподключение Если соединение разорвано, WebSocket автоматически переподключится.

Создание приложения WebSocket с использованием Socket.io

Пример кода на стороне сервера: /lesson19/server.js

const http = require('http')
const io = require('socket.io')

// 1. 建立HTTP服务器。
const server = http.createServer((req, res) => {

})

server.listen(8080)

// 2. 建立WebSocket，让socket.io监听HTTP服务器，一旦发现是WebSocket请求，则会自动进行处理。
const ws = io.listen(server)

// 建立连接完成后，触发connection事件。
// 该事件会返回一个socket对象（https://socket.io/docs/server-api/#Socket），可以利用socket对象进行发送、接收数据操作。
ws.on('connection', (socket) => {
  // 根据事件名，向客户端发送数据，数据数量不限。
  socket.emit('msg', '服务端向客户端发送数据第一条', '服务端向客户端发送数据第二条')

  // 根据事件名接收客户端返回的数据
  socket.on('msg', (...msgs) => {
    console.log(msgs)
  })

  // 使用计时器向客户端发送数据
  setInterval(() => {
    socket.emit('timer', new Date().getTime())
  }, 500);
})

Образец кода клиента: /lesson19/index.html

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <!-- 引用Socket.io的客户端js文件，由于Socket.io已在服务端监听了HTTP服务器的请求，一旦收到对该文件的请求，则会自动返回该文件，不需要开发人员配置。 -->
  <!-- 该文件在服务端的位置为/node_modules/socket.io/node_modules/socket.io-client/dist/socket.io.js -->
  <script src="http://localhost:8080/socket.io/socket.io.js"></script>
  <script>
    // 与服务器建立WebSocket连接，该连接为ws协议，socket.io不需要担心跨域问题。
    const socket = io.connect('ws://localhost:8080/')

    // 根据事件名，向服务端发送数据，数据数量不限。
    socket.emit('msg', '客户端向服务端发送数据第一条', '客户端向服务端发送数据第二条')

    // 根据事件名接收服务端返回的数据
    socket.on('msg', (...msgs) => {
      console.log(msgs)
    })

    // 接收服务端通过计时器发送来的数据
    socket.on('timer', (time) => {
      console.log(time)
    })
  </script>
</body>

</html>

Откройте index.html в браузере, и вы увидите распечатанное сообщение на консоли.

Категории