JavaScript WebSocket — постійне з'єднання із сервером

WebSocket — постійне двобічне з'єднання із сервером: сервер може надіслати дані сам, не чекаючи запиту від браузера.

правити

Загальний опис

Звичайний HTTP влаштований як допит: браузер питає — сервер відповідає. Щоб дізнатись про нове повідомлення в чаті, доводилось питати сервер щосекунди («а зараз? а зараз?») — це називали polling, і воно марно палило трафік і батарею.

Вебсокет перевертає модель: з'єднання відкривається один раз і лишається живим. Далі обидві сторони шлють повідомлення тоді, коли їм є що сказати.

Звідси й сфера: чати, сповіщення, спільне редагування, біржові котирування, онлайн-ігри.

Адреса починається з ws:// або (на HTTPS-сайті обов'язково) wss://.

правити

Нотатка

З'єднання рветься — мережа зникла, сервер перезапустився. Робочий код завжди має обробник onclose із перепідключенням, інакше застосунок тихо «замерзне».

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

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

методи

властивості

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	5	11	5	12.1	12	10

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	14	4.2

Підтримка: серверні переглядачі

Переглядач
	22.0.0	1.4

Приклади

+ запропонувати свій приклад у пісочниці

function connect() {
    const socket = new WebSocket('wss://example.com/chat');

    socket.onopen = () => console.log('З\'єднано');

    socket.onmessage = event => {
        const message = JSON.parse(event.data);
        console.log(message.author + ':', message.text);
    };

    // з'єднання ЗАВЖДИ колись обірветься
    socket.onclose = () => {
        console.log('Розрив, пробуємо за 3 секунди');
        setTimeout(connect, 3000);
    };

    socket.onerror = error => console.error(error);

    return socket;
}

const socket = connect();

// надіслати можна будь-коли, доки з'єднання відкрите
if (socket.readyState === WebSocket.OPEN) {
    socket.send(JSON.stringify({ text: 'Привіт' }));
}