vsevolod/Dockerfile.liker

## Dockerfile.liker
FROM ruby:2.5

ENV LANG="C.UTF-8" \
    APP_HOME="/app" \
    BUNDLE_SILENCE_ROOT_WARNING="1"

RUN mkdir -p $APP_HOME

WORKDIR $APP_HOME

RUN apt update && apt install -y openssl wget && \
    wget https://gist.githubusercontent.com/vsevolod/eb5b68774a9a71d0642c6f8d339b9bb8/raw/liker_app.rb && \
    bundle config --global git.allow_insecure true && \
    bundle config github.https true

CMD ["ruby", "liker_app.rb"]

## liker_app.rb
require 'bundler/inline'

gemfile do
  source 'https://rubygems.org'
  gem 'redis'
  gem 'eventmachine', '1.2.7'
  gem 'em-hiredis'
  gem 'em-websocket'
  gem 'eventmachine_httpserver', require: 'evma_httpserver'
end

puts "Gems installed"

URL = ENV['URL'].freeze
INDEX = <<~HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .heart {
        position: absolute;
        top: 100%;
        height: 50px;
        width: 50px;
        -webkit-transition: 2.5s top ease-out, 0.5s visibility linear;
        -moz-transition: 2.5s top ease-out, 0.5s visibility linear;
        -o-transition: 2.5s top ease-out, 0.5s visibility linear;
        transition: 2.5s top ease-out, 0.5s visibility linear;
      }

      .heart.active {
        top: 30%;
        visibility: none;
      }
    </style>
  </head>
  <body>
    <div class='heart' id='heart_id' style="">
      <svg width="30" height="30" viewBox="0 0 120 104" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M97.5 9L117 30L59.5 100L3.5 30L21 9L59.5 3L97.5 9Z" fill="#FF003D"/>
        <path d="M97.5 9L117 30L59.5 100L3.5 30L21 9L59.5 3L97.5 9Z" fill="url(#paint0_linear)"/>
        <path d="M21 9L59.5 3M21 9L3.5 30M21 9L35.4211 39M97.5 9L117 30M97.5 9L59.5 3M97.5 9L85.5526 39M117 30L59.5 100M117 30L85.5526 39M59.5 3L85.5526 39M59.5 3L35.4211 39M59.5 100L3.5 30M59.5 100L35.4211 39M59.5 100L85.5526 39M3.5 30L35.4211 39M35.4211 39H85.5526" stroke="#D01010" stroke-width="4"/>
        <path d="M21 9L59.5 3M21 9L3.5 30M21 9L35.4211 39M97.5 9L117 30M97.5 9L59.5 3M97.5 9L85.5526 39M117 30L59.5 100M117 30L85.5526 39M59.5 3L85.5526 39M59.5 3L35.4211 39M59.5 100L3.5 30M59.5 100L35.4211 39M59.5 100L85.5526 39M3.5 30L35.4211 39M35.4211 39H85.5526" stroke="url(#paint1_linear)" stroke-width="4"/>
        <defs>
        <linearGradient id="paint0_linear" x1="60.25" y1="3" x2="60.25" y2="100" gradientUnits="userSpaceOnUse">
        <stop stop-color="white"/>
        <stop offset="1" stop-color="white" stop-opacity="0"/>
        </linearGradient>
        <linearGradient id="paint1_linear" x1="60.25" y1="3" x2="60.25" y2="100" gradientUnits="userSpaceOnUse">
        <stop stop-color="#FFA0A0" stop-opacity="0.42"/>
        <stop offset="1" stop-color="#FF8181" stop-opacity="0.63"/>
        </linearGradient>
        </defs>
      </svg>
    </div>

    <script>
      const heart = document.getElementById('heart_id');
      const socket = new WebSocket('ws://#{URL}:8080');

      socket.addEventListener('open', function (event) {
        console.log('Opened connection');
      });

      socket.addEventListener('message', function (event) {
        console.log('Message from server ', event.data);
        addHeart(event.data);
      });

      socket.addEventListener('close', function (event) {
        console.log('Closed connection');
      });


      function addHeart(name) {
        const item = heart.cloneNode(true);
        item.removeAttribute("id")
        const nickname = document.createTextNode(name);
        item.appendChild(nickname);
        document.body.appendChild(item);
        setTimeout(function() {
          item.classList.add('active');
          setTimeout(function() {
            document.body.removeChild(item);
          }, 2500);
        }, 50)
      }
    </script>
  </body>
</html>
HTML

class StaticHandler < EM::Connection
  include EM::HttpServer

  def post_init
    super
    no_environment_strings
  end

  def process_http_request
    response = EM::DelegatedHttpResponse.new(self)
    if @http_path_info == '/'
      response.status = 200
      response.content_type 'text/html'
      response.content = INDEX
    else
      response.status = 404
    end
    response.send_response
  end
end

EM.run do
  EventMachine::WebSocket.start(host: '0.0.0.0', port: 8080) do |ws|
    puts 'Establishing websocket'
    ws.onopen do
      @pubsub = EM::Hiredis.connect.pubsub
      @pubsub.subscribe('liker_bot')
      @pubsub.on(:message) { |_, message| ws.send message }
    end

    ws.onclose { puts 'Closed' }
  end

  EventMachine.start_server('0.0.0.0', 3000, StaticHandler)
  puts "Running on 3000. Socket: 8080"
end
	FROM ruby:2.5

	ENV LANG="C.UTF-8" \
	APP_HOME="/app" \
	BUNDLE_SILENCE_ROOT_WARNING="1"

	RUN mkdir -p $APP_HOME

	WORKDIR $APP_HOME

	RUN apt update && apt install -y openssl wget && \
	wget https://gist.githubusercontent.com/vsevolod/eb5b68774a9a71d0642c6f8d339b9bb8/raw/liker_app.rb && \
	bundle config --global git.allow_insecure true && \
	bundle config github.https true

	CMD ["ruby", "liker_app.rb"]
	require 'bundler/inline'

	gemfile do
	source 'https://rubygems.org'
	gem 'redis'
	gem 'eventmachine', '1.2.7'
	gem 'em-hiredis'
	gem 'em-websocket'
	gem 'eventmachine_httpserver', require: 'evma_httpserver'
	end

	puts "Gems installed"

	URL = ENV['URL'].freeze
	INDEX = <<~HTML
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<style>
	.heart {
	position: absolute;
	top: 100%;
	height: 50px;
	width: 50px;
	-webkit-transition: 2.5s top ease-out, 0.5s visibility linear;
	-moz-transition: 2.5s top ease-out, 0.5s visibility linear;
	-o-transition: 2.5s top ease-out, 0.5s visibility linear;
	transition: 2.5s top ease-out, 0.5s visibility linear;
	}

	.heart.active {
	top: 30%;
	visibility: none;
	}
	</style>
	</head>
	<body>
	<div class='heart' id='heart_id' style="">
	<svg width="30" height="30" viewBox="0 0 120 104" fill="none" xmlns="http://www.w3.org/2000/svg">
	<path d="M97.5 9L117 30L59.5 100L3.5 30L21 9L59.5 3L97.5 9Z" fill="#FF003D"/>
	<path d="M97.5 9L117 30L59.5 100L3.5 30L21 9L59.5 3L97.5 9Z" fill="url(#paint0_linear)"/>
	<path d="M21 9L59.5 3M21 9L3.5 30M21 9L35.4211 39M97.5 9L117 30M97.5 9L59.5 3M97.5 9L85.5526 39M117 30L59.5 100M117 30L85.5526 39M59.5 3L85.5526 39M59.5 3L35.4211 39M59.5 100L3.5 30M59.5 100L35.4211 39M59.5 100L85.5526 39M3.5 30L35.4211 39M35.4211 39H85.5526" stroke="#D01010" stroke-width="4"/>
	<path d="M21 9L59.5 3M21 9L3.5 30M21 9L35.4211 39M97.5 9L117 30M97.5 9L59.5 3M97.5 9L85.5526 39M117 30L59.5 100M117 30L85.5526 39M59.5 3L85.5526 39M59.5 3L35.4211 39M59.5 100L3.5 30M59.5 100L35.4211 39M59.5 100L85.5526 39M3.5 30L35.4211 39M35.4211 39H85.5526" stroke="url(#paint1_linear)" stroke-width="4"/>
	<defs>
	<linearGradient id="paint0_linear" x1="60.25" y1="3" x2="60.25" y2="100" gradientUnits="userSpaceOnUse">
	<stop stop-color="white"/>
	<stop offset="1" stop-color="white" stop-opacity="0"/>
	</linearGradient>
	<linearGradient id="paint1_linear" x1="60.25" y1="3" x2="60.25" y2="100" gradientUnits="userSpaceOnUse">
	<stop stop-color="#FFA0A0" stop-opacity="0.42"/>
	<stop offset="1" stop-color="#FF8181" stop-opacity="0.63"/>
	</linearGradient>
	</defs>
	</svg>
	</div>

	<script>
	const heart = document.getElementById('heart_id');
	const socket = new WebSocket('ws://#{URL}:8080');

	socket.addEventListener('open', function (event) {
	console.log('Opened connection');
	});

	socket.addEventListener('message', function (event) {
	console.log('Message from server ', event.data);
	addHeart(event.data);
	});

	socket.addEventListener('close', function (event) {
	console.log('Closed connection');
	});


	function addHeart(name) {
	const item = heart.cloneNode(true);
	item.removeAttribute("id")
	const nickname = document.createTextNode(name);
	item.appendChild(nickname);
	document.body.appendChild(item);
	setTimeout(function() {
	item.classList.add('active');
	setTimeout(function() {
	document.body.removeChild(item);
	}, 2500);
	}, 50)
	}
	</script>
	</body>
	</html>
	HTML

	class StaticHandler < EM::Connection
	include EM::HttpServer

	def post_init
	super
	no_environment_strings
	end

	def process_http_request
	response = EM::DelegatedHttpResponse.new(self)
	if @http_path_info == '/'
	response.status = 200
	response.content_type 'text/html'
	response.content = INDEX
	else
	response.status = 404
	end
	response.send_response
	end
	end

	EM.run do
	EventMachine::WebSocket.start(host: '0.0.0.0', port: 8080) do \|ws\|
	puts 'Establishing websocket'
	ws.onopen do
	@pubsub = EM::Hiredis.connect.pubsub
	@pubsub.subscribe('liker_bot')
	@pubsub.on(:message) { \|_, message\| ws.send message }
	end

	ws.onclose { puts 'Closed' }
	end

	EventMachine.start_server('0.0.0.0', 3000, StaticHandler)
	puts "Running on 3000. Socket: 8080"
	end