Открытие соединения WebSocket
Подключайтесь к серверу WebSocket.
«Открытие соединения WebSocket» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.
Что такое WebSockets?
WebSockets обеспечивают постоянное полнодуплексное соединение между браузером и сервером через одно TCP-соединение. В отличие от модели запроса и ответа HTTP, любая сторона может отправить сообщение в любой момент — это идеально подходит для чатов, потоков данных в реальном времени и игр.
Схемы ws и wss
URL-адреса WebSocket используют ws:// (незашифрованное соединение) или wss:// (соединение с шифрованием TLS). В рабочей среде всегда предпочитайте wss://, как и https.
const url = "wss://example.com/socket";Создание соединения
Создайте socket с помощью new WebSocket(url). Рукопожатие начинается сразу, но соединение не готово, пока не будет открыто.
const socket = new WebSocket("wss://example.com/socket");
console.log(socket.url);Событие открытия соединения
onopen срабатывает после завершения рукопожатия. Только после этого безопасно отправлять данные.
socket.onopen = (event) => {
console.log("Connection established");
socket.send("Hello server");
};Альтернатива addEventListener
Вместо свойств on* можно использовать addEventListener, чтобы подключить несколько обработчиков.
socket.addEventListener("open", () => {
console.log("open via listener");
});Состояние readyState соединения
readyState сообщает о жизненном цикле: CONNECTING (0), OPEN (1), CLOSING (2), CLOSED (3).
if (socket.readyState === WebSocket.OPEN) {
socket.send("ready!");
}Подпротоколы
Второй аргумент позволяет согласовать подпротокол. Сервер выбирает один из них, после открытия соединения его можно прочитать через socket.protocol.
const s = new WebSocket("wss://example.com", ["chat", "v2.chat"]);
s.onopen = () => console.log("Using", s.protocol);Одинаковый источник и смешанное содержимое
Страница, загруженная через https, может открывать только соединения wss:// — открытие ws:// блокируется как смешанное содержимое. Планируйте URL-адреса с учётом этого ограничения.
Тип двоичных данных
Установите binaryType в "blob" (значение по умолчанию) или "arraybuffer", чтобы управлять способом получения двоичных кадров.
socket.binaryType = "arraybuffer";Минимальный клиент
Соберём всё вместе: откроем соединение, выведем состояние через log и освободим ресурсы.
const socket = new WebSocket("wss://example.com/socket");
socket.onopen = () => console.log("opened");
socket.onclose = () => console.log("closed");Тайм-ауты соединения
У WebSockets нет встроенного тайм-аута подключения. Используйте timer, который закрывает socket, если onopen не сработал вовремя.
const socket = new WebSocket(url);
const timer = setTimeout(() => {
if (socket.readyState !== WebSocket.OPEN) socket.close();
}, 5000);
socket.onopen = () => clearTimeout(timer);Быстрая проверка
Проверьте основы работы с соединением.
Повторение: открытие соединения
Вы изучили схемы ws и wss, создали socket с помощью new WebSocket, обработали onopen, проверили readyState, согласовали подпротоколы и добавили тайм-аут подключения. Далее: отправка и получение сообщений.
Часто задаваемые вопросы
Урок «Открытие соединения WebSocket» бесплатный?
Да — полный текст урока «Открытие соединения WebSocket» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.
Чему я научусь в уроке «Открытие соединения WebSocket»?
Подключайтесь к серверу WebSocket. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать JavaScript Academy?
Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Открытие соединения WebSocket»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке JavaScript Academy?
Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Открытие соединения WebSocket
- Отправка и получение сообщений
- Жизненный цикл соединения и ошибки
- Стратегии повторного подключения