Vue Academy · Урок

Основы WebSocket в браузере

new WebSocket(url), onopen/onmessage/onerror/onclose, send() и readyState

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

Работа в реальном времени в браузере

HTTP работает по схеме «запрос и ответ»: клиент отправляет запрос, сервер отвечает, а соединение закрывается. Для чатов, панелей мониторинга в реальном времени или многопользовательских игр нужно, чтобы сервер мог push данные без запроса со стороны клиента.

Протокол WebSocket предоставляет одно долго живущее двустороннее соединение между браузером и сервером.

Открытие соединения

В браузере доступен глобальный конструктор WebSocket. Передайте ему URL со схемой ws:// (обычная) или wss:// (TLS).

Создание объекта немедленно запускает рукопожатие для установки соединения.

const ws = new WebSocket("wss://echo.example.com/socket")

// Construction kicks off the connection.
// Nothing is sent yet — we wait for it to open.

Обработчик открытия соединения

Соединение не готово сразу после создания. Событие onopen срабатывает после завершения рукопожатия, когда сокет готов передавать данные.

Отправляйте первое сообщение внутри onopen, но никогда не делайте этого раньше.

const ws = new WebSocket("wss://echo.example.com/socket")

ws.onopen = () => {
  console.log("Connected!")
  ws.send("hello server")
}

Получение сообщений

Входящие данные поступают через onmessage. Поле event.data содержит полезную нагрузку, которая по умолчанию является строкой.

Большинство приложений отправляют JSON, поэтому преобразуйте его обратно в объект.

ws.onmessage = (event) => {
  const msg = JSON.parse(event.data)
  console.log("Got:", msg.type, msg.payload)
}

Отправка сообщений

Используйте ws.send() для передачи данных. WebSockets передают обычные строки или двоичные данные, поэтому сначала кодируйте объекты с помощью JSON.stringify.

Обе стороны согласуют структуру данных — здесь это type и payload.

function sendChat(text) {
  const msg = { type: "chat", payload: { text } }
  ws.send(JSON.stringify(msg))
}

sendChat("Good morning")

Полный цикл обмена

Объединив открытие, отправку и получение, Вы получите полноценный клиент эхо-сервиса. Откройте сокет, отправьте данные после открытия и выведите всё полученное обратно в журнал.

const ws = new WebSocket("wss://echo.example.com/socket")

ws.onopen = () => {
  ws.send(JSON.stringify({ type: "ping" }))
}

ws.onmessage = (event) => {
  const data = JSON.parse(event.data)
  console.log("Server replied:", data)
}

Закрытие соединения

Событие onclose срабатывает при завершении соединения — независимо от того, вызвали ли Вы ws.close() или произошло отключение сети. Событие содержит числовой code и строковую reason.

Код 1000 означает обычное закрытие.

ws.onclose = (event) => {
  console.log("Closed:", event.code, event.reason)
  if (event.code !== 1000) {
    console.log("Unexpected close — may want to reconnect")
  }
}

// Trigger a clean close yourself:
// ws.close(1000, "done")

Обработка ошибок

Событие onerror срабатывает при сбоях транспорта. Само событие ошибки намеренно содержит мало подробностей в целях безопасности; воспринимайте его как сигнал о неполадке, после которого, скорее всего, последует закрытие соединения.

ws.onerror = (event) => {
  console.error("WebSocket error occurred")
  // onclose usually fires right after onerror.
}

Свойство состояния готовности

ws.readyState — это число, показывающее, на каком этапе жизненного цикла находится сокет. Всегда проверяйте его перед отправкой, чтобы не получить ошибку при попытке использовать ещё не открытый сокет.

0 CONNECTING
1 OPEN
2 CLOSING
3 CLOSED

function safeSend(data) {
  if (ws.readyState === WebSocket.OPEN) {
    ws.send(JSON.stringify(data))
  } else {
    console.warn("Not open, readyState =", ws.readyState)
  }
}

Именованные константы состояния готовности

Вместо магических чисел используйте константы класса WebSocket. Они гораздо понятнее, чем 0, 1 или 3.

console.log(WebSocket.CONNECTING) // 0
console.log(WebSocket.OPEN)       // 1
console.log(WebSocket.CLOSING)    // 2
console.log(WebSocket.CLOSED)     // 3

if (ws.readyState === WebSocket.OPEN) {
  ws.send("ready to talk")
}

Объединение всего в Vue

В компоненте Vue обычно создают сокет в onMounted, а закрывают его в onUnmounted. Обработчики обновляют реактивные ссылки, которые отображает шаблон.

import { ref, onMounted, onUnmounted } from "vue"

const messages = ref([])
let ws

onMounted(() => {
  ws = new WebSocket("wss://echo.example.com/socket")
  ws.onmessage = (e) => messages.value.push(JSON.parse(e.data))
})

onUnmounted(() => ws && ws.close())

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

Проверьте, насколько хорошо Вы понимаете значения состояния готовности WebSocket.

Итоги

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

new WebSocket(url) устанавливает двустороннее соединение с использованием ws:// или wss://.
onopen срабатывает, когда сокет готов; отправляйте данные только после этого.
onmessage передаёт данные в event.data — разберите JSON, чтобы получить объект.
ws.send(JSON.stringify(msg)) передаёт данные.
onclose и onerror обрабатывают завершение соединения и сбои.
readyState принимает значения: 0 CONNECTING, 1 OPEN, 2 CLOSING, 3 CLOSED.

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

Урок «Основы WebSocket в браузере» бесплатный?

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

Чему я научусь в уроке «Основы WebSocket в браузере»?

new WebSocket(url), onopen/onmessage/onerror/onclose, send() и readyState Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

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

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

Сколько времени занимает урок «Основы WebSocket в браузере»?

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

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

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

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

Основы WebSocket в браузере
Клиент Socket.io с Vue
Создание компонента чата в реальном времени
Композируемый модуль useWebSocket с переподключением

← Назад к Vue Academy