GIF-сокеты. Коммуникации в реальном времени через анимированный 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-м году.
    Ads
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More

    Comments 68

      +1
      *Wide open eyes*, не он не курил ..., он что то другое…
        +6
        Здорово. Можно, вероятно, устраивать онлайн-трансляции, или сделать видеоплеер на GIF.
          +2
          ну это совсем не оправданно, слишком много трафика, или вы предлагаете, кодировать видео, передавать в гиф, а на стороне клиента преобразовать во что то типа flv, ну это совсем извращение ))
            +7
            Траффик, да, но с другой стороны, можно устраивать потоковое вещание совершенно на любом сайте, где можно ставить гифку. Типа тут, в комментах хабра =)
              0
              То есть сама статья — это нормально?:)
            +17
            А по gif сокету можно передавать другой gif socket?
            image
              +48
              Тут скорее подойдет:

                +3
                need_to_go_deeper.jpg.to
                • UFO just landed and posted this here
                  • UFO just landed and posted this here
                      +1
                      need_to_go_GIFer.gif
                        –1
                        Некрофил :D
                    +2
                    Почему House M.D., а не inception?
                      +7
                      Вероятно потому, что в этой серии (2-17) он рассказывает Вилсону про то, что самый большой член в животном мире принадлежит морскому жолудю. Инстересный и бесполезный факт. Типа как данный прикол с GIF. Ящитаю
                      0
                      А по gif сокету можно передавать другой gif socket?
                      Этот вопрос напомнил мне пост о minecraft.
                        0
                        Рискуете отправиться в рекурсию.
                        –1
                        Cложно найти этой технологии полезное применение
                        

                        Этим все сказано.

                        В начале видео идей для применения появилось сразу несколько. Но то что страница все время грузиться убило все…
                          +1
                          Можно покадрово транслировать состояние терминала. 8 цветов хватит на всех.
                            +3
                            Iframe :D
                              0
                              Этим все сказано

                              Я не знаю как на счёт сабжевой технологии, но что у ВебСокетов, что у Стриминга через readyStateChange=3 есть огромная проблема с файрволами и антивирусами. Вполне возможно, что сабжевая технология их не имеет.
                                0
                                Например хитрую капчу можно сделать.
                                  0
                                  Как именно?
                                +2
                                А по-моему достаточно интересный вариант для эмуляции веб-сокетов в браузерах их не поддерживающих. При условии, что клиентский JS сможет получить доступ к данным, полученным от сервера. Как-то интереснее, чем, например, flash.
                                  0
                                  Бесконечный iframe лучше, ИМХО.
                                    +1
                                    Чем лучше-то?
                                    +5
                                    По-моему, это эмуляция не веб-сокетов, а long polling.
                                      0
                                      Скажем так: и то, и другое, и третье с четвёртым реализация полнодуплексного обмена между браузером и сервером. Но веб-сокеты нативны в современных браузерах, а всё остальное костыли. Потму как-то сейчас чаще встречается эмуляция костылями именно интерфейса веб-сокетов (или приведение всего к абстрактному интерфейсу, но ближе к сокетам).
                                      • UFO just landed and posted this here
                                          0
                                          Почему только one-way?
                                            0
                                            Отличие сокетов в том, что соединение не закрывается после получение данных, так что в long-polling надо все таки терять время на установление нового коннекта

                                            Есть технологии, как бесконечный ифрейм и ajax-readyStateChange=3, в которых новый коннект устанавливается только для отправления данных.
                                              0
                                              Дайте, пожалуйста, пару ссылок, где можно почитать, упоминаемые Вами подходы.
                                                +2
                                                Во, еле нашёл эту статью meteorserver.org/interaction-modes/:

                                                Streaming делается одним из двух способов — бесконечный iframe (старый проверенный способ) или открытое XHR соединение, в которое постоянно дописываются данные, и срабатывает событие onreadystatechnage.

                                                Второе работает только в Хроме и Фоксе, так как onreadystatechange в Опере вызывается только раз, а в IE нельзя получить responseText до readystatechange=4.

                                                Если надо послать данные, то паралельно просто отправляется ajax-запрос, а от сервера данные сваливаются всё-равно в исходный канал.

                                                Ну а polling и long-polling — известные способы, их даже объяснять не буду.
                                                  0
                                                  Спасибо. Я не знал про бесконечный ифрейм.
                                            0
                                            это обычный progressive stream
                                          0
                                          любопытно. а получится обрабатывать поток JS без полной загрузки? а то там сокет вполне как сокет заработать может.
                                          • UFO just landed and posted this here
                                              0
                                              Потоковое видео в gif? Это что-то… старенькое!
                                                +1
                                                Даёшь видеоконференции через почтовые клиенты! ))
                                                  0
                                                  После просмотра видео осталось впечатление, что автор (видео) не то хотел написать для демонстрации: «The Matrix has you...»
                                                    +1
                                                    Подозреваю, что при достаточно долгой загрузке память будет нехило отжираться: браузер будет держать в памяти все загруженные кадры. То есть как прогресс-бар — ну, можно при большом желании (кстати, надо не забывать отправлять пустые кадры через небольшие отрезки времени, иначе скачивание прервётся). А для долгого чата и подобных задач методика слишком непрактична (даже если забыть, что она создана ради прикола).
                                                      +1
                                                      Это прям как браузер кеширует весь ролик на ютюбе?
                                                        0
                                                        Хуже. В браузере видео остаётся упакованным набором байтов, а GIF-ка с большой вероятностью распаковывется в грубо говоря 32-битный BMP.
                                                          0
                                                          Где? Зачем?
                                                            +1
                                                            Ну а как вы думаете хранится графика в памяти? Распаковывается из ГИФа ради каждой перерисовки, ради каждого кадра?
                                                              –1
                                                              Непонятно почему видео браузер может каждый раз раскодировать, а вот GIF нет. В чем разница то принципиальная?
                                                                +3
                                                                Браузер может каждый раз декодировать ГИФки, но я сильно сомневаюсь, что современные браузеры так делают. Скажем, если я смотрю видео, то я не удивляюсь, что мой CPU нагружается (при условии отсутствия аппаратного декодирования или настолько большого числа ядер, что нагрузка совсем незаметна). Это нормально: вот оно, одно такое видео, я его смотрю, другими задачами не занимаюсь, по 10 видео одновременно не воспроизвожу. Если же я просто читаю сайт, а автор разместил на сайте десяток гифок, то за нагрузку CPU я на браузер обижусь. У меня 50 вкладок открыто, на каждой по паре гифок, всё висит.

                                                                Также см. комментарий ниже.
                                                                  +1
                                                                  Я так понимаю, Athari о том, что браузер хранит в памяти скачанное flv, а флеш-плеер выводит 24-битные кадры 848x480, читая нужную часть этой памяти, и их нигде не складирует. А тут придется хранить в памяти весь ресурс (bitmap, много кадров).
                                                                  0
                                                                  Зачем 8битному гифу распаковываться в 32битный бмп?
                                                                    +6
                                                                    Современные графические карты не поддерживают палитровую графику, каким бы парадоксальным это ни казалось. :) Текстурные палитры с имитацией на шейдерах и прочие извраты — наше всё. То есть для быстрой работы будет 32 бита. Если насиловать железо, то можно хранить в 8 битах, но рисоваться будет на порядок медленнее, потому что каждый раз будут копироваться данные.

                                                                    Хотя как на самом деле браузеры поступают — без понятия. Разные могут по-разному. Учитывая, что сейчас стало модным аппаратное ускорение, думаю, графика из любого формата будет перегоняться в полноцветную текстуру. И если сейчас так не у всех, до завтра будет у всех.
                                                            0
                                                            Можно рефрешем ифрейма сбрасывать память и открывать новый гиф-коннект, эдак каждые 50 мегабайт.
                                                            Сессию сохранить не проблема.
                                                              0
                                                              можно, но тем самым можно пропустить небольшой фрагмент данных. Это как вещание видео с разрывами. Да и кеше будет помойка.
                                                                0
                                                                Зачем терять данные? Все равно пользуем яваскрипт, новые данные не приходят по сокету, делаем локейшн на iframe, ничего сверъестественного даже для ie6
                                                                  0
                                                                  потеря будет при реконнекте. Когда происходит лаг, ты отстаешь от реального времени, образуется буфер. Когда происходит реконнект, буфер теряешь.
                                                            0
                                                            Кстати, для камер наблюдения вполне подходит. (и разве там так не делали?)
                                                              0
                                                              Там обновляется jpg в iframe через n секунд. Не?
                                                                0
                                                                Отправлять один-два раза в секунду черно-белые кадры, как вариант.
                                                              –3
                                                              Для php есть что-то готовое? Или возможно ли реализовать такое с imagick не вникая в gif формат?
                                                                +1
                                                                Пацаны ваще ребята, смотрим порно фильмы с субтитрами на древних телефонах без поддержки видео онлайн!
                                                                  +1
                                                                  Не хочу вас огорчать, но у вас не получиться.
                                                                  Древние телефоны как раз работают по схеме «сначала загрузил и обработал — потом показал». Это очень частая ошибка при разработке сайтов… Даже повисший счетчик или баннер не даст открыть страницу сайта.
                                                                    0
                                                                    Ну простыми гифками на Nook Simple Touch киношки крутил кто-то. Извращение, конечно, но забавно выглядело.
                                                                  +1
                                                                  К сожалению, далеко не все браузеры показывают GIF сразу и без задержек, не все умеют корректно обрабатывать FPS внутри потока и синхронизируют время «рывками». Пример тому Opera, в том числе последних версий. Если по пути будет прокся, то мелкие фреймы могут запаздывать, ожидая остаток файла. Браузер может дропнуть соединение по таймауту. Да и когда будет начата анимация? Некоторые браузеры начинают проигрывание только при появлении анимации в видимой области. Вообще, много чего может произойти. Именно поэтому я когда-то написал свою либу для работы и гифами и забросил ее.

                                                                  Ради шутки могу добавить поддержку трансляции GIF в Icecast, если кому-то интересно (и у меня дойдут руки).
                                                                    0
                                                                    Это настолько очевидно, что непонятно что тут изобретать: bolknote.ru/2011/10/08/~3431/ mJPEG существует, почему бы и не быть mGIF?
                                                                      0
                                                                      А что будет, если объединить GIF со звуком, которая обсуждалась ранее?
                                                                        +1
                                                                        Скоро на всех сайтах запестрит реклама основанная на GIF-сокетах (дешево и сердито). Так укроп я курил, знаю что получается. Может амброзия попробовать!?
                                                                          –1
                                                                          Круто!

                                                                          Было уже, правда не так круто =) Один парень сделал в году 2003 что-то вроде архиватора в GIF-файл. Получалось так, что гифка была размером 1 пиксел но весила 100 мегабайт =)

                                                                          А если шагнуть ещё дальше, то можно прокинуть VPN через GIF или tor
                                                                            0
                                                                            Хорошо бы еще HTML5 Canvas Sockets т.е. транслировать по Canvas элементу. ВОТ ЭТО БУДЕТ КРУТО!
                                                                            • UFO just landed and posted this here
                                                                                0
                                                                                Блин, это очень интересно. Я вот подумал, что этим методом можно воспользоваться для постинга таких гифок на сайтах типа Лепрозория. Попытался вчитаться, но либо терпения либо знаний мне не хватило… Может кто нибудь подсказать, как подобное реализовать? Есть сервер, нужно чтоб работало из ссылки на этот «гиф».

                                                                                Only users with full accounts can post comments. Log in, please.