onmax/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Quick example how to work with RxJS as a Pipe of messages
See it in work

  
## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>RxJS basic write and read</title>
    <script src="./index.ts" type="module"></script>
    <link
      href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
      rel="stylesheet"
    />
  </head>

  <body>
    <div
      class="
        px-6
        py-2
        flex
        space-x-4
        w-full
        bg-gray-200
        items-baseline
        border-b border-gray-600
      "
    >
      <input
        type="text"
        id="username"
        class="
          rounded
          bg-gray-100
          border border-gray-400
          text-gray-800
          px-2
          text-sm
        "
        placeholder="Your name"
      />
      <input
        type="text"
        id="message"
        class="
          rounded
          bg-gray-100
          border border-gray-400
          text-gray-800
          px-2
          text-sm
        "
        placeholder="Your message"
      />
      <button
        class="
          bg-gray-700
          hover:bg-gray-800
          rounded
          text-white
          px-4
          py-1
          cursor-pointer
          text-xs
          uppercase
          shadow
        "
        id="writeBtn"
      >
        Write to pipe
      </button>
    </div>

    <main>
      <ul class="flex flex-col px-6" id="messages">
        <li class="flex space-x-2 items-baseline py-4 border-b border-gray-300">
          <span class="text-gray-900"
            >Welcome, here you will see your pipe in real time</span
          >
        </li>
      </ul>
    </main>
  </body>
</html>

## index.ts
import { Subject } from 'rxjs';
import { getMessage, PipeMessage, appendToUL } from './util';

const $pipe = new Subject<PipeMessage>();

let id = 0;

function writeInPipe() {
  const message = getMessage(++id);
  console.log('New item was written in the pipe with id:', id, message);
  $pipe.next(message);
}

$pipe.subscribe((message) => {
  appendToUL(message.time, message.message, message.user.username);

  // You can execute any code
});

// Writer button
let writeButton = document.getElementById('writeBtn');
writeButton.addEventListener('click', writeInPipe);

## package.json
{
  "name": "rxjs",
  "version": "0.0.0",
  "private": true,
  "dependencies": {
    "rxjs": "latest"
  }
}

## util.ts
export interface PipeMessage {
  id: number;
  time: Date;
  message: string;
  user: {
    username: string;
    mail: string;
  };
}

export function humanReadable(date: Date) {
  return `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
}

export function getMessage(id: number): PipeMessage {
  const username =
    (document.getElementById('username') as HTMLInputElement)?.value ||
    'Anonymous';
  const message =
    (document.getElementById('message') as HTMLInputElement)?.value ||
    'No content';
  const date = new Date();
  return {
    id,
    time: date,
    message,
    user: {
      mail: `${username}@mail.com`,
      username: username,
    },
  };
}

export function appendToUL(date: Date, messageStr: string, username: string) {
  const ul = document.getElementById('messages');

  const li = document.createElement('li');
  li.className =
    'flex space-x-3 items-baseline py-1 border-b border-gray-200/50';

  const time = document.createElement('span');
  time.textContent = `[${humanReadable(date)}]`;
  time.className = 'time text-gray-600 font-bold text-xs';

  const user = document.createElement('span');
  user.textContent = username;
  user.className = 'message text-gray-600 uppercase text-xs';

  const message = document.createElement('span');
  message.textContent = messageStr;
  message.className = 'message text-gray-600 ';

  li.appendChild(time);
  li.appendChild(user);
  li.appendChild(message);

  ul.appendChild(li);
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>RxJS basic write and read</title>
	<script src="./index.ts" type="module"></script>
	<link
	href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
	rel="stylesheet"
	/>
	</head>

	<body>
	<div
	class="
	px-6
	py-2
	flex
	space-x-4
	w-full
	bg-gray-200
	items-baseline
	border-b border-gray-600
	"
	>
	<input
	type="text"
	id="username"
	class="
	rounded
	bg-gray-100
	border border-gray-400
	text-gray-800
	px-2
	text-sm
	"
	placeholder="Your name"
	/>
	<input
	type="text"
	id="message"
	class="
	rounded
	bg-gray-100
	border border-gray-400
	text-gray-800
	px-2
	text-sm
	"
	placeholder="Your message"
	/>
	<button
	class="
	bg-gray-700
	hover:bg-gray-800
	rounded
	text-white
	px-4
	py-1
	cursor-pointer
	text-xs
	uppercase
	shadow
	"
	id="writeBtn"
	>
	Write to pipe
	</button>
	</div>

	<main>
	<ul class="flex flex-col px-6" id="messages">
	<li class="flex space-x-2 items-baseline py-4 border-b border-gray-300">
	<span class="text-gray-900"
	>Welcome, here you will see your pipe in real time</span
	>
	</li>
	</ul>
	</main>
	</body>
	</html>
	import { Subject } from 'rxjs';
	import { getMessage, PipeMessage, appendToUL } from './util';

	const $pipe = new Subject<PipeMessage>();

	let id = 0;

	function writeInPipe() {
	const message = getMessage(++id);
	console.log('New item was written in the pipe with id:', id, message);
	$pipe.next(message);
	}

	$pipe.subscribe((message) => {
	appendToUL(message.time, message.message, message.user.username);

	// You can execute any code
	});

	// Writer button
	let writeButton = document.getElementById('writeBtn');
	writeButton.addEventListener('click', writeInPipe);
	{
	"name": "rxjs",
	"version": "0.0.0",
	"private": true,
	"dependencies": {
	"rxjs": "latest"
	}
	}
	export interface PipeMessage {
	id: number;
	time: Date;
	message: string;
	user: {
	username: string;
	mail: string;
	};
	}

	export function humanReadable(date: Date) {
	return `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
	}

	export function getMessage(id: number): PipeMessage {
	const username =
	(document.getElementById('username') as HTMLInputElement)?.value \|\|
	'Anonymous';
	const message =
	(document.getElementById('message') as HTMLInputElement)?.value \|\|
	'No content';
	const date = new Date();
	return {
	id,
	time: date,
	message,
	user: {
	mail: `${username}@mail.com`,
	username: username,
	},
	};
	}

	export function appendToUL(date: Date, messageStr: string, username: string) {
	const ul = document.getElementById('messages');

	const li = document.createElement('li');
	li.className =
	'flex space-x-3 items-baseline py-1 border-b border-gray-200/50';

	const time = document.createElement('span');
	time.textContent = `[${humanReadable(date)}]`;
	time.className = 'time text-gray-600 font-bold text-xs';

	const user = document.createElement('span');
	user.textContent = username;
	user.className = 'message text-gray-600 uppercase text-xs';

	const message = document.createElement('span');
	message.textContent = messageStr;
	message.className = 'message text-gray-600 ';

	li.appendChild(time);
	li.appendChild(user);
	li.appendChild(message);

	ul.appendChild(li);
	}