Vue Academy · Урок

Клиент Socket.io с Vue

socket.io-client, io(url), socket.on/emit и реактивное состояние Vue на основе событий сокета

«Клиент Socket.io с Vue» — бесплатный урок Vue Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.

Зачем нужен Socket.IO

Обычные WebSockets работают на низком уровне. Socket.IO — популярная библиотека, которая добавляет автоматическое переподключение, резервные варианты транспорта, комнаты и удобный API на основе событий.

Для сервера и клиента существуют соответствующие пакеты; здесь мы сосредоточимся на клиенте браузера, используемом внутри Vue.

Установка клиента

Добавьте пакет клиента в проект Vue. Он устанавливается отдельно от серверного пакета.

// terminal
// npm install socket.io-client

import { io } from "socket.io-client"

Подключение с помощью io()

Вызовите io(url), чтобы создать сокет и подключиться. В отличие от обычных WebSockets, здесь нужно указать URL со схемой http(s):// — Socket.IO самостоятельно согласует транспорт.

import { io } from "socket.io-client"

const socket = io("https://api.example.com", {
  autoConnect: true,
})

Прослушивание с помощью socket.on

Socket.IO построен вокруг именованных событий. Используйте socket.on(name, handler), чтобы реагировать на событие сервера. Обработчик получает любую полезную нагрузку, переданную сервером.

socket.on("message", (msg) => {
  console.log("New message:", msg.text, "from", msg.user)
})

Встроенные события жизненного цикла

Socket.IO передаёт собственные события жизненного цикла, которые можно прослушивать: connect, disconnect и connect_error.

socket.on("connect", () => {
  console.log("Connected, id:", socket.id)
})

socket.on("disconnect", (reason) => {
  console.log("Disconnected:", reason)
})

Отправка с помощью socket.emit

Для отправки вызовите socket.emit(name, payload). Имя события выбираете Вы; сервер прослушивает это же имя. Вручную кодировать JSON не нужно — Socket.IO выполняет сериализацию автоматически.

function sendMessage(text) {
  socket.emit("send", { text, at: Date.now() })
}

sendMessage("Hello room!")

Реактивный массив сообщений

В Vue храните входящие сообщения в реактивном массиве ref. Обработчик socket.on добавляет в него сообщения, а шаблон автоматически перерисовывается.

import { ref } from "vue"

const messages = ref([])

socket.on("message", (msg) => {
  messages.value.push(msg)
})

Подключение в блоке настройки скрипта

Обычно компонент подключается в onMounted, регистрирует слушатели и предоставляет шаблону функцию отправки.

import { ref, onMounted, onUnmounted } from "vue"
import { io } from "socket.io-client"

const messages = ref([])
const socket = io("https://api.example.com")

onMounted(() => {
  socket.on("message", (m) => messages.value.push(m))
})

function send(text) {
  socket.emit("send", { text })
}

Очистка слушателей

Слушатели, зарегистрированные с помощью socket.on, остаются подключёнными. При повторном монтировании компонента могут появиться дублирующиеся обработчики. Удаляйте их с помощью socket.off при завершении работы.

function onMessage(m) { messages.value.push(m) }

onMounted(() => socket.on("message", onMessage))
onUnmounted(() => socket.off("message", onMessage))

Отключение в onUnmounted

Когда компонент уничтожается, закройте соединение с помощью socket.disconnect(), чтобы открытый сокет не сохранялся при переходах между страницами.

import { onUnmounted } from "vue"

onUnmounted(() => {
  socket.disconnect()
})

Подтверждения

Полезная возможность Socket.IO: передайте функцию обратного вызова последним аргументом emit, и сервер сможет вызвать её для подтверждения получения. Это особенно удобно для интерфейса со статусом «сообщение доставлено».

socket.emit("send", { text: "hi" }, (ack) => {
  console.log("Server confirmed:", ack.status)
})

Проверка знаний

Проверьте, насколько хорошо Вы понимаете API клиента Socket.IO.

Итоги

В этом уроке Вы узнали:

io(url) из socket.io-client подключается с использованием URL http(s).
socket.on(name, handler) реагирует на именованные события сервера.
socket.emit(name, payload) отправляет события; полезные нагрузки сериализуются автоматически.
Добавляйте входящие данные в реактивный массив ref, чтобы отображать их в шаблоне.
Удаляйте слушатели с помощью socket.off и отключайте соединение через socket.disconnect() в onUnmounted.

Часто задаваемые вопросы

Урок «Клиент Socket.io с Vue» бесплатный?

Да — полный текст урока «Клиент Socket.io с Vue» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.

Чему я научусь в уроке «Клиент Socket.io с Vue»?

socket.io-client, io(url), socket.on/emit и реактивное состояние Vue на основе событий сокета Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vue Academy?

Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Клиент Socket.io с Vue»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vue Academy?

Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Vue Academy