Как работает WebSocket(Comet)?

Добрый день! Посмотрел кучу примеров по применению WebSocket, Comet. Так и не понял как это реализуется. Пожалуйста подскажите что делать. Есть проект, где есть два поля, поле для ссылки и текстовое поле, я заполняю поля данными и отправляю их в БД с помощью AJAX, в php скрипте всё просто там просто принимаю две переменные фильтрую их, добавляю в БД и получаю ответ(без перезагрузки). Но вот появилась задача, что необходим Real Time, т.к админ сайта может работать с блоками где выведены(ссылка и текст), т.е изменять данные в блоках, и у пользователей должно показываться, что данные меняются и всё это в реальном времени, да здесь нужен WebSocket или Comet. Подскажите как конкретно это реализовать без Node.js потому Node нет на хостингах. Буду очень благодарен кто поможет/подскажет. Желательно пример привести или ссылку на пример.

Как работает COMET?
  • Вопрос задан
  • 1306 просмотров
Пригласить эксперта
Ответы на вопрос 2
abyrkov
@abyrkov
JavaScripter
Вы точно смотрели туда? Модель Comet однонаправленая: от сервера к клиенту, а это, очевидно, не то, что вам нужно. Но...
Модель Comet реализуется в клиентской части стандартом Server-Sent Events. Суть ее довольно проста: сервер отправляет строки во всремя создания события. А браузер уже заботится, что бв соединение не прерывалось. Реализация на стороне клиента:
var ticker = EventSource('our.php');
ticker.onmessage = function(e) {
  console.log(e.type);
  console.log(e.data);
}

Со строны сервера должны приходить строки такого вида:
event: hello
data: Hello, World!

Обратите внимание на последнюю строку. Она, собственно говоря, создает событие.
Матчасть: Comet, EventSource

Пример:
var ticker = EventSource('changes.php');
ticker.onmessage = function(e) {
  // Реагируем только на события изменений
  // Нам приходит id + ' ' + html, для примера. Мы очищаем данные split'ом, но настоятельно
  // рекомендую придумать свой формат
  if(e.type == "messagechange") data(e.data.split(' ')[0], e.data.split(' ').slice(1).join(''), e.data);
}
var elements = document.getElementsByClassName('message');
function data(id, data) {
  // Нам приходит id элемента, по которому мы определяем, к какому элементу изменения
  // и дата. В данном примере, id определяет номер элемента, но вы можете изменить эту
  // логику на свою
  elements[+elNum].innerHTML = data;
}

Пример данных от бэкенда
event: messagechange
data: 0 It works!


WebSocket - это как раз двунаправленая связь. Работают они по особому протоколу. Не буду вникать в технические детали, однако соединение постоянное(чего не скажешь про SSE). Реализацию на клиенте берет коструктор WebSocket. Пример:
var socket = new WebSocket('ws://ws.example.com/res');
socket.onopen = fucntion(e) {
  // Socket opened
}
socket.onclose = function(e) {
  // Socket closed
}
socket.onerror = function(e) {
  // Error!
}
socket.onmessage = function(e) {
  console.log(e.data);
}
socket.send('Hello, server!');
socket.close();

Матчасть: MDN
Ответ написан
Rou1997
@Rou1997
Для начала советую изучить TCP, затем WebSocket рекомендую начинать изучать на Node.js, уже потом без него, быстро все равно не получится реализовать систему, если конечно нужна надежность и действительно максимально "реальное" время с учетом обрывом сетевого кабеля, пропадания Wi-Fi у клиентов и т.п.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы