GIF-сокеты. Коммуникации в реальном времени через анимированный GIF

в 13:04, , рубрики: server push, websockets, анимированный gif, Веб-разработка, обработка изображений, метки: , ,

Неизвестно, что курил разработчик Альваро Видела (Alvaro Videla) из компании VMware, но созданная им библиотека gifsockets явно должна была выйти 1 апреля, а не сегодня. Это библиотека для установки канала realtime-коммуникаций, используя анимированный GIF в качестве транспорта!

Идея в том, что в формате анимированного GIF'а не указывается количество фреймов, так что после отображения картинки браузер ждёт новых фреймов с сервера до тех пор, пока не получит сигнальные биты о конце файла. Другими словами, сервер может пушить в браузер сообщения по открытому каналу в GIF. Всё очень просто.

Cложно найти этой технологии полезное применение, но у автора есть несколько идей: например, интерактивный прогресс-бар для отображения ходы выполнения какой-то задачи на сервере. Кроме того, такие «Websockets из 90-х» работают в любом браузере, даже в IE6, то есть если клиент требует поддержки реалтаймовых коммуникаций во _всех_ браузерах, даже самых древних, можно предложить ему такой вариант, в шутку или всерьёз.

Кроме того, такие gif'ы можно приспособить под индикаторы нагрузки сервера, онлайновые чаты, интерактивные карты, виджеты с погодой, температурой и проч., отображения количества пользователей на сайте.

Трансляция в GIF текстовых сообщений с сервера

Вот как устанавливается канал и передаются сообщения со стороны сервера (Clojure REPL)

;; in the repl do the following to import the libs
(use 'gifsockets.core)
(use 'gifsockets.server)
;;
;;Then we declare the tcp server
(def server (tcp-server :port 8081 :handler gif-handler))
(start2 server)
;; wait for a browser connection on port 8081
;; go and open http://localhost:8081/ in Safari or IE6
;; In Chrome it works a bit laggy and in Firefox it doesn't work at all
;;
;; Now let's create the gif encoder that we use to write messages to the browser.
(def encoder (create-gif (.getOutputStream client)))
;;
;;Now we are ready to send messages to that browser client
(add-message encoder "Hello gif-sockets")
;; now you should see a GIF image with the new message on it.
(add-message encoder "Zup zup zup")
(add-message encoder "And so forth")
;;
;; Now let's clean up and close the connection
(.finish encoder)
(.close client)

Видео

P.S. В обсуждении на Hacker News вспомнили, что этот хак с обновлением «бесконечного» gif'а демонстрировался ещё в 1999-м году.

Автор: alizar

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js